10press

お久しぶりです。長い間お休みしてましたが精神的な余裕ができてきたのでまたゆっくりペースですが更新したいなと思ってます。お休み中にフォームやコメント、Waveboxへの絵文字やメッセージを送ってくださった皆様ありがとうございました！落ち込むことが多かった時期でしたがめちゃくちゃ励みになりました。スキンの利用報告や質問・要望などすべてありがたく読ませていただいています。お返事が必要な方へはお返事が遅く申し訳ないのですが今後それを加味した更新からしていくつもりなのでよろしくお願いいたします（もうほかの方法やスキンで解決したよってことでしたら申し訳ないです🙇）

といいつつ今回はちょうどてがろぐ公式さんのサポート掲示板で話題上ってたのもありタイトル通りの小ネタ覚書です。てがろぐ以外でもHTMLとCSSが使えるところでなら使えます。同じような機能を持たせたい方法としてすでにdoさんで【黒塗り・ぼかし】ネタバレ伏せにコピペで使えるHTML/CSSコード2種が紹介されていますがそれよりもっと簡素なものです。

あとサポート掲示板のやり取りを拝見した感じてがろぐ公式でプラスアルファの機能を盛って実装していただけそうな気もします…。

隠したい部分をぼかし、マウスオーバーまたはタップでぼかしを解除するCSS

HTML

class名は自由につけていいですが今回はてがろぐ準拠の例として以下のようにします。てがろぐではぼかしをかけたい部分を選択し「装飾ボタン」→「〇（自由装飾）ボタン」を押して出たダイアログに「bokashi」と入力してください。

<span class="deco-bokashi">この部分にぼかしをかけます</span>

CSS

.deco-bokashi {filter: blur(.3em);}
.deco-bokashi:is(:hover, :active) {filter: revert;}

隠したい部分を塗り潰し、マウスオーバーまたはタップで塗り潰しを解除するCSS

HTML

class名は自由につけていいですが今回はてがろぐ準拠の例として以下のようにします。てがろぐではぼかしをかけたい部分を選択し「装飾ボタン」→「〇（自由装飾）ボタン」を押して出たダイアログに「tsubushi」と入力してください。

<span class="deco-tsubushi">この部分は塗りつぶします</span>

CSS

.deco-tsubushi {background-color: currentColor;}
.deco-tsubushi:is(:hover, :active) {background-color: transparent;}

サンプル及び注意事項

サンプルはこちらで見てください（てがろぐです）。PCはマウスオーバー・スマホはタップで隠している部分が表示できると思います。

あくまでもCSSで隠しているだけなので外部ページへの埋め込みやRSS、OGPではテキストは丸出しになります。

ぼかしのCSSは多分画像を入れても画像もぼかされる…と思いますが（未検証）塗りつぶしのほうは文字色と同じ色で背景色を入れているだけなので画像を入れても塗り潰されません（CSSを工夫すればできなくもないと思いますが）。

表示確認はPC上のEdge、Firefox、Vivaldi及びスマホ（Android）上のFirefox、Chromeでのみしています。ほかの環境でおかしい点があればお知らせくださるとありがたいです。