アメブロをカスタマイズ向けのベースデザイン「CSS編集用デザイン」にする手順

アメブロのカスタマイズは、カスタマイズ向けのベースデザイン「CSS編集用デザイン」から行うのが一般的です。

今現在、選択できるアメブロのデザインの中で、カスタマイズにつかうCSS（ブログデザインCSS）が用意されているのが「CSS編集用デザイン」だけだからです。

当記事では、アメブロカスタマイズの第一歩と言えるアメブロを「CSS編集用デザイン」に変更する手順を紹介します。

当記事の方法でアメブロをCSS編集用デザインに変更すると、それまでにカスタマイズした内容（編集済みのCSSの内容）が消えて初期化されてしまいますので、ご注意下さい。記事やフリースペース、メッセージボードの内容などは消えません。

「CSS編集用デザイン」に変更する手順

では、ここから実際にCSS編集用デザインにする方法を、順を追って説明していきます。

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

「デザインの変更」という画面が開いたら、ページのもっと下の方が見えるようにスクロールしていきます。

いくらかスクロールすると「カスタム可能」というリンクが見えるので、それをクリックします。

画面が変わって「カスタム可能」デザインの一覧が表示されたら、もう一度スクロールしてページの下の方を見ていきます。

いくらかスクロールすると、「CSS編集用デザイン」という項目が全部で4つ見えてきます。

このうち、上の画像で青枠で囲った3つが新CSS編集用デザイン（新CSS）で、赤枠で囲った1つが旧CSS編集用デザイン（旧CSS）です。

選択できるデザインの一覧は、不定期に並び順が変わったり増減があったりしますので、ご覧になった時点では、当記事の説明と同じ位置には無い可能性もあります。

新CSS編集用デザインと旧CSS編集用デザインの違いなどについては、別記事で解説していますので、もしわからない場合は参考にして下さい。

選択肢が4つもあると迷うかもしれませんが、基本的にどれを選んでもカスタマイズは可能です。

ただし、新CSSと旧CSSではカスタマイズで使うCSSの記述内容が違いますので、既に実施したいカスタマイズの内容が決まっているようでしたら、それらを実現できる方を選ぶのが良いと思います。

特に理由がないのであれば、デザイン的にも少々古さを感じる旧CSS編集用デザインよりも、新CSS編集用デザインの何れかを選ぶと良いと思います。

ちなみに、新CSSの3つは、左から順に、

のトップページとなっています。

というわけで、どのCSS編集用デザインで始めるか決まったら、そのサムネイル画像をクリックして下さい。

次に、カラム数とサイドバー（メニュー）のレイアウトを選択します。

レイアウトは、採用したCSS編集用デザインの種類によって、3種類または5種類から選べますので、目的や好みに応じて選択してください。

最近は、記事が読みやすい「2カラム・メニュー右」がよく使われているので、他を選ぶ理由がない場合は「2カラム・メニュー右」で良いと思います。

使用するレイアウトが決まったら、そのレイアウトのアイコンをクリックで選択し、「適用する」ボタンをクリックしてください。

最後に、「CSS編集用デザインを適用しました」という以下のようなページが表示されれば完了です。

すぐにカスタマイズを始めたい場合は、「CSSの編集をする」というボタンをクリックすれば、早速CSSを編集することができます。

以上、アメブロをカスタマイズ専用のベースデザイン「CSS編集用デザイン」に変更する手順を紹介しました。

まとめると、

という流れになります。

基本的に、マウスでクリックしていくだけですので、選択肢さえ決めてしまえば、操作は簡単ですね。