【コピペカスタマイズ】はてなブログに蛍光ペン風アンダーライン。太字に自動で下線マーカーを入れる方法。

スポンサードリンク
この記事は約3分で読めます。
スポンサードリンク

f:id:a720b720c720:20190519102347j:plain

 

どうも。昨日はブログカスタマイズ記事を書きました。

www.a720b720c720.com

 

今日は太字にした部分に自動で蛍光ペンマーカー風のアンダーラインが引かれるカスタマイズコードをご紹介します。

 

はてなブログのデフォルト機能で、重要な部分を強調したいときには太字設定ができるようになっています。

f:id:a720b720c720:20190519095139p:plain

 

しかし、さらに強調し目立ちやすくなるようには今回のマーカーを引く方法がおすすめです。

 

完成イメージ

完成イメージはこんな感じです。↓

 

自動で蛍光ペンマーカー風の下線が引かれます。

太字マーカーコピペコード

 

 それではさっそく見ていきます。コピペコード貼り付け場所と、コピペコードです。

 

コピペ場所

ダッシュボード→デザイン→カスタマイズ(スパナマーク)→デザインCSS

 

f:id:a720b720c720:20190518073411p:plain

 

コピペコード

以下のコードをデザインCSSに貼り付けていただければOK!

 

/*マーカー */
.entry-content strong {
background: linear-gradient(transparent 70%, #ffff55 40%);
}

 

 以上で完成です!ものすごく簡単です。

 

その他のCSSカラーコード

このブログでは黄色を設定していますが、下の赤文字部分「#fff55」を変えれば、お好みの色にしていただけます。

 

/*マーカー */
.entry-content strong {
background: linear-gradient(transparent 70%, #ffff55 40%);
}

 

 

#ff0000

f:id:a720b720c720:20190519092654p:plain

 

 

青:#0000ff

f:id:a720b720c720:20190519092952p:plain

 

 

緑:#008000

f:id:a720b720c720:20190519093317p:plain

 

 

ピンク:#ffc0cb

f:id:a720b720c720:20190519092651p:plain

 

 

オレンジ:#ffa500

f:id:a720b720c720:20190519092630p:plain

もっと他のカラーコードを見る

その時は以下のサイトを参考にしてください。ものすごい数の色が豊富にそろっているので、きっとお好みの色が見つかると思います。

 

f:id:a720b720c720:20190519092414p:plain

 

www.colordic.org

 

マーカーの太さを変える方法

 さて、さらにアンダーラインをいじる方法です。

アンダーラインを細くする

ちょっと太いかな~と思った方は、下の赤字部分の%の数字を変えていただくことで太さを変えられます。

 

f:id:a720b720c720:20190519093811p:plain

 /*マーカー */
.entry-content strong {
background: linear-gradient(transparent 90%, #ffff55 40%);
}

 

90%だとこれくらい。文字にかぶらないのでこれくらいがいい方もいるかもですね。

ちなみに数字が大きければ細くなり、小さくなれば太くなります。

 

背景すべてに色を付ける

強調した部分はものすごく目立たせたい!という方は思い切って全部に色を付けてしまいましょう。

f:id:a720b720c720:20190519092530p:plain

 /*マーカー */
.entry-content strong {
background: linear-gradient(transparent 0%, #ffff55 40%);
}

 

0%にすれば背景すべてに色が付きます。

参考記事

【コピペ+α】はてなブログで文章を読みやすくするカスタマイズ集 – いつ俺〜いつから俺ができないと錯覚していた?〜

 

最後に

以上が強調したい部分に自動で蛍光ペン風マーカーを引く方法です。ちょっとした工夫で見やすさが増します。

 

これは簡単ですので、やってみて損はないですよ!

 

それでは。

コメント

タイトルとURLをコピーしました