閉じることができるオーバーレイで文言を表示する

こんにちは、ふみです。みなさんはオーバーレイで文言を表示しようと思ったことはありますか？

アフィリエイト広告を掲載しているメディアは、2023年10月施行の景品表示法の指定告示（通称ステマ規制）により、運営サイト内に「PR」等の表記が必要になりました。
当サイトの場合、既存のサイトのヘッダー部分に表記を入れるとレイアウトがくずれてしまうので、オーバーレイで文言を表示させるようにしました。

今回はHTML5 (Hyper Text Markup Language version5) でオーバーレイで文言を表示させる方法を紹介します。

CONTENTS

1 HTMLファイルの保存と動作確認
2 WordPressへの実装
- 2.1 CSSコードの入力
- 2.2 HTMLコードの入力
3 レイアウトの調整
4 まとめ

HTMLファイルの保存と動作確認

まずはデスクトップに保存して動作確認できるHTMLファイルを作成します。HTML5/CSS3のコードは、次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--レスポンシブデザイン-->
  <title>オーバーレイで広告であることを表記する</title>
  <style>
    #overlay_pr {
      display: none;
    }
    #overlay_pr:checked + #overlay_pr_window { /* チェックボックスtrue時 */
      display: -webkit-flex;
      display: flex;
    }
    #overlay_pr:not(checked) + #overlay_pr_window { /* チェックボックスfalse時 */
      display: none;
    }
    #overlay_pr_window {
      background-color: #ffffff;
      position: absolute; /*flexにするとスクロール時に固定追従する*/
      top: 180px;
      margin: 5px;
      padding: 0;
      border-style: solid;
      border-radius: 8px;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    #overlay_pr_window div:first-child { /* 最初の子要素div */
      margin: 10px;
      padding: 0;
      font-size: 12px;
      font-weight: normal;
      color: #000000;
    }
    #overlay_pr_window div:last-child { /* 最後の子要素div */
      margin: auto;
      padding: 0;
    }
    .close_pr { /* チェックボックスに連動するラベル */
      cursor: pointer;
      margin: 0 5px 0 0;
      padding: 0;
      font-size: 23px;
      font-weight: normal;
      color: #000000;
    }
    .close_pr:hover { /* カーソルを合わせた時 */
      color: #ffffff;
      background-color: #696969;
    }
  </style>
</head>
<body>
  <input type="checkbox" checked="true" id="overlay_pr">
  <div id="overlay_pr_window">
    <div>当サイトはプロモーションが含まれています</div>
    <div><label class="close_pr" for="overlay_pr">×</label></div>
  </div>
</body>
</html>

上記コードはメモ帳等のテキストエディタにコピー＆ペーストして、拡張子「.html」でデスクトップ等に保存後、ブラウザから開くと「当サイトはプロモーションが含まれています」の文言が画面左上に表示されます。
PCで操作している場合、「×」にカーソルを合わせると色が変わり、クリックで文言を閉じることができます。

CSSの解説は上記コード内にコメントアウトで記載しています。
オーバーレイが閉じる仕組みは、label要素の文字「×」がinput要素のチェックボックス（非表示）に連動しており、「×」をクリックするとチェックボックスが外れて、チェックボックスfalse時のプロパティ’display: none;’によりオーバーレイのdiv要素（id=”overlay_pr_window”）が非表示になります。

WordPressへの実装

WordPress（ワードプレス）に実装する場合、上記コード<style>～</style>の間に記載されているCSSのコードを先に入力してからHTMLのコードを入力します。

CSSコードの入力

ダッシュボードから「外観」>「カスタマイズ」>「追加CSS」を選択します。
初めて「追加CSS」を使う場合は説明が表示されるので、「閉じる」をクリックしてから入力します。
上記コード<style>～</style>の間に記載されているCSSのコードは、そのままコピー＆ペーストすると複数行に設定されてしまいます。
追加CSSは1つの目的で複数行使用してしまうと管理が煩雑になるので、目的毎に1行に圧縮してからペーストします。
上記のCSSのコードを圧縮したものは、次のとおりです。

#overlay_pr { display: none;} #overlay_pr:checked + #overlay_pr_window { display: -webkit-flex; display: flex;} #overlay_pr:not(checked) + #overlay_pr_window { display: none;} #overlay_pr_window { background-color: #ffffff; position: absolute; top: 180px; margin: 5px; padding: 0; border-style: solid; border-radius: 8px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;} #overlay_pr_window div:first-child { margin: 10px; padding: 0; font-size: 12px; font-weight: normal; color: #000000;} #overlay_pr_window div:last-child { margin: auto; padding: 0;} .close_pr { cursor: pointer; margin: 0 5px 0 0; padding: 0; font-size: 23px; font-weight: normal; color: #000000;} .close_pr:hover { color: #ffffff; background-color: #696969;}

追加CSSにペーストした後は「公開」をクリックするとCSSが反映されます。
既存のサイトに同じＩＤ名、クラス名が使用されている場合、既存のレイアウトがくずれてしまうので注意しましょう。

HTMLコードの入力

ダッシュボードから「外観」>「ウィジェット」からカスタムHTMLを選択してHTMLのコードを入力します。
ウィジェットを設定できる箇所は、使用しているテーマによって異なります。

当サイトはCocoonを使用していて、「記事本文下」にカスタムHTMLを設定して下記コードを入力しています。
カスタムHTML実装用のコードは、次のとおりです。

<input type="checkbox" checked="true" id="overlay_pr">
<div id="overlay_pr_window">
<div>当サイトはプロモーションが含まれています</div>
<div><label class="close_pr" for="overlay_pr">×</label></div>
</div>

コードの内容は「HTMLファイルの保存と動作確認」の<body>～</body>の間に記載されているものと同じです。
ウィジェットで利用するカスタムHTMLは、Tabが含まれていると「!」が表示されるので、インデントを削除しています。
カスタムHTMLにペーストした後は「保存」をクリックするとHTMLが反映されます。
各種ブラウザ（PC、iPhone、Android）でレイアウトを確認しましょう。

レイアウトの調整

オーバーレイの文言の位置等がサイトのレイアウトに合わない場合は、CSSの各種セレクタのプロパティを調整します。
レイアウトの調整箇所に対応するセレクタとプロパティは、次のとおりです。

調整箇所	セレクタ	変更するプロパティ
オーバーレイの垂直位置	#overlay_pr_window	top:（数値）;
スクロール時に固定追従させる	#overlay_pr_window	position: fixed;
文言の文字サイズ	#overlay_pr_window div:first-child	font-size:（数値）;
「×」のサイズ変更	.close_pr	font-size:（数値）;
「×」にカーソルを合わせた時の色	.close_pr:hover	color: (色); background-color:（色）;