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

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

アメブロのカスタマイズをするためにデザインを「CSS編集用デザイン」に変更するときは、これらの4種類のどれかを選ぶことになりますが、それぞれどのようなものなのかを理解しておかないと選べませんよね。

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

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

「CSS編集用デザイン」には、まず大きく分けて2種類があります、

の2種類です。

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

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

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

まず、旧タイプのCSS編集用デザインですが、これは、2011年頃から使われるようになった、最初の「CSS編集用デザイン」、つまり第一号です。

そのため、当サイトでは「第一世代のCSS編集用デザイン」とも呼んでいます。

4つある「CSS編集用デザイン」という名前のデザインの中で、この旧タイプだけがプロフィール画像が丸くく抜かれていませんので見分けやすいと思います。

(CSSを編集してカスタマイズをすることが可能なデザインはCSS編集用デザイン投稿以前にもありましたが、それらはCSS編集用デザインとは呼ばれず、また、今は既にそれらのデザインを新たに選択することはできなくなっています)

旧タイプのCSS編集用デザインでは、トップページに、1件、3件、5件または10件の最新の記事全文を表示できます。

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

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

ただ、今となっては、どうしてもデザインに古臭さを感じてしまう人も多く、また、新タイプの登場により「旧」となってから時間も経ってきて、今後は廃止の方向へと向かって行く可能性も考えられますので注意が必要だと思います。

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

アメブロの旧タイプCSS編集用デザインで使えるカスタマイズ方法については、別途準備中です。

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

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

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

次に、新タイプのCSS編集用デザインですが、こちらは、2016年の3月から使えるようになった新しい「CSS編集用デザイン」で、当記事の公開時点で、利用可能になってからまだ1年と少しです。

新しいデザインですので、大きめの文字に広めの余白という、記事の読みやすさを重視した、最近好まれる傾向のデザインとなっています。

当サイトでは、主にこの新タイプのCSS編集用デザインで使えるカスタマイズ方法をご紹介しています。

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

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

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

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

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

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

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

この3種類です。

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

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

標準型

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

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

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

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

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

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

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

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

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

(記事本文は、文字のみ全文を表示可能ですが、初期状態では1行で表示できる長さの冒頭部分だけが表示されています)

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

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

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

タイル型

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

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

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

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

まとめ

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

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

よろしければフォローお願いします

コメントを残す

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

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