目次

アメブロの4つの「CSS編集用デザイン」の違いや特徴について理解する

  • これからアメブロのカスタマイズをしようと思っている。
  • CSS編集用デザインが4つもあって、どれを使ってカスタマイズすれば良いのかわからない。

4つある「CSS編集用デザイン」

アメブロには、カスタマイズ専用のベースデザインとして同じ名前で中身が異なる「CSS編集用デザイン」が4つ存在しています。

カスタマイズをするためにデザインをCSS編集用デザインに変えるときは、これらの4つのうちのどれかを選ぶことになりますが、それぞれどのようなものなのか?がわからないと選べませんよね。

そこで当記事では、これら4つのCSS編集用デザイン違いや、それぞれの特徴について簡単にご紹介したいと思います。

4種類の「CSS編集用デザイン」の特徴

CSS編集用デザインは、大きく分けて「新しいタイプのCSS編集用デザイン」と「古いタイプのCSS編集用デザイン」の2つのグループに分けることができます。

当サイトでは、

  • 新しいタイプを…「新CSS編集用デザイン」あるいは「新CSS
  • 古いタイプを…「旧CSS編集用デザイン」あるいは「旧CSS

と呼んでいます。

ちなみに、当サイトで紹介しているカスタマイズ方法は、新CSS編集用デザインのみ対応のものが多くなっています。

余談ですが、もし今後、3グループ目のCSS編集用デザインが出た場合は、現在の「新CSS編集用デザイン」を「2代目CSS編集用デザイン」、「旧CSS編集用デザイン」を「1代目CSS編集用デザイン」、そして3グループ目を「3代目CSS編集用デザイン」などと呼ぶことになりそうだと思っています。

旧CSS編集用デザイン

まず、旧CSS編集用デザインについて少しご紹介します。

旧CSS編集用デザインは、2011年頃に登場した最初のCSS編集用デザインで、CSS編集用デザイン第1号です。

CSSを編集してカスタマイズできるデザインはCSS編集用デザインの登場よりも前からありましたが、それらは「CSS編集用デザイン」とは呼ばれず、また現在は、それらを新たに選択することはできなくなっています。

全部で4つある「CSS編集用デザイン」という名前のデザインの中で、この旧CSS編集用デザインだけは、ブログタイトルが左寄せだったり、プロフィール画像が四角いままで丸くくり抜かれていなかったりと、他の3つとは見た目もかなり違いますので、サムネイル画像で見ても見分けやすいと思います。

トップページには、最新から1件、3件、5件または10件の記事全文を表示するようになっています。

カスタマイズに関しては、長年多くのアメブロで使われて来たデザインですので、検索などからカスタマイズのアイデアやテクニックを見つけ易いですが、今となってはそれらの情報も、古くなって使えないものが多いのが現実です。

また、新CSS編集用デザインの登場により「旧」となってから時間も経って、今後、廃止の方向へと向かって行く可能性も考えられますので注意が必要でしょう

なお、当サイトで紹介しているカスタマイズ方法の多くは、旧CSS編集用デザインには対応していませんのでご注意下さい。

新CSS編集用デザイン

次に、新CSS編集用デザインです。

あとに回しましたが、むしろこちらが本番です。

新CSS編集用デザインは、2016年の3月から使えるようになった比較的新しい「CSS編集用デザイン第2号」で、当サイトでは主にこの新CSS編集用デザインで使えるカスタマイズ方法を公開しています

新CSS編集用デザインは、比較的新しいデザインだからか、大きめの文字で、広めの余白を確保し、記事の読みやすさを重視した、最近好まれる傾向のデザインとなっています。

サムネイルで見ると、旧CSSとは違ってブログタイトルが中央寄せで、プロフィール画像が丸くくり抜かれていて、そしてプロフィール画像の下にある黒っぽくて大きなフォローボタンが目立ちます。

新CSS編集用デザインは、旧CSSと同じ「CSS編集用デザイン」という名前ですが、中身の(HTMLの)構造が全く異なりますので、旧CSSのために考案されたカスタマイズ方法の多くは使うことができません

しかし、今は既に新CSS編集用デザインがメインになっていると見て間違いないと思いますので、新しくアメブロを開設してカスタマイズを始める場合は、こちらを採用することをお勧めします。

なお、新CSS編集用デザインには、個別の記事ページなどは共通でトップページなどが異なるものが3つ存在します

1つめは、旧CSSと同様、トップページに最新の記事が1つまたは複数、記事全文がそのまま表示される「標準型」。

2つめに、小さめのサムネイル画像と記事タイトル・記事内容の一部を、トップページにリスト状にたくさん(最大20件)表示できる「リスト型(タイムライン型)」。

3つめが、リスト型よりは大きめのサムネイル画像と記事タイトルを、トップページにタイル状に並べて表示できる「タイル型」。

以上の3つです。

3種類の呼び名は当サイトで使っているもので、必ずしも一般的にそう呼ばれているわけではありません。

これらは、ほとんどが共通ですので、カスタマイズ方法もほぼ同じものが使えますが、トップページの(HTMLの)内容が一部違いますので、違っている部分をカスタマイズするには、それぞれ別々の専用のやり方が必要になります。

標準型

まず標準型です。

旧CSSと同様、トップページに最新の1件または3件、5件、10件の記事全文をそのまま表示できます。

ページ送りのクリックなしで、最大10記事まで全文を読んでもらえる可能性があり、記事の書き方を工夫すると、連続で複数記事を読んでもらいやすいかもしれません。

ただし、1ページあたりの表示記事数を増やすと、あまりにも縦に長くなりすぎてしまったり、表示に時間がかかってしまったりという状態になりやすいので、注意が必要だと思います。

リスト型(タイムライン型)

次にリスト型(タイムライン型)です。

トップページには、記事タイトル+記事本文の冒頭部分(文字のみ)+小さめのサムネイル画像を、リスト状に10件または20件表示できます。

一覧性が良いので、1ページにたくさんの記事を目次的に表示して、その中から読みたい記事を見つけて読んでもらうのに適していると思います。

ちなみに、記事本文は、HTMLタグが剥がされて文字のみの状態になったものが1行だけ表示されますが、実は各記事の全文が含まれていて2行目以降になる部分は隠れているだけですので、カスタマイズ次第でもっと多くの行数を表示することも可能です。

なお、アメブロのスマートフォン向け画面の表示も(本文は表示されませんが)このリスト型と似ていますので、スマホとPCの表示の統一感を考えてこちらを採用することも検討の価値があるのではないでしょうか。

タイル型

最後にタイル型です。

トップページには、やや大きめのサムネイル画像+記事タイトルを、タイル状に並べて10件または20件表示できます。

トップページに記事本文が一切表示されませんので、読みたい記事を画像とタイトルだけで見つけてもらえるような工夫が必要になってきますが、例えば、作品紹介や料理レシピの公開などのように、画像を重視したジャンルでの発信には向いているのではないでしょうか。

まとめ

以上、簡単ですが、4つの「CSS編集用デザイン」についてご紹介しました。

ご自身のアメブロで扱っているジャンル等により、向いているデザイン、向いていないデザインがあると思いますので、どの「CSS編集用デザイン」をカスタマイズのベースとして使うか?の参考になったらうれしいです。

最後にもう一度、当サイトで紹介しているカスタマイズ方法は新CSS編集用デザイン専用で、旧CSSには使えないものが多くなっていますのでご注意下さい。