はてなブログ

【はてなブログ】打ち消し線を二重線で引くカスタマイズ

f:id:langnerdmom:20210314134557j:plain:w200

おはようございます!

ブログで書いた言葉を、あとになって消したくなる時ってないですか?

To Doリストとか色んなリストをブログ上で書くのが好きな私。

リストって消してしまうより、打ち消し線を引いて書いた記録は残していたい

しかも、

一重の打ち消し線

じゃなくて

二重の打ち消し線

にしたい!

そんな希望ものと、今回も調べてみました😆🌼

打ち消し線を二重線にするカスタマイズ

みなさん画像をアップロードして二重線に見えるようにしているらしい。

CSSのカスタマイズで何かないかな〜?

見つけました!1番分かりやすかった参考記事がこちら↓↓

参考記事配置位置と幅と間隔を任意に選べる二重取り消し線・三重取り消し線 / CSSの工具箱 | PersonWriter's Room

span {
background: linear-gradient(
transparent 0.6em,
#f00 0, #f00 calc(0.6em + 1px),
transparent 0, transparent calc(0.6em + 3px),
#f00 0, #f00 calc(0.6em + 4px),
transparent 0
);
}

蛍光ペン風のカスタマイズなどでよく見かけるlinear-gradientを使うそう。

よく分からないですが、うまく行きました。



このブログで使っている二重線の打ち消しコード

上記のコードを元にして、このブログで使っているコードはこちら

.doubleline{
background: linear-gradient(
transparent 0.6em,
#8ea1ed 0, #8ea1ed calc(0.6em + 1px),
transparent 0, transparent calc(0.6em + 3px),
#8ea1ed 0, #8ea1ed calc(0.6em + 4px),
transparent 0
);
}


\完成/

f:id:langnerdmom:20210314125425j:plain:w200

<del><strike>などはGoogleで非推奨ということなので、違うコードで打ち消し線を作りました。

<span class="doubleline>打ち消したい文字<span>

二重線を引きたい部分を
<span class="doubleline"></span>
で挟んで完成です❤️

気になる点

  • 二重線の幅が狭い
  • 下寄り
  • 線が細い

上記のことをパソコンが使える時に、おいおい修正しようと思っています。

忙しいワーママでも「はてなブログPro」なら、簡単なのに本格的なブログが始められる❤

せっかくだから独自ドメインも❤





私はムームードメインで取りました。