koblog

高校生のWEBデザインブログ

【はてなブログ】トップページなどのアイキャッチ画像を変える方法

サムネイル

はてなブログでは、トップページやアーカイブページなどにアイキャッチ画像を表示させることができます。しかし自分で画像を選ぶには、記事を書くたびにサイドバーから画像を選んで指定する必要があります。

 

キャプチャー1

 

そこで今回はトップページのアイキャッチ画像を一括で指定する方法を紹介します。一応アーカイブページも含めた全てのアイキャッチ画像を一括指定する方法も紹介しますが、ブログ全体がつまらなくなるのであまりオススメしません。

 

アイキャッチ画像を指定する

トップページだけアイキャッチ画像の指定は下のコードでできます。 

CSS
.page-index .entry-thumb {
    background-image: url('画像のURL') !important;
}

 

アーカイブページも含めた全てのページで指定する場合は下のコードを使います。

CSS
.entry-thumb {
    background-image: url('画像のURL') !important;
}

 

どちらのコードもアイキャッチ画像を一括で指定しているため、同じ画像になってしまいますが、ブログのキャラクターなどがいる場合はかなり良いのではないでしょうか。

 

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

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる