アメブロをカスタマイズ専用のデザイン「CSS編集用デザイン」にする手順
アメブロのデザインをカスタマイズするためには、まず最初に、カスタマイズ専用のデザイン「CSS編集用デザイン」を選択、適用します。
アメブロに用意されている多くのデザインは、デザインを自由にカスタマイズするためにユーザーが自分で編集できる「ブログデザインCSS」(以下、単に「CSS」と呼びます)が用意されていません。
現時点で選択できるデザインの中でCSSが用意されているのは「CSS編集用デザイン」だけです。
つまり、アメブロのカスタマイズは「CSS編集用デザイン」を選択・適用した状態から、適切にCSSを編集していくことが基本となります。
そこで当記事では、アメブロをカスタマイズするための最初の一歩、アメブロのデザインをカスタマイズのスタート地点となる「CSS編集用デザイン」に変更する手順をご紹介します。
なお、基本的に、CSS編集用デザインのCSSを編集してカスタマイズできるのはパソコンとiPad向けの公開ページのみで、残念ながら、スマートフォン向け画面やアメンバー限定記事をカスタマイズすることはできませんのでご注意下さい。
「CSS編集用デザイン」に変更する手順
それでは、ここから実際にCSS編集用デザインにする手順を説明していきます。
「管理トップ」画面で「デザインの設定」をクリック
まず、「管理トップ(https://blog.ameba.jp/ucs/top.do)」画面の左サイドバーにある「デザインの設定」というボタンをクリックします。
「デザインの変更」画面で「カスタム可能」を選択
「デザインの変更」という画面が開いたら、スクロールバーを下へ下げて画面をスクロールしていきます。
いくらかスクロールすると「カスタム可能」というリンクが見えるので、それをクリックしてください。
「カスタム可能」デザインの中から「CSS編集用デザイン」を選択
画面が変わって「カスタム可能」デザインの一覧が表示されたら、もう一度スクロールバーを下へ下げてスクロールしていきます。
いくらかスクロールすると、「CSS編集用デザイン」という項目が全部で4つ見えます。
このうち、上の画像の赤枠内の3つが新CSS編集用デザイン（新CSS）で、青枠内の１つがそれらよりも以前からある旧CSS編集用デザイン（旧CSS）です（違いについてはこちらを参照下さい）。
新CSS編集用デザインの3つは、多くは共通ですが、トップページのレイアウトなどが異なります。
トップページの表示が、左から順に、
- リスト型→記事タイトル＋本文冒頭＋サムネイル画像が一覧表示される
- 標準型→記事の内容がそのまま表示される
- タイル型→アイキャッチ画像＋記事タイトルが２列で表示される
となっています。
選択肢が4つもあるので、どれにすれば良いのか迷うかもしれませんね。
基本的にどれを選んでもカスタマイズは可能ですが、特に理由がないのであれば、既に古くなりつつある旧CSS編集用デザインではなく、新CSS編集用デザインの何れかを選ぶことをお勧めします。
当サイトでご紹介しているカスタマイズ方法も新CSS編集用デザイン専用のものが多いですので、そういった意味でも新CSSをお勧めしたいと思います。
というわけで、どのCSS編集用デザインで始めるか決まったら、それのサムネイル画像をクリックして下さい。
サイドバーのレイアウトを選択
次に、カラム数とサイドバー（メニュー）のレイアウトを選択します。
どのCSS編集用デザインを選ぶかにもよりますが、レイアウトは最大で5種類から選べますので、目的や好みに応じて選択してください。
新CSS編集デザインの初期値が「2カラム・メニュー右」だからか、または流行もあるのか、最近はそのレイアウトが選ばれていることが多い印象です。
ちなみに、旧CSS編集デザインを使っているユーザーは「3カラム・右ワイドメニュー」が多めだと思います。
使用するレイアウトが決まったら「適用する」ボタンをクリックしてください。
完了
最後に、以下のようなページが表示されれば完了です。
すぐにカスタマイズを始めたい場合は、ここから「CSSの編集をする」というボタンをクリックすれば、さっそくCSSを編集することができます。
まとめ
以上、アメブロをカスタマイズ専用のベースデザインCSS編集用デザインに変更する手順をご紹介しました。
よかったら参考にしてください。