サイトに効果的!ポップアップ広告のコピペでできる実装手順

ポッと出てくるバナー、ポップアップ広告を紹介します。

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

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

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>