目次

【アメブロカスタマイズ】リスト型トップページで記事のデフォルト画像を表示する方法

アメブロの新CSS編集用デザインの「リスト型(タイムライン型)」のトップページでは、各記事にサムネイル画像が表示されるようになっています。

しかし、画像のない記事には全く何も表示されず、画像のある記事とレイアウトが違って見えるため、混在すると何となく雑然とした印象を受けてしまいます。

そこで、当記事では、「リスト型(タイムライン型)」のトップページで、画像のない記事にもデフォルト画像(NoImage画像)を表示するカスタマイズ方法をご紹介したいと思います。

カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先にチェックしておいて下さい。

リスト型(タイムライン型)トップページでデフォルト画像を表示する

では、早速カスタマイズをやっていきたいと思います。

リスト型(タイムライン型)トップページで、画像のない記事にもデフォルトの画像(NoImage画像)を表示するには、CSSに以下のようなコードを追加します。

.skin-timelineItem [data-uranus-component="entryItemImage"] {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url(【NoImage画像のURL】);
}

【NoImage画像のURL】の箇所は、デフォルト画像として表示したい画像のURLに置き換えてください。

もし画像のURLについてわからない場合は、こちらの記事を参考にして下さい。

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

記事一覧ページなども同様にしたい場合

余談ですが、もしも、リスト型(タイムライン型)トップページと同時に記事一覧などにも(もしくは標準型やタイル型のトップページの時に記事一覧等だけに)デフォルト画像を設定したい場合は、上記コードではなく以下のコードを利用したほうが簡単で確実です。

[data-uranus-component="entryItemImage"] {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url(【NoImage画像のURL】);
}

また、(そんなことがあるかどうかはわかりませんが)記事一覧にはリスト型(タイムライン型)トップページとは別の画像をデフォルト画像にしたい場合は、最初にご紹介したコードと、下記コードを併用すると実現可能です。

.skin-archiveList [data-uranus-component="entryItemImage"] {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url(【記事一覧用NoImage画像のURL】);
}

まとめ

以上、「リスト型(タイムライン型)」のトップページで(ついでに記事一覧画面も)、画像がない記事にもデフォルト画像(NoImage画像)を表示するカスタマイズ方法をご紹介しました。

レイアウトがきれいに揃って、見た目がスッキリすると思いますので、よかったら参考にして下さい。