アメブロのCSSを編集する手順：カスタマイズで必須の基本操作です！

アメブロのカスタマイズは、ほとんどの場合、CSS編集用デザインで提供されるCSS(ブログデザインCSS)を編集することで実施します。

当記事では、アメブロをカスタマイズするために、CSSを編集するときの手順について紹介します。

アメブロのカスタマイズ時には頻繁に行う作業ですので、ぜひマスターしておくことをお勧めします。

CSSを編集する手順

それでは、実際の手順を説明していきます。

まず、管理トップの左サイドバーにある「デザインの設定」をクリックします。

「デザインの変更」という画面が開いたら、「CSSの編集」と書かれたリンクをクリックします。

もし「CSSの編集」が無い場合は、カスタマイズしようとしているアメブロが「CSS編集用デザイン」になっていないと思われますので、まずは、CSS編集用デザインに変更するところからやってみて下さい。

「現在使用中のブログデザインCSS」が表示されたら、文字入力できるテキストエリアに注目してください。

このテキストエリアに書かれているのが、その時点で保存されているCSSの内容で、カスタマイズするには、ここの内容を編集していくことになります。

本来はCSSの内容を理解した上で、適切な位置に適切な設定(コード)を書き込んでいくのがベストですが、この記事を参考にされている方は、もしかすると、そこまでの予備知識をお持ちでないかもしれません。

そこで、当サイトでは「カスタマイズするためのコードをCSSの末尾(一番下)に追加する」というやり方をお勧めしています。

これは、「CSSは、前(上の方)で書いた内容が、後(下の方)で書いた内容で上書きされる」という特徴を利用したやりかたです。

この方法で確実に上手カスタマイズできるというわけではありませんが、書き間違いなどにより総崩れになってしまう失敗が少なくなるので、安全なやり方と言えると思います。

また、上手く行かなかった場合のリカバリーも容易で、最後に追加した部分を削除するだけです。

ということですでの、テキストエリアのスクロールバーをCSSの末尾が見える一番下までスクロールして下さい。

テキストエリアの末尾が見えたら、カスタマイズ用のコードをここに追加（既にクリップボードにコピーしたものがあれば貼り付け）します。

コードを追加するときは、既存の内容を消してしまわないよう、また、あとで見た時にわかりやすいように、元の末尾の下に何行か（1～何行でも）改行を入れてから追加すると良いと思います。

なお、追加するカスタマイズ用のコードは、貼り付けるだけでそのままで使えるものもありますが、場合により更に編集する必要があったりもしますので、確認して下さい。

コードを追加し、必要に応じて編集が終わったら、「表示を確認する」と書かれたリンクをクリックしてカスタマイズが反映されるか確認し、問題なければ「保存」ボタンで保存します。

なお、保存処理が成功しても「保存しました」のようなメッセージは何も表示されませんが、コードを入力したテキストエリアのスクロールバーが勝手に一番上まで上がりますので、これが保存されたことの目安になります。

もし保存ボタンをクリックした時に「リクエストは既に処理中であるか無効です」のような赤い文字でエラーが表示された場合は、追加・編集した内容が保存できていませんので、もう一度「保存」ボタンをクリックして保存を試みて下さい。

保存に成功したら、念のため、アメブロの公開画面を表示してカスタマイズが反映されているか最終確認をしておいてください。

確認の結果、カスタマイズした内容が正しく反映されていれば成功です。

以上、アメブロカスタマイズの基本操作である、CSSを編集する手順ついてご紹介しました。

まとめると、

となります。

CSSの編集作業はアメブロをカスタマイズする上では必須ですので、よかったら参考にして下さい。