ブログカスタマイズCSS ぼかし画像とか黒海苔画像とかぼかしとか

参考にしたサイト

【黒塗り・ぼかし】ネタバレ伏せにコピペで使えるHTML/CSSコード2種 | 創作・同人サイト制作支援サイト do
まとめラボ - 論理と心理

説明だったり

ぼかし画像とか黒海苔画像とかぼかしを使いたかったので、CSSで再現してみました
コピー＆ペーストで利用できると思います、カスタマイズCSSに入れてください
記述したい部分にHTMLの部分を入れてください
はてな記法で動作確認済みです、HTML記法だともうちょっと隙間とかできなくなるんじゃないかなと思ってます

CSS一覧

ネタバレ文字を黒くする

ここにネタバレが入ります

.inked {
  background-color: black;
  color: transparent;
  display: inline;
  cursor: pointer;
  transition: background-color 0.3s;
}

.inked:hover {
  background-color: transparent;
  color: initial;
}

.inked::before {
  content: "ネタバレ内容を表示";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.inked:hover::before {
  opacity: 1;
}

<div class="inked">記述方法</div>

ネタバレ画像を黒塗りにする

はてなフォトライフでも黒塗りは可能です
rgba(0, 0, 0, 0.92)の部分を好きな数値にすると色も変えることができます

.spoiler-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.spoiler-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.93); /* 半透明の黒 */
  opacity: 1; /* 初期状態では完全に表示 */
  transition: opacity 0.3s ease;
  pointer-events: none; /* オーバーレイをクリック可能にしない */
}

.spoiler-container:hover .spoiler-overlay {
  opacity: 0; /* マウスホバー時にオーバーレイを非表示にする */
}

<div class="spoiler-container">
[f:画像URL:plain]
  <div class="spoiler-overlay"></div>
</div>

ネタバレ画像をぼかす

画像にぼかしをかけます
はてなフォトライフでも問題なし

.image-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.image-container img {
  filter: blur(9.3px); /* 画像にぼかしを適用 */
  transition: filter 0.3s ease; /* アニメーションを追加 */
}

.image-container:hover img {
  filter: blur(0); /* ホバー時にぼかしを解除 */
}

<div class="image-container">
[f:画像URL:plain]
</div>

ネタバレ文字をぼかす

文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
文字文字文字
文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字
画像とは違い、ブラーをかけすぎると微妙なのでそこら辺は調整してください
0に近くなればなるほどブラーがかかります
視認性が悪くなるのはまあ良いんだけど難しいところ
色つけると文字が読めるのもあれだなあという顔になってる

.spoiler-text {
  color: transparent; /* テキストのカラーを透明にする */
  text-shadow: 0 0 5px rgba(0, 0, 0, 9.3); /* テキストにぼかしを追加 */
  background-color: rgba(0, 0, 0, 0); /* テキストの背景色を設定 */
  padding: 5px; /* テキスト周りの余白を調整 */
  display: inline-block; /* テキストが必要な幅に合わせる */
  transition: text-shadow 0.3s ease; /* アニメーションを追加 */
}

.spoiler-text:hover {
  color: initial; /* ホバー時にテキストのカラーを元に戻す */
  text-shadow: none; /* ホバー時にぼかしを解除 */
  background-color: transparent; /* ホバー時に背景色を透明にする */
}

<span class="spoiler-text">文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字