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

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

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

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

アメブロをカスタマイズ可能なデザイン「CSS編集用デザイン」にする方法ときは、これらの4種類のどれかを選ぶことになります。

しかし、それぞれどのようなものなのかを理解しておかないと選べませんよね。

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

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

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

という2つのグループです。

当サイトでは、「新タイプのCSS編集用デザイン」を「新CSS編集用デザイン」あるいは「新CSS」、「旧タイプのCSS編集用デザイン」を「旧CSS編集用デザイン」あるいは「旧CSS」などとも呼んでいます。

世代を明確にしたい場合は「新タイプのCSS編集用デザイン」を「第2世代のCSS編集用デザイン」、「旧タイプのCSS編集用デザイン」を「第1世代のCSS編集用デザイン」と呼ぶこともあります。

旧CSS(旧タイプのCSS編集用デザイン)

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

旧タイプのCSS編集用デザイン(見本)

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

そのため、当サイトでは「第1世代のCSS編集用デザイン」と呼ぶこともあります。

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

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

旧タイプのCSS編集用デザイン(サムネイル)

「旧CSS編集用デザイン」は、トップページに、1件、3件、5件または10件の最新記事全文を表示するようになっています。

カスタマイズに関しては、当記事の公開時点で既に5年以上にわたって多くのアメブロで使われているデザインですので、検索などでカスタマイズのアイデアやテクニックを見つけることも比較的簡単でしょう。

豊富な情報量から、やりたいことを実現するための具体的な方法を探し易いという意味では、旧CSS編集用デザインを選択しておけば、ある意味では安心感は高いと言えるかもしれません。

ただし、今となっては、デザインそのものも公開されている情報も、どちらも古臭くなってしまっていますし、また、新CSSの登場により「旧」となってから時間も経って、今後は廃止の方向へと向かって行く可能性も考えられますので注意が必要でしょう。

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

新CSS(新タイプのCSS編集用デザイン)

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

新タイプのCSS編集用デザイン(見本)

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

新CSSは、CSS編集用デザイン第2号として、トップページのデザイン(レイアウト)が異なる3種類が同じ名前で公開されました。

当サイトでは「第2世代のCSS編集用デザイン」と呼ぶこともあります。

当記事の公開時点で利用可能になってからまだ1年と少しで、新しいデザインだからか、大きめの文字で広めの余白を確保し、記事の読みやすさを重視した、最近好まれる傾向のデザインとなっています。

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

新タイプのCSS編集用デザイン(サムネイル)

旧タイプと同じ「CSS編集用デザイン」という名前ですが、中身の(HTMLの)構造が全く異なりますので、2011年以来、旧CSSのために数年間にわたって考案されてきた旧CSS編集用デザインで使えるカスタマイズ手法は、ほとんど使うことができません。

そのため、当記事の公開時点ではまだ普及しているとはいい難く、検索などで得られるカスタマイズ関連の情報も少ない状態です。

しかし、今後はこの新CSSがメインになっていくことは間違いないと思いますので、新しくアメブロを開設してカスタマイズを始める場合は、新CSS編集用デザインの採用を検討してみる価値はあるでしょう。

なお、新CSS編集用デザインには、個別の記事ページなどは共通でトップページ(などのいわゆるインデックスページ)のみが異なる3種類が存在します。

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

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

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

この3種類です。

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

これらは、いずれもトップページの(HTMLの)構造が違いますので、カスタマイズするには、それぞれ別々の専用のやり方が必要になります。

標準型

新タイプのCSS編集用デザイン-標準型(見本)

新タイプのCSS編集用デザイン-標準型(サムネイル)

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

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

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

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

新タイプのCSS編集用デザイン-リスト型/タイムライン型(見本)

新タイプのCSS編集用デザイン-リスト型/タイムライン型(サムネイル)

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

記事本文は、HTMLタグが剥がされた状態の文字のみ全文を表示可能ですが、初期状態では1行で表示できる長さの冒頭部分だけが表示され、それ以降は隠された状態になっています。

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

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

スマホ版アメブロはリスト型/タイムライン型に似た形

タイル型

新タイプのCSS編集用デザイン-タイル型(見本)

新タイプのCSS編集用デザイン-タイル型(サムネイル画像)

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

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

まとめ

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

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

関連記事

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。