【FC2ブログ】蛍光ペンのようなアンダーラインを引く方法【カスタマイズ】

09,2016 0 　 0

FC2ブログの文章作成エディタには蛍光ペンを引いたように文章の背景色を変える方法があります。


ですが！

どうしても、本当の蛍光ペンを引いたように文章の下半分だけを色を変える方法を調べましたので、備忘録として記します。

簡単に蛍光ペンのように引く方法

まずは、簡単に蛍光ペンのように下線を引く方法です。

/* ▼ 蛍光ペン ▼ */

under {
   font-weight: bold;
   background: linear-gradient(transparent 40%, #ffff66 40%);
}

/* ▲ 蛍光ペン ▲ */

CSSに上記を記述することで準備OKです。

<under>～</under>で文字を囲むと、このように蛍光ペンみたいな下線が引けます。

ちなみにfont-weight: boldは太字にする指示です。これを削除すると通常の太さの文字で蛍光ペンのみ残せます。

<b>や<strong>タグに設定できるようにする

つぎはclassタグを使って、<b>や<strong>タグに蛍光ペンを合わせる方法です。

/* ▼ 蛍光ペン ▼ */

.pen {
background: linear-gradient(transparent 40%, #ffff66 40%);
}

/* ▲ 蛍光ペン ▲ */

CSSに上記を記述して準備OKです。

<b class="pen">～<b>のようにbの後ろにclass属性を指定して文字を囲むと、このように蛍光ペンみたいな下線が引けます。

ちなみに<b>は太字、<strong>は強調を意味するタグです。このタグに蛍光ペンの下線も引くので、とても目立ちますね。

<strong>タグだけで簡単に設定する方法

これは私がやっている方法です。

いちいちclass属性タグを入力するのが面倒なので、<strong>に下線がつくようにCSSを入力しました。

/* ▼ 蛍光ペン ▼ */

strong {
background: linear-gradient(transparent 40%, #ffff66 40%);
}

/* ▲ 蛍光ペン ▲ */

今後書く記事は<strong>タグを入力することで下線がつき、さらに過去の記事で<strong>タグを使用しているところもすべて下線がつきます。
過去の記事をいちいち見直すのが大変なので、手軽に一括修正ですｗ

線の太さや色を変える

transparent ○%は線の始まる位置、#ffff66は色の指定で後ろの○%透明度です。

この部分を変更すればOKです

色の指定は#0000ffは青、#ff0000は赤、#ffff00は黄、#008000は緑というようにカラーコードで指定します。

カラーコードはHTMLクイックリファレンスのサイトが参考になります。