はてなブログのトップページにだけ別のアイキャッチ画像を表示

hatenaロゴ

はてなブログでは、カテゴリーや月別アーカイブなどにアイキャッチ画像(記事のサムネイル)が表示されます。

画像がある記事では記事の最初の画像が、画像がない記事ではデフォルトのアイキャッチ画像、または記事を投稿するときに編集サイドバーで個別に指定した任意のアイキャッチ画像が表示されます。

トップページの表示形式(PC版) を一覧形式(記事の概要を表示)に設定すると、例えばこのブログでは次のように表示されます↓

トップページ(サムネイル)1

それをブログのトップページにだけ任意のアイキャッチ画像を強制的に表示するようにしてみます。例えばこのブログでは次のように表示されます↓

トップページ(サムネイル)2

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
.page-index .entry-thumb {
    background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20190409/20190409115534.png') !important;
}

画像はひとつしか設定できないので、トップページには同じ画像が並びます。

使わないとは思いますが、カテゴリーや月別アーカイブなどのアイキャッチ画像とは別に、トップページにだけ特別にアイキャッチ画像を表示したい場合に使えると思います。