【黒塗り・ぼかし】ネタバレ伏せにコピペで使えるHTML/CSSコード2種

サイトを運営していて悩ましいことのひとつが、ネタバレやセンシティブなど、観る人を選ぶ内容を含むコンテンツの掲載方法です。

かつては、白背景に白文字で文章を書き、クリック＆ドラッグで文章を選択し、色を反転して読んでもらう手法が当たり前のように使われていました。しかしスマホからのサイト閲覧が主流となった今では、スマホでは文字の選択による反転ができないため、時代に沿ったよい方法とは言えません。

そこでこの記事では、ネタバレを含む内容を伏せつつ、PCでもスマホでもワンクリックで読めるようにするHTML/CSSコードを紹介します。どれもさほど複雑なコードではなく、コピペで使えるようになります。

ご活用いただけると嬉しいです！

文章をちょっとだけ隠したいときに！ネタバレ防止の黒塗りコード

使用例はこんな感じです。黒塗り部分をクリックすると→こんなふうに黒塗り部分の文字色が変化し、内容が読めるようになります。また、もう一度クリックすると伏せた状態に戻ります。

また同一ページで複数個所を隠すこともできます。こんな風に！ちゃんと隠れて見えていますよね？ただし同一ページで複数個所を隠す場合には少しだけコードを修正する必要があります。

文章の途中で使うことができるため、伏せたい部分がちょっとだけある……というときに便利です
伏せている途中で使えるタグは限られています。太字タグや斜体タグは使えますが、リンクや画像、段落タグを使うと意図したとおりの見た目になりません

CSSコード

使いたいページのCSSファイル末尾に以下を追記してください。

input.netabare01_checkbox {
  display: none;
}

label.netabare01_label {
  display: inline;
  position: relative;
  background-color: #171717 !important;
  color: #171717 !important;
  cursor: pointer;
  transition: 0.3s;
}

label.netabare01_label:before {
  content: "クリックで内容を表示します";
  display: block;
  border: 1px solid #c70b0b;
  font-size: 14px;
  background-color: #ffeced;
  color: #c70b0b;
  position: absolute;
  padding: 4px 10px;
  z-index: 2;
  right: 0;
  left: 0;
  bottom: calc(100% + 5px);
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 200px;
  text-align: center;
  border-radius: 4px;
  transition: 0.3s;
  pointer-events: none;
  opacity: 0;
}

label.netabare01_label:hover:before {
  opacity: 1;
}

input.netabare01_checkbox:checked + label.netabare01_label {
  color: #ffffff !important;
}

input.netabare01_checkbox:checked + label.netabare01_label:hover:before {
  opacity: 0;
}

黒塗りの色を変更したい場合は、#171717のカラーコード二か所をお好みの色に変更してください。その他、見た目の調整はご自由にどうぞ。

HTMLコード

黒塗りにしたい部分を以下のようなHTMLコードで囲みます。

<input type="checkbox" class="netabare01_checkbox" id="bare01">
<label for="bare01" class="netabare01_label">
ここに伏せたい内容
</label>

同じページ内に伏せたい部分が複数個所ある場合は、ふたつめ以降のコードに少し手を加える必要があります。<input>タグ内のid="bare01"と、<label>タグ内のfor="bare01"の部分を、二つとも同じ値になるよう変更してください。例えば、「bare02」のように連番にするとわかりやすいでしょう。

<input type="checkbox" class="netabare01_checkbox" id="bare01">
<label for="bare01" class="netabare01_label">
伏せたい内容その１
</label>

<input type="checkbox" class="netabare01_checkbox" id="bare02">
<label for="bare02" class="netabare01_label">
伏せたい内容その２
</label>

inputタグとlabelタグはふたつで１セットになるため、inputタグのidとlabelタグのforの値とが同じになる必要があります。

長い文章や画像もまるごと隠せる！ネタバレ防止のぼかしコード

次に紹介するのは、ぼかしを入れるためのコードです。この方法では、大きな段落も丸ごと隠せるほか、画像などにもぼかしを入れることができます。

ちょうどこんな感じです。
長い文章や、複数の段落があっても、全体がぼかしで覆われて読めなくなっているはずです。また、文章だけではなく画像もぼかすことができます。こんなふうに。

黒塗りのコードと比べると使えるタグは多いですが（pタグやimgタグも使えます）、リンクタグは利用できないのでご注意を。リンク自体は貼れるのですが、リンク部分をクリックするとぼかしが戻る処理が優先されるため無効になってしまいます。

CSSコード

以下のコードをぼかしを入れたいページのCSSファイルに追記します。

input.netabare02_checkbox {
  display: none;
}

label.netabare02_label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

label.netabare02_label:after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  top: -5px;
  left: -5px;
  margin: auto;
  z-index: 2;
  transition: 0.3s;
}

label.netabare02_label:before {
  content: "クリックで内容を表示します";
  word-break: keep-all;
  display: block;
  border: 1px solid #c70b0b;
  font-size: 14px;
  background-color: #ffeced;
  color: #c70b0b;
  position: absolute;
  padding: 4px 10px;
  z-index: 3;
  right: 0;
  left: 0;
  bottom: calc(100% + 5px);
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 220px;
  text-align: center;
  border-radius: 4px;
  transition: 0.3s;
  pointer-events: none;
  opacity: 0;
}

label.netabare02_label:hover:before {
  opacity: 1;
}

input.netabare02_checkbox:checked + label.netabare02_label:after {
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
}

input.netabare02_checkbox:checked + label.netabare02_label:hover:before {
  opacity: 0;
}

ぼかしの強さを変更したい場合は、blur(6px)と書かれた部分が二か所あるため、ここを変更してください。数字を大きくするとぼかしが強く、逆に数字を小さくするとぼかしが弱くなります。

HTMLコード

黒塗りにしたい部分を以下のようなHTMLコードで囲みます。

<input type="checkbox" class="netabare02_checkbox" id="bokasi01">
<label for="bokasi01" class="netabare02_label">
ここに伏せたい内容
</label>

黒塗りの場合と同様に、同じページ内に伏せたい部分が複数個所ある場合は、ふたつめ以降のコードに少し手を加える必要があります。<input>タグ内のid="bokasi01"と、<label>タグ内のfor="bokasi01"の部分を、二つとも同じ値になるよう変更してください。例えば、「bokasi02」のように連番にするとわかりやすいでしょう。