ワードプレス 道　簡単に使用できるアンダーラインを紹介

今回はブログなどで簡単に使用できるアンダーライン（下線）を紹介していきます。

意外とアンダーラインの使い方を分からない方多いと思いますので、どうしたら簡単に使用できるかを紹介しますのでそちらを使ってより良いブログにしてください。

CSS込みですので別で設定する必要はありません。

アンダーライン（下線）の仕組み

まずはベーシックなアンダーラインの仕組みを理解する事で変更も自分の好みに仕上げることも可能になります。

<span style="background: linear-gradient(transparent 60%, #FFFF99 50%);"> </span>

上記はCSS込みの設定になっていますのでCSS部分を触れば色の変更、線の太さの変更も可能です。

ポイントはbackgroundの設定のlinear-gradient(transparent 60%, #FFFF99 50%);

linear-gradientは線形のCSSになります。

線の太さの変更は2つの60%と50%の数値を下げると太くなります。

それで数値が上がればアンダーラインになり、数値が下げれば背景色にもなりますよ。

色の変更は#FFFF99をカラーチャートから好きな色を選び変更してください。

カラーチャートはコチラ

アンダーラインの場合

アンダーラインの場合の線の太さ

色も変更してみました

背景色の場合

背景色の場合の線の太さ

色も変更してみました

AddQuicktagでいつでも簡単に使用する方法

『AddQuicktag』は、タグ登録ができるプラグインでます。

一度、登録すると次からはボタン一つで使用することができますので是非登録してください。

設定から上記のコードの開始部分と終了部分を事前に登録しておくと次回からはツールバーに出てきます。

下記のように登録したら変更を保存することをお忘れなく。

開始タグ

終了タグ

これで皆さんの自由なアンダーラインや背景色を作成する事が出来ます。

今回は下線、背景色などを紹介してきましたが、文字の強弱などインパクトがとてもありますので是非使用してみてください。

ご購読ありがとうございました。