目次

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

アメブロのデザインをカスタマイズするためには、まず最初に、カスタマイズ専用のデザイン「CSS編集用デザイン」を選択、適用します。

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

現時点で選択できるデザインの中でCSSが用意されているのは「CSS編集用デザイン」だけです。

つまり、アメブロのカスタマイズは「CSS編集用デザイン」を選択・適用した状態から、適切にCSSを編集していくことが基本となります。

そこで当記事では、アメブロをカスタマイズするための最初の一歩、アメブロのデザインをカスタマイズのスタート地点となる「CSS編集用デザイン」に変更する手順をご紹介します。

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

既に何らかのカスタマイズを実施済みのアメブロを当記事の方法でCSS編集用デザインに変更すると、それまでのカスタマイズ内容(編集済みのCSSの内容)が消えて初期化されてしまいますのでご注意下さい。記事やフリースペース、メッセージボードの内容などは消えません。
スマートフォン向け画面の個別記事ページやアメンバー限定記事のカスタマイズは不可能ではありませんが、特殊な方法になりますので当記事では扱いません。
CSS編集用デザイン以外のデザインをベースとしてカスタマイズすることも不可能ではありませんが、特殊な方法となりますし解決が難しい面倒な問題が発生しますので、アメブロのデザインをカスタマイズする場合はCSS編集用デザインをベースにすることを強くお勧めします。

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

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

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

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

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

「デザインの変更」画面で「カスタム可能」を選択

「デザインの変更」という画面が開いたら、スクロールバーを下へ下げて画面をスクロールしていきます。

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

「カスタム可能」デザインの中から「CSS編集用デザイン」を選択

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

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

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

このうち、上の画像の赤枠内の3つが新CSS編集用デザイン(新CSS)で、青枠内の1つがそれらよりも以前からある旧CSS編集用デザイン(旧CSS)です(違いについてはこちらを参照下さい)。

以前は【カスタム可能】ベーシックという旧CSS編集用デザインよりも更に古いカスタマイズ向けのベースデザインがありましたが、現時点で新しく選択することはできなくなっています。

新CSS編集用デザインの3つは、多くは共通ですが、トップページのレイアウトなどが異なります。

トップページの表示が、左から順に、

  • リスト型→記事タイトル+本文冒頭+サムネイル画像が一覧表示される
  • 標準型→記事の内容がそのまま表示される
  • タイル型→アイキャッチ画像+記事タイトルが2列で表示される

となっています。

新CSS編集用デザインという呼び名や、その中の3つのタイプ「リスト型」「標準型」「タイル型」という呼び名は、何れも公式で決まっているわけではありませんが、当サイト内では、識別のために便宜上このように呼ぶことにしています。

選択肢が4つもあるので、どれにすれば良いのか迷うかもしれませんね。

基本的にどれを選んでもカスタマイズは可能ですが、特に理由がないのであれば、既に古くなりつつある旧CSS編集用デザインではなく、新CSS編集用デザインの何れかを選ぶことをお勧めします

当サイトでご紹介しているカスタマイズ方法も新CSS編集用デザイン専用のものが多いですので、そういった意味でも新CSSをお勧めしたいと思います。

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

サイドバーのレイアウトを選択

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

どのCSS編集用デザインを選ぶかにもよりますが、レイアウトは最大で5種類から選べますので、目的や好みに応じて選択してください。

新CSS編集デザインの初期値が「2カラム・メニュー右」だからか、または流行もあるのか、最近はそのレイアウトが選ばれていることが多い印象です。

ちなみに、旧CSS編集デザインを使っているユーザーは「3カラム・右ワイドメニュー」が多めだと思います。

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

完了

最後に、以下のようなページが表示されれば完了です。

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

まとめ

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

よかったら参考にしてください。

関連記事