Cocoonカスタマイズ｜サイドバーに画像付き「案内看板」を設置してUXを高める方法

ブログのコンセプトを伝える「固定ページ」は、サイトの信頼性を高める重要な要素です。しかし、リンクがフッターにあるだけでは、多くの読者に見落とされてしまいます。

そこで今回は、AI軍師Geminiの助言を得て、サイドバーの最上部に視認性の高い「案内看板」を設置しました。実装に使用した全コードを公開します。

1. 設置の狙い：フッターからサイドバーへ
2. 実装に使用した全HTMLコード
3. UX向上のための工夫

1. 設置の狙い：フッターからサイドバーへ

スマホユーザーが多い現代、サイトの最下部（フッター）まで辿り着く読者は限られています。以下のメリットを狙い、サイドバーへの設置を決めました。

視認性の向上：記事を読み始める前に運営者の想いを提示できる。
信頼性（E-E-A-T）の強化：誰がどんな目的で運営しているか、即座に伝えられる。

2. 実装に使用した全HTMLコード

以下のコードをコピーして、ウィジェットの「カスタムHTML」に貼り付けてください。黄色い太字の部分をご自身のURLに書き換えるだけで完成します。

<!– ここからコピー –>
<div style=”background: #fff; border: 2px solid #d98d5f; padding: 20px; border-radius: 12px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05);”>
  <p style=”margin-top: 0; font-weight: bold; color: #d98d5f; font-size: 1.1em;”>はじめまして！</p>

  <!– 【書き換え1】表示したい画像のURL –>
  <img src=”https://あなたの画像URL.jpg” style=”width: 100%; border-radius: 8px; margin: 10px 0;”>

  <p style=”font-size: 0.9em; line-height: 1.6; color: #555;”>AI軍師 Geminiと共に描く<br>新しいノート「notebook」です。</p>

  <!– 【書き換え2】リンク先の固定ページURL –>
  <a href=”https://あなたの固定ページURL” style=”display: block; margin-top: 15px; padding: 10px; background: #d98d5f; color: #fff; text-decoration: none; border-radius: 30px; font-weight: bold; font-size: 0.9em;”>このブログについて</a>
</div>
<!– ここまで –>