アメブロのリスト型トップページのカスタマイズ方法(新CSS)

アメブロの新CSS編集用デザインの「リスト型」のトップページのカスタマイズで、使えそうなものを3つ紹介します。

何れもCSSにコードをコピペして簡単にできるカスタマイズ方法です。

もし、CSSの編集のしかたがわからない場合は、先に手順を確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

1 デフォルト画像を表示する
2 記事の本文を複数行表示する
3 日付でグループ化する列を消す
4 3つとも全て実施すると
5 まとめ

デフォルト画像を表示する

まず、記事にアイキャッチ画像が設定されていないときに、例えば「NO IMAGE」のような、デフォルト画像をサムネイル画像として表示するカスタマイズ方法です。

画像を用意する

まず、デフォルト画像として表示したい画像を準備します。

自作することもできますし、こちらのサイトなどで探して無料ダウンロードすることもできます。

NOIMAGEイラスト
「NOIMAGE」のイラスト素材
www.ac-illust.com

アメブロのリスト型のトップページに表示されるアイキャッチ画像は正方形ですので、デフォルト画像も正方形のものか、若しくは中央部を正方形に切り抜いても違和感のないものを選択すると良いと思います。

画像の準備ができたらアメブロにアップロードして画像のURLを取得しておいて下さい。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法

アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

デフォルト画像を表示する

画像をアップロードできたら、CSSに以下のようなコードを追加して下さい。

/************************************************
  新CSS：リスト型ホームにデフォルト画像を設定する
************************************************/
[data-uranus-component="entryItemImage"] {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url("デフォルト画像のURL");
}

「デフォルト画像のURL」には、アメブロにアップロードしたデフォルト画像として表示したい画像のURLを記述します。

画像の表示サイズは100ピクセル角の正方形ですが、拡大縮小されたり正方形に切り取られることを気にしないのであれば、どんなサイズの画像を設定しても100ピクセル角の正方形のサムネイル画像として表示されるようになっています。

なお、このカスタマイズで、トップページだけではなく、記事一覧ページでもデフォルト画像が表示されるようになります。

記事一覧ページには表示したくない場合

もし、記事一覧ページの方にはデフォルト画像を表示したくないようでしたら、上記コードの代わりに以下を使います。

/************************************************
  新CSS：リスト型ホームにデフォルト画像を設定する(記事一覧ページは対象外)
************************************************/
.skin-timelineItem [data-uranus-component="entryItemImage"] {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url("デフォルト画像のURL");
}

記事一覧ページだけに表示したい場合

また、本題からは逸れますが、トップページにはデフォルト画像を表示せず記事一覧のみ表示したい場合は、以下のコードを使います。

/************************************************
  新CSS：記事一覧ページでデフォルト画像を表示する
************************************************/
.skin-archiveList [data-uranus-component="entryItemImage"] {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url("デフォルト画像のURL");
}

記事の本文を複数行表示する

次は、初期状態では一行だけ表示されるようになっている記事本文の出だし部分を、複数行表示するカスタマイズ方法です。

CSSの末尾に以下のコードを追加してください。

/************************************************
  新CSS：リスト型トップページの本文表示行数
************************************************/
.skin-timelineItem ul li h2+p {
  white-space: normal;
  overflow: hidden;
  line-height: 1.5;
  height: 4.5em; /* line-height × 表示行数 em */
}

このコードは、上の画像のように3行表示する設定になっています。

表示行数を変えたい場合は、コメント（注釈）にも書いてあるように、「height」の値として「line-height」×「表示行数」に単位「em」を付けた値を設定します。

もし、一行が専有する高さを「line-height」で変更した場合は、それに合わせて「height」の値も変更して下さい。

なお、この方法で複数行表示にすると、本文の内容表示の最後が「・・・」になりません。

日付でグループ化する列を消す

アメブロのリスト型トップページでは、記事一覧の左側に、同じ日付の記事をグループ化する列がありますが、この列が、むしろ邪魔だと感じる場合に消すカスタマイズ方法です。

CSSの末尾に以下のコードを追加します。

/************************************************
  新CSS：リスト型トップページの日付でグループ化する列を消す
************************************************/
.skin-timelineItem {
  padding: 0;
}
.skin-timelineDate {
  display: none;
}
.skin-timeline {
  margin: 0 30px;
  background: none transparent;
}

通常はこれだけで大丈夫です。

なお、margin: 0 30px;という指定で、記事一覧の表示幅をメッセージボードの本文の横幅と同じに合わせるようにしてあります。

もし、個別記事の本文と同じ表示幅が良いという場合はここをmargin: 0 50px;と変更します。

3つとも全て実施すると

最後に、上記3つのカスタマイズを全て実施した場合のイメージをお見せします。

以下の画像のようになります。

個人的にはこの感じが見やすいように思いますがいかがでしょう。

まとめ

以上、アメブロの新CSS編集用デザインの「リスト型」のトップページのカスタマイズ方法として、

デフォルト画像を表示する
記事の本文を複数行表示する
日付でグループ化する列を消す

の3つと、これら全てを実施した場合の結果をご紹介しました。

デフォルト画像を準備すれば、あとはコピペで簡単にできますので、よかったら参考にして下さい。