【WordPress】記事でアンダーライン(下線)を使用する方法

WordPressのブロックエディタに普通のアンダーラインを引く機能はありません。なので、HTMLを編集してアンダーラインを使用する方法を解説します。

デフォルトで使える・使えないアンダーライン

まず、WordPressのデフォルト機能で使用出来るアンダーラインと使用出来ないアンダーラインについてです。

デフォルトでは、蛍光ペンで書いたようなアンダーラインしか使えません。

下記が今回使いたいアンダーラインです。
URLの下に付いてるような線ですね。

アンダーラインの引き方

アンダーラインを引く時は、HTMLタグを使用します。書式は以下です。

<span style="text-decoration: underline;">文字列</span>

では、実際にWordPressでアンダーラインを引いてみましょう。
ここでは、ブロックエディターを使用して進めていきます。

[整形済みテキスト]に配置する

今回は、試しに整形済みテキストに書いた文章にアンダーラインを付けたいと思います。
まず、整形済みテキストを配置します。

アンダーラインを付ける文章を入力する

整形済みテキストにアンダーラインを付ける適当な文章を入力します。

アンダーラインを付けたい文章を入力する

HTML編集モードに変更する

整形済みテキストを選択すると表示されるメニューにある「縦に３個黒丸が並んでいるボタン」を選択します。
さらに表示されるメニューから「HTMLとして編集」を選択します。

すると、下記のように、HTML編集モードに変更されます。

HTMLタグを入力する

アンダーラインを引くためのHTMLタグを入力します。

画像だと見づらい場合は下記をご覧ください。
赤字部分が追加した、HTMLタグです。

<pre class="wp-block-preformatted has-watery-blue-background-color has-background"><span style="text-decoration: underline;">アンダーラインを付けたい文章を入力する</span></pre>

ビジュアル編集モードに変更する

整形済みテキストを選択すると表示されるメニューにある「縦に３個黒丸が並んでいるボタン」を選択します。
さらに表示されるメニューから「ビジュアル編集」を選択します。

確認

下記のように、文章にアンダーラインが付いていれば完成です。

アンダーラインを付けたい文章を入力する

記事は以上です。少し手間ですが、これでアンダーラインを引くことが出来ました。