閉じるボタン付きの注意ボックスを設置する方法

固定ページや投稿ページに「閉じるボタン付きの注意ボックス」を設置すると、重要なお知らせや注意点を目立たせながら、ユーザーが自由に閉じられるようになります。ここでは、クラシックエディタで簡単に設置できる方法をご紹介します。

1 HTMLコード

<div class="fixed-close-box">
  <span class="close-btn" onclick="this.parentElement.style.display='none';">&times;</span>
  <p>ここは固定表示の注意ボックスです。スクロールしても常に画面中央に表示されます。</p>
</div>

2 汎用CSS

/* -----------------------------
 * 閉じるボタン付きの注意ボックス
----------------------------- */

.fixed-close-box {
  position: fixed;           /** 画面に固定してスクロールしても動かない **/
  top: 50%;                  /** 画面垂直方向の中央に配置 **/
  left: 50%;                 /** 画面水平方向の中央に配置 **/
  transform: translate(-50%, -50%); /** 自分の幅と高さの半分だけ移動させ完全に中央に **/
  background-color: #fffae6; /** ボックスの背景色 **/
  border: 1px solid #ffd700; /** ボックスの境界線（黄色） **/
  padding: 20px 10px; /** 内側の余白（上・右・下・左） **/
  border-radius: 8px;        /** 角を丸くする **/
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /** 軽い影で浮き上がらせる **/
  z-index: 9999;             /** 他の要素より前面に表示 **/
  width: 80%;                /* 基本は画面幅の80% */
  max-width: 600px;          /* ただしPCでは最大600pxまで */
  text-align: center;        /** 中のテキストを中央揃え **/
}

.fixed-close-box .close-btn {
  position: absolute;       /** 親要素を基準に絶対配置 **/
  top: 5px;                 /** 上から5pxの位置に配置 **/
  right: 10px;              /** 右から10pxの位置に配置 **/
  font-size: 22px;          /** フォントサイズ **/
  font-weight: bold;        /** 太字にする **/
  cursor: pointer;          /** ホバー時にカーソルが指になる **/
  color: #333;              /** ボタンの色 **/
}

.fixed-close-box .close-btn:hover {
  color: #ff0000;           /** ホバー時に赤色に変化 **/
}

3 ポイント

• クラシックエディタでは「テキストモード」に貼り付けるだけでOK。
• 閉じるボタンはJavaScriptを使わず、インラインのonclickで簡単に非表示にできます。
• 背景色やボーダーは自由にカスタマイズ可能。

4 応用例

<div class="fixed-close-box">
  <span class="close-btn" onclick="this.parentElement.style.display='none';">&times;</span>
  <p>キャンペーン期間中は送料無料！</p>
</div>

このようにすると、ページの真ん中に目立つお知らせボックスを設置でき、ユーザーが任意で閉じることもできます。

5 完成イメージ

▶ サンプル