こんにちは！Tomaです。
ブログのサイドバー、皆さんは活用していますか？実はサイドバーは、読者の視線が自然と集まる「一等地」なんです。ここを上手にカスタマイズすることで、特定の商品やコンテンツへのクリック率を劇的に上げることができます。
今回は、私が作成した「LINEスタンプ宣伝用パーツ」を例に、はてなブログのサイドバー、そしてスマホ版のヘッダをカスタマイズして収益や認知度をアップさせる方法を詳しく解説します！
第1章：サイドバーを「ただのリンク集」にしていませんか？
多くの方がサイドバーに「最新記事」や「プロフィール」を置いていますが、それだけではもったいないです。メリット・結論からお伝えすると、サイドバーには「今、一番見てほしいもの」を視覚的に訴求するパーツを配置すべきです。
例えば、私のようにLINEスタンプを販売している場合、単なるテキストリンクよりも、画像やボタン、さらにスマホユーザー向けのQRコードを組み合わせたパーツの方が圧倒的にクリックされやすくなります。視覚的なフックを作ることで、読者の滞在時間や回遊率の向上が期待できます。
第2章：【コピペOK】宣伝用HTMLコードの構成
以下のコードを、はてなブログの「サイドバー ＞ HTMLモジュール」または「スマートフォン ＞ ヘッダ ＞ タイトル下」に貼り付けてください。赤文字や青文字で注釈を入れている箇所をご自身のURLに書き換えるだけで完成です！
<!-- LINEスタンプ宣伝パーツ -->
<div class="line-sticker-promo" style="text-align: center; padding: 15px 10px; border: 1px solid #eee; border-radius: 8px; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
<!-- 【要変更：リンク先URL】 -->
<a href="★ここにショップ等のURLを入れる★" target="_blank" rel="noopener">
<!-- 【要変更：バナー画像URL】 -->
<img src="★ここに画像のURLを入れる★" alt="スタンプ画像" style="width: 100%; max-width: 180px; height: auto; transition: 0.3s; margin-bottom: 10px; border-radius: 4px;">
</a>
<p style="font-size: 0.85em; font-weight: bold; color: #333; margin: 5px 0 10px 0;">
<span style="color: #0000ff;">神奈川クエスト</span><br>スタンプ発売中！
</p>
<!-- QRコードエリア -->
<div style="margin: 10px auto; padding: 10px; border: 1px dashed #ccc; width: fit-content; background: #fafafa;">
<p style="font-size: 0.7em; margin: 0 0 5px 0; color: #666; font-weight: bold;">スマホでスキャン</p>
<!-- 【要変更：QRコード画像URL】 -->
<img src="★ここにQRコードのURLを入れる★" alt="購入用QRコード" style="width: 90px; height: 90px; display: block; margin: 0 auto;">
</div>
<!-- ボタンエリア -->
<div style="margin-top: 15px;">
<!-- 【要変更：リンク先URL（上と同じもの）】 -->
<a href="★ここにショップ等のURLを入れる★" target="_blank" rel="noopener" style="background-color: #06C755; color: white !important; text-decoration: none; padding: 8px 10px; border-radius: 20px; font-size: 0.8em; display: inline-block; width: 100%; max-width: 180px; box-sizing: border-box; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
スタンプを見る
</a>
</div>
</div>
第3章：スマホ表示にも！ヘッダへの機能追加
PC表示のサイドバーだけでなく、スマホユーザー向けに「スマホ版ヘッダへの機能追加」も有効です。はてなブログの「スマートフォン ＞ ヘッダ ＞ タイトル下」などに、上記のコードをそのまま貼り付けるだけで、スクロールせずにスタンプ情報を届けることができます。
スマホからのアクセスが8割を超える現代では、ヘッダへの配置は非常に強力な宣伝手段となります。
第4章：失敗しないための設置手順と注意点
パーツを作成・設置する際は、以下の注意点・NG例を必ず確認してください。
1. 画像サイズに注意
サイドバーやヘッダの幅を超えないよう、コード内で max-width による制限をかけてください。表示が崩れる最大の原因です。
2. リンクの開き方
ブログから離脱されないよう、外部サイトへのリンクには target="_blank" を付与するのが鉄則です。
3. 実機での表示テスト
保存後は必ず自分のスマホで、ボタンが押しやすい位置にあるか、QRコードが読み取れるかを確認しましょう。
まとめ：
サイドバーやスマホのヘッダは、あなたのブログの「看板」です。ほんの少しの工夫で、読者の反応は劇的に変わります。ぜひこのテンプレートを使って、自分だけのオリジナルパーツを設置してみてくださいね！
