強調表示の太字に蛍光ペン風のラインをつける方法【はてなブログ カスタマイズ】

前回に引き続き、週末に行った「はてなブログ」のカスタマイズその２です。

こちらの２つの記事を参考に、強調表示の太字に蛍光ペン風のラインをつけてみました。

はてなブログ、蛍光ペン風の強調表示 - KsMemo

はてなブログの強調表示を蛍光ペン風にマーキングする - むじん島

強調表示の太字に蛍光ペン風のラインをつける方法

（１）HTMLタグを追記する

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background:#fcfc60 !important;
    background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
</style>

上記のタグを以下に追加します。 

「管理画面」＞「設定」＞「詳細設定」の中にある「headに要素を追加」の入力スペースに追記

（２）マーカーの色を変更する

（１）のHTMLタグの中の「252,252,84,0」の部分を変更することで、マーカーの色を変更できるようです。

黄色　　　「252,252,84,0」

緑色　　　「102,255,204,1」

青色　　　「102,204,255,1」

ピンク色　「255,153,255,1」

（３）マーカーの太さ・濃さを変更する

（１）のHTMLタグの中の「60」の部分の値を変更することで、マーカーの太さや透明度を変更できるようです。

今回、私は細めのアンダーライン風に設定してみました。

前の「60」が”太さ”で、数値が大きいほど細くなります。

後の「60」が”濃さ”で、数値が大きいほど薄くなります。 

---

今回のカスタマイズは「はてなブログPro」にアップグレードしなくても導入できました。導入したら、過去の記事の太字にもすべて蛍光マーカーのラインが引かれ、少し華やかになった気がします。

はてなブログで「強調表示の太字に蛍光ペン風のラインをつける方法」の紹介は以上です。

はてなブログ Perfect GuideBook

posted with カエレバ

JOE AOTO ソーテック社 2016-07-22

Amazon

楽天市場