ブログ運営

はてなブログの本文のテキスト上に蛍光ペン風の強調をできるようにしてみた。

f:id:kingofrookie:20180416090617p:plain

どうも、じょーじです。

いろいろな人のブログを読んでいると、よく強調したい文字を蛍光ペンで線を引いてあるような記事を見かけます。

こういう感じで

普通の太字よりも、太字に蛍光ペンの色で線を引いてある方が解りやすくて読みやすく感じます。

なので自分のブログでも取り入れてみることにしました。

参考にさせていただいたサイトはこちらです。

itbenricho.com

設定をコードを追加する場所

ダッシュボード内のデザインをクリックします。

その中のスパナのアイコンをクリックして一番下のデザインCSSをクリックします。

f:id:kingofrookie:20180416082855p:plain

その中にCSSコードを書き込みます。

f:id:kingofrookie:20180416083703p:plain

書き込み終わったら変更を保存して終了です。

使い方

ブログのHTML編集画面で線を引きたい文を写真のようにコードで囲むだけです。

f:id:kingofrookie:20180416084403p:plain

色を追加することもできます。

その場合は

.marker_☆☆ {
background: linear-gradient(transparent 60%, #●●●●●● 60%);
}

このコードの☆の部分は半角英数で、●の部分はHTMLのカラーコードを入力。

下の行に書き足せばOKです。

使うときはHTML編集画面で

<span class=”marker_☆☆”>囲む文字</span>

とすれば使えます。

スポンサーリンク

 

おわりに

なんか同じこと二回書いてしまったような・・・。

だけどいちいちHTML編集画面でコードを書くのって少しだけ面倒ですね。

僕はそのうちアンダーラインのCSSを変更できるか調べてみて、変更できそうだったらそっちにアンダーラインで使えるようにするかもしれません。