フローティング広告のコピペ実践コード解説

スクロールしてもついてくるバナー、フローティング広告を紹介します。

バナーの動作を確認したら✖️を押して非表示にしてください。

✖️

こちらはフローティング広告の内容です。

Javascript
CSS
HTML
使用方法
使用例
注意事項

Javascript

document.querySelector('.close-ad').addEventListener('click', function() {
    document.querySelector('.floating-ad').style.display = 'none';
});

document.querySelector('.close-ad')
document.querySelector() は、HTMLドキュメントから特定のセレクターに一致する最初の要素を取得するための関数。
この場合、.close-ad というクラスを持つ要素（おそらくは「広告を閉じる」ボタンやアイコン）を取得する。
.addEventListener('click', function() {...})
addEventListener() は、指定した要素にイベントリスナーを追加するためのメソッド。
この場合、'click' イベント、つまりユーザーが要素をクリックした際の動作を指定している。
function() {...} クリックイベントが発生したときに実行される関数を定義している。
document.querySelector('.floating-ad').style.display = 'none';
この関数の中で、.floating-ad というクラスを持つ要素（フローティング広告）のdisplayプロパティを'none'に設定する。
これにより、該当の要素（フローティング広告）が画面上から非表示になる。

CSS

.floating-ad {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 200px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    z-index: 1;
}

.close-ad {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

.floating-ad
position: fixed; は、広告の位置を画面に固定する。スクロールしても広告の位置は動かない。
z-index: 1; 他の要素との重なり順を制御される。この場合、デフォルトの値よりも少し上に配置される。
close-ad
position: absolute; は、要素の位置を親要素（この場合、.floating-ad）に対して絶対的に配置する。
cursor: pointer; マウスカーソルがこの要素の上に来たときに、ポインター（通常のマウスカーソルから指を示す形状に）に変わることを示している。

HTML

<div class="floating-ad">
    <span class="close-ad">✖️</span>
    <img src="広告の画像URL" alt="広告">
    <p>こちらはフローティング広告の内容です。</p>
</div>

使用方法

目的の定義
ユーザーにアクションを起こさせたいのか、情報を伝えたいのかを明確にする。
適切なデザインの選択
広告がサイトのデザインと調和し、目立つようにします。
配置の決定
画面のどの位置（左下、右下など）に広告を配置するかを決める。
クローズボタンの追加
ユーザーが広告を閉じられるように、明確なクローズボタンを配置する。
レスポンシブデザインの適用
すべてのデバイスで適切に表示されるようにする。

使用例

特別オファー
セールやキャンペーン情報をユーザーに伝えるためのフローティング広告。
ニュースレター登録
ユーザーにサイトのニュースレター登録を促すフローティング広告。
アンケートやフィードバック
サイトの改善のためのユーザーフィードバックを収集するためのフローティング広告。
新製品やサービスの紹介
新しい製品やサービスをハイライトするための広告。

注意事項

邪魔にならないように
フローティング広告は情報を伝えるためのものであり、ユーザーの体験を損なうものではないように注意が必要です。
使用頻度を制限
同じユーザーに何度も同じ広告を表示することは、彼らを迷惑がらせる可能性があります。
適切なサイズ
画面の大部分を覆わず、内容を適切に伝えるサイズを選ぶことが重要です。
アクセシビリティを確保
すべてのユーザーが広告を閉じたり、その内容を理解したりできるようにする。
法的制約の確認
一部の国や地域では、フローティング広告の使用に制約がある可能性があるので、法律を確認してください。

フローティング広告は効果的なツールである一方、適切に使用することが不可欠です。

ユーザーの体験を損なわないようにし、目的を達成するための最良の方法を選ぶことが重要です。