Brooklynでブログの本文中に蛍光ラインを引いてみる

ブログの記事を書いていると部分的に強調したくなることありませんか？

太字にする、文字の色を変える…

様々な方法があるかと思いますが、今回は強調したい文章に蛍光ラインをひくカスタマイズを行ってみたいと思います。

※今回のカスタマイズは【Brooklyn】に限らず、他のテーマでも同様にカスタマイズ可能です。

【Brooklyn】ブログで蛍光ラインをひくカスタマイズの完成形

「百聞は一見に如かず」

ということで、今回紹介するカスタマイズの完成形は、

こんな感じになります

もちろん線の太さや色は皆さんの好みのものへ変更可能です！

それでは早速カスタマイズしていきましょう。

まずははてなブログではおなじみの

ダッシュボード→デザイン→スパナマーク→デザインCSS

と進みます。

このデザインCSSの最後の行に下のコードをコピペしましょう。

/*蛍光ライン*/

.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 0

60%, #00ffff 0%) repeat scroll 0 0;}

正直この記述が何を示しているかは分かりません(笑)

ただし、60％の数字を小さくすればするほどラインが太くなる、数字を大きくすればするほどラインが細くなっていきます。

さらに「#00ffff」で蛍光ラインの色を指定しています。

この部分を自分が好きな色のコードに書き換えてあげれば自分好みのラインになります。

ちなみにコードに「.blue」とありますが、選んだ色が黄色であれば「.yellow」に変換しても問題ありません。

ただしここから下の説明で「.blue」と記載されているところは「.yellow」に適宜読み替えて下さい。

色のコードが分からない方は下記のページが大変参考になりますよ。

これで下準備は終わりました。

ここからは実際に記事中に蛍光ラインを出す方法を紹介します。

<span class="blue_line">おためし</span>

上のように記事中に入力すると、

おためし

のようになります。

はてなブログには記事の書き方が複数あります。

今回の方法で素直に出来るのは「はてな記法」「Markdown」「HTML」になります。

「見たまま編集」で記事を書いている方は、見たまま編集で記事を書いた後「HTML編集」を開き、ラインを引きたい文章のところに上記のコードを挿入してあげればうまくいくと思いますよ。

そして最後に個人的におススメしたいことなのですが、

蛍光ラインを引く文字は太字にする！

これをおススメしたいと思います。

是非お試しあれ！！