初心者でも簡単！コピペでOK！　はてなブログで蛍光ペン風マーカー、アンダーラインのカスタマイズ。2020／4／24改訂版！

f:id:koromor:20200304142402j:plain

⚠️この記事は2020年4月24日に改訂しました。

今回は超簡単な蛍光マーカー風のアンダーラインのカスタマイズの解説です。

いろいろなサイトを見ていても、強調したい文章にアンダーラインを入れている方を見かけます。

伝えたいことや強調したいことが明確になりますし、なによりインパクトを感じますよね！

今回のカスタマイズはとっても簡単なので、やってみてください！

↓　今回参考にさせていただいたサイトです。

hirochiki10.hatenablog.com

蛍光マーカー風のアンダーライン
蛍光マーカーの設定方法
さいごに

蛍光マーカー風のアンダーライン

蛍光マーカーでラインを引いた感じに、文字の下にラインを入れます。

今回は『太字』と『斜体』と『アンダーライン』への設定です。

f:id:koromor:20200304171231p:plain

f:id:koromor:20200304171326p:plain

f:id:koromor:20200317160932p:plain

『太字』と『斜体』は蛍光ラインを入れたい文章を選んでから『 B 』もしくは『 i 』でそれぞれに設定した蛍光ラインを入れることができます。（プレビュー画面で確認できます）

アンダーラインに関してはHTML編集で<u>〇〇〇〇</u>（◯の中に蛍光マーカーで装飾したい文字を入れる）に囲むと蛍光ラインが入ります。後ほど詳しく説明します。

どれか１つでも構いませんし、色やラインの幅などを変えて使い分けてもいいと思います。

蛍光マーカーの設定方法

今回貼り付ける場所は『設定』⇨『詳細設定」⇨『headに要素を追加』に貼り付けます。

f:id:koromor:20200310180008p:plain

下の方にスクロールして

f:id:koromor:20200310181141p:plain

＊バックアップ推奨、自己責任でお願いします。

『太字』を蛍光マーカーにしたい場合のコード

<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(255,153,255,1) 60%) !important;

}

/* bタグは太字 */

article b{

font-weight:bold !important;

}

</style>

『斜体』を蛍光マーカーにしたい場合のコード

<style type="text/css">

/* 斜体表示を蛍光ペン（黄）風に */

article em{

font-weight:bold;

font-style: normal;

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;

}

/* iタグは斜体*/

article i{

font-style:oblique !important;

}

</style>

『アンダーライン』を蛍光マーカーにしたい場合のコード

<style type="text/css">

/* アンダーライン表示を蛍光ペン（緑）風に */

article u{

font-weight:bold;

text-decoration: none;

margin:0 0.1em;

padding:0.1em 0.2em;

background:#fcfc60 !important;

background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;

}

</style>