サイドバーを整えると、ブログの印象はぐっと変わります。
今回は、おすすめ記事を画像付きで表示する方法を初心者向けにやさしく解説します。
文字リンクだけじゃダメなの？
もちろん文字リンクでもOKです。
でも、画像があるだけで「目に留まりやすさ」と「クリックされやすさ」が大きく変わります。
※ 作業前に「デザインCSS」の内容をメモ帳などにコピーして、バックアップを取っておきましょう。
- 完成イメージ
- なぜ画像付きがおすすめなの？
- カード表示ではなく、大きな画像を使う理由
- コード（コピペOK）
- 変更するのはこの3か所
- 画像URLの正しい取得方法（重要）
- どの記事を載せるといい？
- まとめ
- サイドバーをもっと整えたい方へ
完成イメージ
サイドバーに画像付きの記事を並べると、このような表示になります。
画像があると、どんな記事か一目で伝わります。
なぜ画像付きがおすすめなの？
文字だけのリンクは、どうしても目立ちにくくなります。
一方で、画像付きにすると次のようなメリットがあります。
- 目に止まりやすい
- 記事の雰囲気が伝わる
- クリックされやすくなる
特に「まず読んでほしい記事」を見せたいときに効果的です。
カード表示ではなく、大きな画像を使う理由
はてなブログには、カード型で記事を表示する方法もあります。
それでも、あえて大きな画像で表示するのには理由があります。
- 読んでほしい記事を強く目立たせられる
- ブログの世界観が伝わる
- 自然なおすすめに見える
サイドバーは、流し見されやすい場所です。
だからこそ、大きな画像でしっかり見せることに意味があります。
コード（コピペOK）
下のコードをサイドバーの「＜/＞HTML」に貼り付けてください。
※デザイン → カスタマイズ → サイドバー → 「モジュールを追加」→「＜/＞HTML」
<!-- ▼おすすめ記事① -->
<p style="margin-bottom: 15px;">
<a href="ここに記事URLを入れる" style="text-decoration: none; color: #333; display: block;">
<img src="ここに画像URLを入れる"
alt="記事タイトル"
loading="lazy"
style="width: 100%; height: auto; display: block; margin-bottom: 6px; border-radius: 6px;" />
<strong style="font-size: 14px; line-height: 1.5;">
記事タイトルをここに書く
</strong>
</a>
</p>
複数表示したい場合は、このブロックをコピーして増やします。
変更するのはこの3か所
① 記事URL
href="ここに記事URLを入れる" の部分に、紹介したい記事のURLを貼り付けます。
② 画像URL
src="ここに画像URLを入れる" の部分に、アイキャッチ画像のURLを貼り付けます。
③ 記事タイトル
表示したい記事タイトルに書き換えます。
画像URLの正しい取得方法（重要）
画像を右クリックしてURLをコピーすると、画質が落ちることがあります。
次の方法で取得するのがおすすめです。
- 記事作成画面を開く
- 画像を本文に挿入する
- 「HTML編集」に切り替える
- <img src="..."> のURLをコピーする
この方法なら、元の画質のまま表示できます。
ぼやける原因はそれだったんだ！
どの記事を載せるといい？
おすすめ記事には、次のような記事を選ぶのがおすすめです。
- まず読んでほしい記事
- シリーズの入口になる記事
- 収益につながる重要記事
なんとなく並べるのではなく、「読んでほしい順番」を考えて選びましょう。
まとめ
おすすめ記事を画像付きで表示すると、
- 目に留まりやすくなる
- クリックされやすくなる
- ブログが整って見える
ほんの少しの工夫ですが、回遊率は大きく変わります。
サイドバーは、ブログの大事な案内板です。少しずつ整えていきましょう。
サイドバーをもっと整えたい方へ
プロフィールの整え方や、カテゴリーの装飾方法などもまとめています。
