CSSを編集してアメブロのカスタマイズをする方法

アメブロカスタマイズのベースデザインである「CSS編集用デザイン」は、ユーザー自身が直接CSSの編集をすることで、パソコンやiPadでブログを見たときのデザインをカスタマイズできるようになっています。

当サイトでは、このユーザー向けに用意されたCSSのことを「ブログデザインCSS」と呼んでいます。

アメブロは、ブログデザインCSSを適切に編集することで、ヘッダー画像や背景画像の変更を始めとして、パソコン版アメブロの一般公開ページのデザインに関しては、かなり自由にカスタマイズできます。

そこで、当記事では、アメブロカスタマイズの基礎の基礎とも言えるブログデザインCSSを編集してアメブロをカスタマイズする手順についてご紹介します。

当サイト内で「CSSの編集」あるいは「CSSに貼り付け」「CSSに追加」などという表現で書いてある場合、別途何かことわりがない限り、全てこの手順でカスタマイズするということですので、ぜひやり方をマスターしておいて下さいね。

CSSを編集してアメブロのカスタマイズをする手順

それでは、以下に、実際の手順を説明します。

マイページで「アメブロ」をクリック

まずは、「マイページ」から。

マイページの上部に並んでいるアイコン付きボタンの中から「アメブロ」というボタンをクリックしましょう。

管理トップで「デザインの変更」をクリック

すると、アメブロ管理のトップページ「管理トップ」が開きます。

管理トップでは、左側に並んでいるアイコン付きのボタンの中から「デザインの変更」というボタンをクリックして下さい。

「CSSの編集」をクリック

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

もし、「CSSの編集」リンクがない場合は、デザインが「CSS編集用デザイン」になっていませんので、まずは、アメブロのデザインをCSSでカスタマイズできるCSS編集用デザインに変更して下さい。

「現在使用中のブログデザインCSS」のスクロールバーを最下部へ

「CSSの編集」をクリックすると、「ブログデザインのCSSの編集」というページが開き、ページが「現在使用中のブログデザインCSS」という見出しの位置まで自動的にスクロールされます。

見出しの下には注意書きがあり、その下の文字入力領域に表示されているのが「現在使用中のブログデザインCSS」の内容です。

基本的に、カスタマイズは、ここに必要に応じてCSSのコードを追加していくことで実施します。

「追加」しますので、まずは、ブログデザインCSSの最後の行が表示される位置まで文字入力領域をスクロールしましょう。

「現在使用中のブログデザインCSS」の最後にカスタマイズのためのコードを追加

文字入力領域を最後までスクロールしたら、最後の行よりも下に、行いたいカスタマイズのためのコードを追加します。

表示を確認する

コードを追加したら、ひとまず「表示を確認する」と書かれたリンクをクリックして、行いたいカスタマイズが反映されるか確認(プレビュー)して下さい。

この表示の確認で上手く反映されない場合は、保存してもカスタマイズがうまくいかない可能性が高いので、原因を調べて修正して下さい。

編集内容を「保存」

表示の確認で問題なく反映された場合は、「保存」ボタンをクリックして、ブログデザインCSSの修正内容を保存しましょう。

保存が成功した場合、特に何のメッセージも表示されませんが、次の画像のように文字入力領域のスクロール位置が一番上に戻りますので、それを目安にすると良いと思います。

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

最終確認

保存に成功したら、最終的に、もう一度ブログを表示してカスタマイズが上手く反映されているか確認しておきましょう。

なお、キャッシュ(古い内容をPCが覚えている)影響で、実際には上手く行っていても、確認時にはカスタマイズした内容が反映されない場合があります。

ですので、確認の際は、ブログを表示した状態でページを強制的に再読込み(Windowsの場合はCtrl+F5キーを押す)をして、キャッシュの影響を避けるよう心がけて下さい。

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

なぜブログデザインCSSの最後に追加するのか?

さて、ブログデザインCSSには、特に何のカスタマイズもしていない初期状態でも、既に多くのコードが記述されていることに気づかれたでしょうか。

実は、これらの内容の数値などを適切に修正すればある程度のカスタマイズが出来るようになっています。

ですが、当サイトでは、この方法はお勧めせず、上記のように「最後に追加」する方法をお勧めしています。

(もちろん、これは初心者の場合で、CSS全体を適切に把握できる中~上級者にはそのようなアドバイスは必要ありませんね)

理由は、CSSの途中を修正してしまうと、万が一、修正内容にミスがあってCSS全体がエラーの状態になってしまった時に、どこを変更したのかわからなくなってしまい、元に戻せなくなるというトラブルが起こりやすいからです。

それに対して、当サイトでお勧めしている「最後に追加」する方法であれば、仮にエラーとなってしまっても、追加した部分を削除するだけで簡単に元の状態に戻せます。

また、CSSは、「同様の内容を記述した場合は、下(後)の方に記述した設定が優先的に表示に反映される」というルールがあります。

例えば、ある位置で「この文字の色は赤」という意味のコードを記述し、もっと下の方で同じ文字に対して「この文字の色は青」と記述した場合、最終的にブログの表示に反映されるのは、下の方に記述した「青」になります。

このルールのため、CSSの途中で修正すると、もし同じような内容がもっと下の方に記述してあることに気付かなかったら、いくら修正しても修正内容がブログに反映されないというトラブルになります。

このように、「最後に追加」する方法は、初心者がCSSでカスタマイズする際に、さまざまなトラブルを回避しやすい方法というわけです。

まとめ

以上、アメブロをカスタマイズする際の「ブログデザインCSS」を編集する手順をご紹介しました。

もしよろしければ、参考にしてください。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。