強制的にクリックさせる透明な全画面広告の作り方

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

画面全体に見えないリンクが固定表示され続ける、最近一部で流行りの広告です。クリックするまで広告リンクを画面に貼り続け、その間は他のものをクリックできなくするという仕組みになっています。

アクセシビリティを損なうため、許可している広告主は稀です。使用は自己責任でお願いします。

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
<!-- 全画面広告 -->
<div class="screen-ad">
  <a href="URL" target="_blank" rel="noopener sponsored"></a>
</div>

CSS

/*** 全画面広告 ***/
.screen-ad{
  position: fixed; /*画面に固定*/
  top: 0;
  left: 0;
  width: 100vw; /*画面幅*/
  height: 100vh; /*画面の高さ*/
  z-index: 999;
}

/*** リンクを親要素いっぱいに広げる ***/
.screen-ad a{
  position: absolute;
  width: 100%;
  height: 100%;
}

/*** クリック後 ***/
.screen-ad.clicked{
  display: none; /*削除*/
}

JS (jQuery)

<!-- クリック後に.clickedクラスを付与 -->
$('.screen-ad').on('click', function() {
    $(this).toggleClass("clicked");
});

全画面広告用のdiv要素を作成して、その中に広告タグaを入れる
親要素divを画面いっぱいまで広げる
- position: fixedで画面固定
- width: 100vwとheight: 100vhでフルスクリーンサイズに
- z-index: 999で最前面へ
- backgroundは指定しない（透明）
リンクaを親要素いっぱいに広げる
- display: blockでブロック要素に
- position: absoluteとwidth: 100%、height: 100%で親要素と同じサイズに（フルスクリーン）
jQueryを使ってクリック後に.clickedクラスを付与
.clickedを付与されたらdisplay: noneで削除する

div内に広告タグ (テキスト・画像抜き) を入れれば、そのまま使えるようになっています。

ただし、リンク先は必ず新しいタブで開くようにしましょう。
同一タブで開く → ブラウザバックだと広告しかクリックできないループに入ります。

応用CSS

ユーザビリティを考慮するか、クリック率を考慮するかで改造する部分も異なってきます。

とにかくクリックさせたいなら、aタグにcursol: defaultを指定することでカーソルを矢印にして、リンクがあることを悟られないようにするなどの工夫もできますね。（悪魔的だけど実在します）

一定時間後に発生

現状一番よく使われているタイプ。広告を踏む前にしばらくサイトを閲覧してもらい、離脱を少しでも防ごうというものです。

jQueryによって広告にクラスを付与・削除して、displayを切り替えています。

最初はdisplay: none
一定時間後（サンプルは5秒後）に .active を付与してdisplay: blockに変更
クリックされたら .active を取り除きdisplay: noneに戻る

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.