ポッと出てくるバナー、ポップアップ広告を紹介します。
バナーの動作を確認したら✖️を押して非表示にしてください。
こちらはポップアップ広告のコンテンツです。
Javascript
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
document.getElementById('popupAd').style.display = 'block';
}, 2000); // 2秒後に広告を表示
});
function closeAd() {
document.getElementById('popupAd').style.display = 'none';
}document.addEventListener は、指定されたイベントが発火したときに特定の関数を実行するためのメソッド。
"DOMContentLoaded" は、HTMLドキュメント全体がロードされてDOMが構築されたときに発火するイベント。つまり、このイベントはページ全体がブラウザに読み込まれたときに発生する。
setTimeout は、指定された時間遅延の後に関数を実行するためのJavaScriptの関数。
この例では、2秒 (2000ミリ秒) 後に関数内のコードを実行する。
document.getElementById('popupAd') は、IDが ‘popupAd’ のHTML要素を取得する。
.style.display = 'block'; は、その要素の表示スタイルを ‘block’ に変更する。これにより、元々非表示 (display: none) だったポップアップ広告が表示されるようになる。
これは closeAd という名前の関数を定義しています。この関数は、特定のイベントやアクションが発生したときに広告を非表示にするために使用される。
この行は、IDが ‘popupAd’ のHTML要素の表示スタイルを ‘none’ に変更する。これにより、ポップアップ広告が非表示になる。
- ページが読み込まれた2秒後にID ‘popupAd’ の要素（ポップアップ広告）を表示する。
closeAd関数が呼び出されたときに、同じ要素（ポップアップ広告）を非表示にする。
CSS
.popup-ad {
width: 200px;
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
display: none;
padding: 10px;
z-index: 1;
}
.close-ad {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}HTML
<div class="popup-ad" id="popupAd">
<span class="close-ad" onclick="closeAd()">✖️</span>
<img src="広告の画像URL" alt="広告">
<p>こちらはポップアップ広告のコンテンツです。</p>
</div>ポップアップ広告使用方法
ポップアップ広告は、サイトの訪問者の注意を引き付けるための広告手法の一つである。以下は基本的な使用方法。目的を明確にする
何を伝えたいのか、何のアクションを取ってほしいのかを明確にする。
デザインを選ぶ
ターゲットとする訪問者に合わせたデザインを選び、メッセージを強調する。
配置を決める
サイトのどのページや場所でポップアップを表示するかを決める。
トリガーを設定する
訪問者がページに訪れてから何秒後、またはどのアクションを起こした後にポップアップを表示するかを設定する。
ポップアップ広告使用例
新製品の紹介
新しい商品やサービスを訪問者に知らせるためのポップアップ。
ニュースレターの登録
サイトのニュースやアップデート情報を知らせるメールの登録を促すポップアップ。
セールやキャンペーンの告知
期間限定のセールやキャンペーンの情報を伝えるポップアップ。
ポップアップ広告注意事項
頻度
ポップアップの表示頻度が高すぎると、訪問者をイライラさせる可能性がある。適切な間隔を持たせるように心がける。
閉じるボタン
ポップアップには必ず明瞭な「閉じる」ボタンを配置する。閉じるのが難しいと、訪問者の不満が増す。
モバイル最適化
スマートフォンやタブレットでの表示も考慮し、ポップアップが正しく表示されるようにする。
明確なメッセージ
情報を簡潔に伝え、長すぎると訪問者の興味を失う可能性がある。
法的な要件
特にプライバシーに関連する情報を収集する場合、適切な同意を得るなどの法的な要件を守ること。
ポップアップ広告の実装、いかがでしたか？
このコードで、サイトがもっと魅力的になることを期待しています！
コメント