はてなブログで太字を蛍光マーカー風にする方法

f:id:ruichaosmyth:20200315104239j:plain

記事を編集するにあたって、太字を使用する頻度はかなり高いですよね。ただ、初期設定のままだと、あまり目立たなかったり、なんだかダサかったり...もっといい感じに強調したくなるものです。
実は、css設定をするだけで、太字コマンドを蛍光ペン風にする事が可能です。さっそく設定方法を見ていきましょう。

参考:はてなブログで太字を蛍光マーカーでラインを引いたようにする方法 | ringocat note

太字にする方法

f:id:ruichaosmyth:20200315093638p:plain

左上のコマンドを使うことで、太字にしたり、下線付けたりできる事はご存知ですよね。一応おさらいとして、太字にするためには文字を選択した状態で、Bコマンドを押すとできます。
ちなみに、文字を選択した状態で、Ctrl+Bを押しても太字にすることができますよ。

さっそくcssを設定しよう

f:id:ruichaosmyth:20200315094035p:plain

デザインcssを開きましょう。（デザイン→カスタマイズ → デザインcss）
開いたら、こちらのコードをコピーし、コードの1番下に張り付けて下さい。

/*太文字マーカー*/

.entry-content strong {

background: linear-gradient(transparent 60%, #ffff00 40%);

font-weight:bold;

}

変更を保存し、太字にしてみると、
太字蛍光ペン使った風
↑↑こんな感じで蛍光ペン風になっていると思います。

自分の好みに調整しよう

黄色の蛍光マーカーを気に入ってくれれば、このまま使用してくれてもいいですが、
(transparent 60%, #ffff00 40%)の部分は
(transparent マーカーの太さ、マーカーの色、マーカーの濃さ)
となっており、これらは自分の好みに変更することができます。