サイトを運営していて悩ましいことのひとつが、ネタバレやセンシティブなど、観る人を選ぶ内容を含むコンテンツの掲載方法です。
かつては、白背景に白文字で文章を書き、クリック&ドラッグで文章を選択し、色を反転して読んでもらう手法が当たり前のように使われていました。しかしスマホからのサイト閲覧が主流となった今では、スマホでは文字の選択による反転ができないため、時代に沿ったよい方法とは言えません。
そこでこの記事では、ネタバレを含む内容を伏せつつ、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"> 伏せたい内容その1 </label> <input type="checkbox" class="netabare01_checkbox" id="bare02"> <label for="bare02" class="netabare01_label"> 伏せたい内容その2 </label>
input
タグとlabel
タグはふたつで1セットになるため、input
タグのidとlabel
タグのforの値とが同じになる必要があります。
長い文章や画像もまるごと隠せる!ネタバレ防止のぼかしコード
次に紹介するのは、ぼかしを入れるためのコードです。この方法では、大きな段落も丸ごと隠せるほか、画像などにもぼかしを入れることができます。
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」のように連番にするとわかりやすいでしょう。
訪問者に配慮しながら好きなことを書いてサイト運営を楽しもう
個人サイトだからこそ好きなことをしゃべりたい、けどやっぱり堂々とは書けないこともある……そんなとき、このコードが役に立てていただければ幸いです。
あなたのサイト運営がより快適で楽しいものになりますように!
※コメントは最大500文字、5回まで送信できます