Lifehack

日々の生活をより良いものに!生産性を高めるためのノウハウや健康に生きるための知識を提供。人生を豊かにするためにライフハックを学ぼう!

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

f:id:ruichaosmyth:20200315104239j:plain

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

 

太字にする方法

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 マーカーの太さマーカーの色マーカーの濃さ)
となっており、これらは自分の好みに変更することができます。

 
①マーカーの太さを変更しよう

マーカー太さは、現在60%となってる部分のコードで決まります。
パーセンテージが低いほど、線は太くなります。

 
②好みの色に変更しよう
色の設定は、#ffff00の部分のコードによって決まっています。
  • 青なら→ #0000ff
  • オレンジなら→ #ffa500
  • 赤なら→ #ff0000
 
といった具合で、コードを変更すると色が変わります。今は黄色(#ffff00)が入ってますので、下記のカラーコードサイトから、自分の好きな色を引っ張ってきましょう。
 
③マーカーの濃さを変更しよう
マーカー濃さは、現在40%となってる部分です。
パーセンテージが低いほど、線は濃くなります。
 
変更を保存すると、設定完了です。お疲れ様でした!