現在、アメブロで提供されているデザイン（スキン）の中で、ユーザーがカスタマイズすることを想定したベースデザインは「CSS編集用デザイン」のみですが、この「CSS編集用デザイン」は、同名のものが複数個あります。
大きく分けると新と旧の2種類、細かく分けると全部で4種類あります。
アメブロのデザインを選ぶ画面でも、同じ名前のものが4つ見えるのでちょっと紛らわしいかもしれませんね。
当記事では、これら4つのCSS編集用デザインそれぞれの違いや特徴、見分け方や選ぶポイントなどについてご紹介します。
目次
大きく分けると、新と旧の2種類
4つのCSS編集用デザインは、大きく2つのグループに分けることができます。
4つのうち、上の画像の青枠内の3つは新しいタイプのCSS編集用デザインで、当サイトでは「新CSS編集用デザイン」あるいはもっと短く「新CSS」と呼んでいます。
新しいと言っても2016年に追加されたものなので、もうずいぶん前から使えるわけですが、残りの一つと比べる新しいということです。
新CSS編集用デザインのサムネイル画像で見てわかりやすい特徴としては、
- ブログタイトルが中央揃え
- プロフィール画像がサイドバー内で中央揃え
- フォローボタンが黒っぽくて大きめで目立つ
などが挙げられると思います。
また、上の画像の赤枠内の残り1つは古いタイプのCSS編集用デザインで、当サイトでは「旧CSS編集用デザイン」あるいはもっと短く「旧CSS」と呼んでいます。
こちらは、新CSSの3つが追加されるよりも5年くらい前の、2011年から使えるようになりました。
旧CSS編集用デザインのサムネイル画像で見てわかる特徴としては、
- ブログタイトルが左寄せ
- プロフィール画像がサイドバー内で左寄せ
- フォローボタンは特に目立っていない
などが挙げられるでしょう。
新CSS編集用デザインの3つは、トップページ(およびそれに続く2ページめ以降)の記事の表示のしかたが異なる以外は共通なので、カスタマイズをする上では、概ね同じと見て問題ありません。
ですが、旧CSS編集用デザインは新CSS編集用デザインとは(HTMLという中身の)構造が全く異なるため、カスタマイズをする上でも全く別物になります。
つまり、新旧のCSS編集用デザインは、名前は同じ「CSS編集用デザイン」ですが、それぞれカスタマイズするためのCSSの記述が別々の異なったものになり、同じものが使えることはあまりありません。
なので、アメブロのカスタマイズを始めるときは、カスタマイズの対象となるアメブロが新CSS編集用デザインなのか、旧CSS編集用デザインなのかをしっかり確認してから情報収集しなければ、そのアメブロでは使えない情報を集めてしまう可能性もありますので、注意が必要です。
「CSS編集用デザイン」よりも前に「【カスタム可能】ベーシック」など別の名前のカスタマイズ可能なスキンもありました。今もそれらを使ったブログは多数存在していますが、現在は、それらのスキンを新たに選択することは、もうできなくなっています。新CSS編集用デザインと旧CSS編集用デザインの見分け方
このように、アメブロの「CSS編集用デザイン」には中身が大きく異なる新旧2つのグループがありますので、カスタマイズをするには、その対象となるアメブロで使っているのが新CSS編集用デザインなのか？それとも旧CSS編集用デザインなのか？を知っておく必要があります。
以下に、簡単な見分け方をいくつかご紹介したいと思います。
なお、ここでご紹介する見分け方は、アメブロのデザインを「CSS編集用デザイン」に設定してから何もカスタマイズしていない初期状態の場合での比較ですので、既に何かしらのカスタマイズが施されている場合は使えない可能性もあります。
ヘッダーのタイトルと説明文の位置
まず、一瞬パッと見ただけで異なる違いとして、ヘッダーのタイトルと説明文が、新CSS編集用デザインでは中央配置になっていますが、旧CSS編集用デザインでは左寄せになっています。
これは小さなサムネイルで見ても見分けがられるほどなので、非常にわかりやすい違いですが、ヘッダー画像が設置されるとタイトルや説明文は非表示にされることも多いため、その場合は別の箇所で見分けます。
サイドバーの各パーツ（ウィジェット）
サイドバーの各ウィジェットのデザインもかなり違います。
例として「プロフィール」で説明します。
全く違うことはひと目でわかると思いますが、具体的には以下のような点で見分けることができます。
- ウィジェットの枠
- 新＝枠なし
- 旧＝グレーの枠がついている
- ウィジェットのタイトル
- 新＝背景色なし・太文字
- 旧＝グレーの背景色
- プロフィール画像
- 新＝丸
- 旧＝四角
- ボタン
- 新＝大きく黒いフォローボタンのみ
- 旧＝カラーのアイコン付きで複数のボタン
「ブログトップ」「記事一覧」「画像一覧」ボタン
ヘッダー下、あるいは記事の上で、横に3つ並んでいる「ブログトップ」「記事一覧」「画像一覧」というボタンのデザインも全く異なります。
【新CSS編集用デザイン】
【旧CSS編集用デザイン】
その他の違い
ほかにも、細かいところでは、新CSS編集用デザインは旧CSS編集用デザインと比べて、
- コンテンツ幅や余白が大きめに設定されている
- デフォルトのフォントサイズが大きめになっている
などの違いもあります。
また、見た目からは分からない部分ですが、新CSSの方が旧CSSよりもHTML構造の階層が浅くスッキリしています。
ただし、その反面、シンプル過ぎてやりたいことを実現するのに苦労する場面も多いようにも思いますので、この辺りは良し悪しでしょう。
新CSS・旧CSSのどちらを選ぶべきか？
以上のように異なる部分の多い新旧CSS編集用デザインですが、これからアメブロをカスタマイズするならどちらを選ぶべきでしょうか？
ハッキリ言うと、どちらでも良いと思いますが、扱いやすさという意味で個人的には次のように感じています。
- 新CSS編集用デザインは、余白が多いこともあって、どちらかと言えば明るくライトな印象に仕上げやすい
- 旧CSS編集用デザインは、硬い印象になりやすいものの、真面目で落ち着いた雰囲気を出しやすい
そのあたりに特にこだわりがないようでしたら、例えば、取り入れたいカスタマイズ方法が見つかった方という選び方でも構わないのではないでしょうか。
ただし、仮に新旧のどちらかが廃止されることがあるとすれば、おそらくは旧CSS編集用デザインであろうとは思いますので、そういう意味では新CSS編集用デザインを使っておいたほうが、少しだけ安心感があるかもしれません。
新CSS編集用デザインに該当する3つの違い
さて、ここまで新旧のCSS編集用デザインについて触れてきましたが、最後に「新CSS編集用デザイン」に該当する3つについても少し説明したいと思います。
これら3つの新CSS編集用デザインは、ほとんどの部分が共通ですが、トップページの記事の表示方法だけが異なっています。
当サイトでは、これら3つのトップページの表示方法を「標準型」「リスト型」「タイル型」と呼んで識別しています。
「標準型」トップページ
旧CSS編集用デザインを使った時と同じように、トップページに最新の記事から順に最小1～最大10記事の範囲で、記事の全内容をそのまま表示します。
トップページを訪問した人に、クリックなしで記事本文の内容を見せることができるメリットがあります。
「リスト型」トップページ
記事タイトル、記事本文の冒頭部分、サムネイル画像のセットを、10または20件、リスト状に縦に並べて表示します。
20件表示できるので、トップページを訪問した人に、クリックしなくても、多くの記事の存在を知らせることが可能です。
また、記事一覧ページやスマホ向けトップページの表示とも近いので、そのあたりの一貫性を持たせたい場合にも良いかもしれません。
「タイル型」トップページ
少し大きめのサムネイル画像と記事タイトルを、10または20件、横2列のタイル状に並べて表示します。
リスト型と比べて表示される画像のサイズが大きく、記事の内容は表示されないので、トップページを訪問した人に画像でアピールするような内容のブログに向いていると思います。
まとめ
以上、アメブロの新・旧含めた4つのCSS編集用デザインの違いや特徴、見分け方、選ぶポイントなどについてご紹介しました。
まとめると、
- 4つのうち3つは新CSS編集用デザインで、1つのみ旧CSS編集用デザイン
- 新CSSと旧CSSは構造から全く異なる完全な別物
- 新CSSと旧CSSは多くの見分けるポイントがある
- 新CSSの3つはトップページの表示のみ異なる
となります。
参考になりましたら幸いです。
