アメブロのカスタマイズをするためにCSSの編集を始める前に、いくつか知っておきたいことがことがあります。
アメブロのカスタマイズはかなり独特な部分があり、初心者はもちろん、他のブログシステムなどで制作やカスタマイズの経験がある人でも、その時に覚えた普通のやり方が通じず困ってしまうことが多いです。
なので、それら独特な部分についても、しっかり理解した上でカスタマイズを始めると、途中で「なぜ？」「そんなはずは…」といった状況に陥ってしまうのを防ぐことができると思います。
目次
CSSでカスタマイズできるのはPC(とiPad)向けの画面だけ
アメブロでCSSを編集してカスタマイズできるのは、PC(またはiPad)で見た画面だけです。
スマートフォンのブラウザやアメーバアプリで見た時の画面は、基本的にカスタマイズできません。
なぜかと言うと、ユーザーが編集できるCSSの内容が、スマートフォン版のアメブロでは一切読み込まれないからです。
実は、裏技的な方法として、記事内にstyleタグを記述して半ば強引にCSSを読み込むという方法を使うと、カスタマイズすることはできます。
ですが、styleタグは標準の記事エディタでは見えないため、気づかず消してしまったりしますし、全ての記事にstyleタグを埋め込んでいく必要があるため、かなり骨が折れます。
しかも、アメブロのスマホ向け画面は、そもそもユーザーがカスタマイズすることが想定されていませんので、何の前触れもなく平気で構造や仕様が変わったりするため、その都度対応する必要があり、とても大変です。
なので、カスタマイズできるのはPC(とiPad)のみと割り切る方が良いでしょう。
また、記事本文をCSSでのカスタマイズを前提にした書き方にしてしまうと、スマートフォンで見たときに反映されず、表示が崩れてしまうことがあるので、注意が必要です。
CSSに書けないHTMLなどはフリースペースに書く
アメブロで、例えば、(PCの)全ページにグローバルナビを設置しようと思うと、CSSのほかに、ナビの本体となるHTMLを記述する必要があります。
そのような場合、一般的にはそれを表示したい位置にHTMLを記述すると思いますが、それはアメブロではできません。
アメブロで、全ページに表示できるようなHTMLを記述できるのは、サイドバーに設置できる「フリースペース」だけとお考え下さい。
なので、HTMLはフリースペースに記述し、それをCSSで表示したい位置まで動かすという手法を使います。
アメブロのPC向け画面でグローバルナビを表示しているブログは、漏れなくこの方法でやっていると言っても良いと思います（CSSもフリースペース内のstyleタグで書いてある人もいます）。
ちなみに、このフリースペースも注意する必要のあるクセが3つあります。
- 保存するときに末尾に改行が1つ追加される
- 全ての改行が
brタグに自動変換される - 禁止タグがたくさんある
の2つです。
改行が追加される件は、フリースペースを修正しながら何度も保存することで、気づかないうちにたくさんの改行がフリースペースの最後にくっついてしまい、サイドバーに大きな空白地帯ができてしまう原因になります。
改行がbrタグに変換される件は、タグによっては全ての改行を削除してから保存しないと表示が崩れてしまうことになります。
時々、グローバルナビが階段状になっている人を見かけますが、それはこのbrに変換されるのを放置した結果であることが多いです。
禁止タグについてはそのままの意味で、使用禁止のHTMLタグがたくさんあります。おそらく記事本文と同等だと思います。
例えば、scriptタグやform関係(inputやbuttonなど)は使えませんので、ここにお問い合わせ用のメールフォームを設置するといったことは無理です。
CSSを編集できるのは「CSS編集用デザイン」だけ
アメブロで、CSSを編集してカスタマイズできるのは「CSS編集用デザイン」というデザイン（スキン）だけです。
ほかにも「カスタマイズ可能」となっているデザインもありますが、CSS編集用デザイン以外は、システム側で用意された簡易カスタマイズ機能が使えるだけで、自由に編集できるCSSは用意されていません。
アメブロをCSS編集用デザインにする手順については別記事がありますので、ご参照下さい。
「CSS編集用デザイン」は4つある
アメブロをCSS編集用デザインにする手順にも書きましたが、アメブロには「CSS編集用デザイン」という同名のデザイン（スキン）が4つもあります。
それら4つのうち、3つはほとんどの部分が共通ですが、1つは構造から全く異なっています。
4のCSS編集用デザインの違いや特徴などについては、別記事で解説していますので、ご参照下さい。
「CSS編集用デザイン」のCSSを編集する手順
アメブロのカスタマイズのためにCSSを編集するわけですので、そのやり方についても事前に押さえておきましょう。
カスタマイズで使う画像のアップロード先
カスタマイズする際には、画像を使うことが多いと思います。
アメブロは、画像をアップロードできる場所が複数あり、どこへアップロードすれば良いか悩みそうですが、当サイトのお勧めは、普段使い慣れた記事エディタでアップロードする方法です（画像フォルダというところにアップロードされます）。
また、アップロードした画像をCSSで利用するには、画像のURLという情報が必要になります。
これらについても、別記事で開設していますので、ご参照下さい。
まとめ
以上、アメブロをカスタマイズするためにCSSの編集をする前に知っておきたいこと、についてご紹介しました。
まとめると、
- CSSでカスタマイズできるのはPC(とiPad)向けの画面だけ
- CSSに書けないHTMLなどはフリースペースに書く
- CSSを編集できるのは「CSS編集用デザイン」だけ
- 「CSS編集用デザイン」は4つある
- 「CSS編集用デザイン」のCSSを編集する手順
- カスタマイズで使う画像のアップロード先
と、なります。
これだけわかっていれば、あとはひとつひとつネタを見つけてアメブロをカスタマイズしていくことが可能だと思いますので、ぜひ、マスターして下さいね。
