アメブロのカスタマイズに関する制限・制約・注意事項など

アメブロでは、カスタマイズする際にハマりやすいアメブロならではの制限・制約・注意事項などがあります。

他の無料ブログシステムなどではあまり経験することが無いものもありますので、ここでまとめてご紹介します。

CSSでカスタマイズできるのは「CSS編集用デザイン」だけ

アメブロのデザイン一覧を見てみると、カスタマイズ可能となっているデザイン(スキン)がたくさんありますが、これらの中で、CSSを記述してカスタマイズできるのは「CSS編集用デザイン」というスキンだけです。

「CSS編集用デザイン」以外を選択すると、CSSを編集する画面もありません。

CSS編集用デザインにする手順は↓こちらの記事で。

カスタマイズできるアメブロのベースデザイン「CSS編集用デザイン」は、同じ名前のものが4つあります。

3つは概ね似た仕様ですが、1つは全くの別物でカスタマイズする際のCSSのコードも全く違いますので注意が必要です。

詳しくは↓こちらの記事で。

アメブロのデザインをCSSでカスタマイズできるのはパソコンとiPad向けの画面だけです。

基本的には、スマホ向けの画面をCSSでカスタマイズすることはできません。

アメブロのCSSは、「@import」など「@」付きのコマンドの使用が一部禁止されています。

これらを記述するとエラーが発生して、編集後のCSSの内容を保存できない仕様になっています。

そのため、CSS内で、例えば「@font-face」でWebフォントを使用する設定を記述することもできませんし、「@import」で別のCSSファイルを読み込んだりすることもできません。

なお、「@media」は使えるので、画面幅に応じてデザインを変えることは可能です。

アメブロは、記事以外の場所でサイトの基本構造となるHTMLを変更することはほとんどできず、カスタマイズすると言っても、基本的にはCSSで見た目を変えることができるのみです。

カスタマイズに使える場所としてHTMLを記述できるのは、サイドバーの「フリースペース」だけです。

なので、例えばヘッダー部にグローバルナビを表示する場合などでも、HTMLをフリースペースに書いて、それをCSSで（半ば無理矢理に）ヘッダーの位置に表示するようなやり方になります。

「フリースペース」は、数少ないカスタマイズで使えるHTMLを記述できる最有力候補ですが、使用が禁止されているタグが多いため、注意が必要です。

script、form、input、iframeなどは禁止タグとなっていて使えないため、例えばメールフォームを設置するようなことはほぼ不可能です。

これはバグと呼ぶべきかもしれませんが、「フリースペース」は、内容を変更して保存すると、保存の度に空白行が一行追加されます。

その影響で、カスタマイズの調整中にサイドバーのフリースペース表示位置の下に大きな空間が空いてしまう事がよくありますので、その場合は、フリースペース末尾の空白行を削除することで解消します。

以上、アメブロのカスタマイズに関する制限・制約・注意事項などをまとめてみました。

もし、ほかにもお伝えしたほうが良さそうなことがあれば、追記していきたいと思います。

よかったら参考にして下さい。