この記事は最終更新日から1年以上が経過しています
- 投稿日：2024/03/02
要約
【ブロガー必見】コピペするだけで、好きな画像（バナー）をスマホの追尾広告（付いてくる広告）風に表示させる方法を紹介します！いろいろ応用が利くのでこれからブログを始める方も試してみて下さい！
💕こんな人にオススメの内容！💕
⭕自分の商品を持っていて、自分のブログも持っている！
⭕好きなバナー画像をブログの【付いてくる広告】にしたい！
✨難しい知識不要！✨
✅HTML・CSS知識不要
✅テーマcocoon
✅プラグインなし
✅ウィジェットのみ使用
この状態で、
「好きな画像をスマホにのみ追尾表示」させる方法を紹介します。
A8などの広告を「付いてくる広告」にしたい時は
🔰コピペするだけ！🔰あなたのブログに【付いてくる広告】を設置しよう！📱
をご参照下さい！
↓こんな感じのスマホ広告風にバナー画像を表示できます。
カスタムHTMLウィジェットを使う
①WordPressのダッシュボードにログインします。
②外観＞ウィジェットに進みます。
③カスタムHTMLウィジェットを見つけて、フッター（モバイル用）に追加します。
④ウィジェットに以下のコードを貼り付けます。
<style> @media (max-width: 768px) { /* スマホ用のスタイル適用 */ .custom-ad-container { position: fixed; /* 広告を画面に固定 */ bottom: 0; /* 下部に表示 */ left: 0; width: 100%; /* 幅を画面全体に */ z-index: 1000; /* 他の要素よりも前面に */ text-align: center; /* 広告画像を中央寄せ */ background-color: transparent; /* 背景色を透明に */ } .custom-ad-container img { max-width: 100%; /* 画像が画面幅を超えないように調整 */ height: auto; /* 画像の高さを自動調整 */ } } </style> <div class="custom-ad-container"> <a href="リンク先URL" rel="nofollow noopener" target="_blank"> <img src="画像URL" alt="広告"> </a> </div>
続きは、リベシティにログインしてからお読みください
