WordPressで文字の下線（アンダーライン）だけ色を変えるカスタマイズ方法

WordPressでブログを書いているとき、文字の下線（アンダーライン）を引く際に、文字の色はそのままに、下線の色だけを変更する方法のご紹介です。

好きな色に変えられて、しかも線の太さまで指定できる嬉しい方法です♪

調べた末に辿り着いたベストと思われる便利なカスタマイズ方法なので、ぜひぜひ試してみてください。

アンダーラインの色を指定するタグ

ブログ記事本文の中に、一部分だけ強調したいことって多々ありますよね。

WordPressのエディターには、太字、下線、蛍光ペン、文字サイズや文字色の変更といった機能があります。

でも、蛍光ペンで塗りつぶすと目がチカチカするし、何より見た目が雑然として汚くなりますよね・・・。

そこで、もっとシンプルで、それでいてしっかり強調できる方法はないものかと考えたところ、

「下線の色とか太さを変えられたらイイなぁ～♪」

という発想にたどり着きました。

でも、WordPressのエディターでは、文字色を変えれば下線の色も変わるけど、下線の色だけを変えることはできません・・・。

ましてや、線の太さなんて・・・。

そこでHTML系の情報を検索しまくった結果、たどり着いたのが下記のタグを使うという方法であります。

<span style="border-bottom: solid 3px #ff0000;">アンダーライン</span>

これを使うと、実際のブログ画面では下記のように表示されます。

「アンダーライン」の部分を任意の文言に置き換えればイイわけですね。

「3px」の部分の数字を変えることで、下線の太さを指定できます。

「#ff0000」という色コードを変えることで、線の色を指定できます。

お好きな色を選ぶには、下記のサイトが便利ですよ♪

原色、和色、洋色、パステルカラー、ビビットカラー、モノトーン、メトロカラーと、好みの系統に合わせて色を選ぶことができます。

「AddQuicktag」を使ってワンクリックで設置

さて、上記のタグをいちいち入力するのは面倒くさいので、これをワンクリックで設定できるように、WordPressのエディターをカスタマイズしましょう♪

このカスタマイズには、「AddQuicktag」というプラグインを使います。

そう、アドセンス広告を設置する際にも使うことのある、あのプラグインです。

さきほどのタグを「AddQuicktag」にセットすれば、エディターに反映されてワンクリックで利用できるようになります♪

■WordPressダッシュボード（管理画面）のサイドメニューから、

［プラグイン］⇒［新規追加］と進み、

右上の検索窓に「AddQuicktag」と入力します。

■表示された「AddQuicktag」を、

［今すぐインストール］⇒［有効化］します。

■WordPressダッシュボード（管理画面）のサイドメニューから、

［設定］⇒［AddQuicktag］と進みます。

表示された画面で、下図のように入力します。

① 分かりやすいタグの名称（ここでは例として“赤い下線”）を入力します。

② 先ほどのコードの前半、

<span style="border-bottom: solid 3px #ff0000;">

の部分を入力します。

③ 先ほどのコードの後半、

</span>

と、入力します。

④ すべてにチェックを入れます。

■最後に、左下の［変更を保存］をクリックすれば、設定は完了です。

これで、WordPressのエディターに、「赤い下線」というクイックタグが表示されます。

「ビジュアル」モードでは次のような感じです。

「テキスト」モードでは次のような感じです。

使い方は、ほかのボタンと同様で、下線を引きたい文字列をクリック＆ドラッグで指定してから、［赤い下線］ボタンをクリックするだけです。

「テキスト」モードで試すと、指定した部分がタグで挟まれます。

「ビジュアル」モードで試してみれば、赤い下線が表示されます。

下線の色や太さは好みで変えて、効果的に使ってみてくださいね♪