目次

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

アメブロのカスタマイズ専用のベースデザイン「CSS編集用デザイン」には、ユーザーが自ら編集してデザインをカスタマイズするのための「ブログデザインCSS」が用意されています(以下、「ブログデザインCSS」を単に「CSS」と呼びます)。

アメブロはで、このCSSを適切に編集することで、パソコン(およびiPad)向けの公開画面のデザインに関して、ヘッダー画像の設置や背景の変更など、かなり自由にカスタマイズできるようになっています。

逆に、アメブロをカスタマイズするには、このCSSの問題なく編集をできることが必須で避けて通れないスキルであると言ってもいいと思います。

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

なお、CSSの編集でデザインをカスタマイズできるのは、基本的にパソコンとiPad向けの公開画面のみで、残念ながら、スマートフォン向けページやアメンバー限定記事にはカスタマイズ内容が適用されませんのでご承知おきください。

CSSを編集する基本的な手順

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

当記事でご紹介する手順は、Windows 10とGoogle Chromeを使った場合です。OSやブラウザの種類やバージョンをいった環境が異なる場合は、表示や操作が異なる可能性もありますので、ご自身の環境に合わせて読み替えて下さい。

「管理トップ」画面で「デザインの設定」をクリック

まず、「管理トップ(https://blog.ameba.jp/ucs/top.do)」の左サイドバーにある「デザインの設定」というボタンをクリックします。。

「デザインの変更」画面で「CSSの編集」をクリック

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

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

「現在使用中のブログデザインCSS」の入力欄を下へスクロール

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

このテキストエリアに書かれているのが、現時点で保存されているCSSの内容です。

カスタマイズするには、この内容を編集していくことになります。

本来はCSSの内容を読み、理解した上で、適切な位置に適切な設定を書き込んでいくのがベストですが、恐らくこの記事を参考にされている方は、そこまでの十分な予備知識をお持ちでない方が多いと思いますので、書かれている内容は難解だろうと思います。

そこで、「CSSは前(上の方)に書いた内容が後(下の方)に書いた内容で上書きされる」という性質を利用して、当サイトでは、「カスタマイズのコードをCSSの「末尾(一番下)に追加」するというやり方をお勧めしています。

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

末尾に設定を追加

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

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

「表示を確認」して「保存」

CSSにコードが追加できたら、「表示を確認する」と書かれたリンクをクリックしてカスタマイズが反映されるか確認し、問題なければ「保存」ボタンで保存して下さい。

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

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

最終確認

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

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

まとめ

以上、CSSを編集してアメブロをカスタマイズをする手順についてご紹介しました。

最初の方にも書きましたが、CSSの編集作業はアメブロをカスタマイズする上では必須ですので、ぜひマスターしておいてください。

関連記事