【WordPress】文字のアンダーラインの引き方を2種類紹介！

悩む人

WordPressで文字にシンプルなアンダーラインを引きたいです！どうやってやればいいの？

WordPressでは、蛍光ペン風のアンダーラインは、テーマ標準機能やCSS、プラグインなどで使うことができます。

しかし、単純にアンダーラインだけを引きたいという場面がありませんか？

シンプルなアンダーラインを引くには、次のHTMLタグを挿入することで実現可能です。

今回は、この「シンプルなアンダーライン」の簡単な記事への挿入方法について解説していきます！

ゆいて

本記事の内容

• WordPressブログで文字にアンダーラインを引く方法
• アンダーラインの引き方の手順解説
• AFFINGER6のマーカー機能のご紹介

WordPressブログでアンダーラインを使うには

現在のWordPress最新バージョン(5.9)では、文字装飾などの設定からはアンダーラインを引く方法が存在しません。

過去のバージョンでは簡単にできたようですが、アップデートされていく中で機能自体が削除されてしまったようです。

そのため、アンダーラインを引くには冒頭でご紹介した通り、記事にHTMLタグを挿入する必要があります。

HTMLタグ？難しそう・・・という方もご安心。方法はとてもシンプルで簡単です！

ゆいて

では、どうやってアンダーラインを引くのか？

その方法は２つあります。

• ブロックを「HTMLとして編集」にしてHTMLタグを挿入する
• コードエディターからHTMLタグを挿入する

それでは、実際の手順に沿ってアンダーラインの引き方を解説していきます。

ブロックからアンダーラインを引く方法

まずは、ブロックを「HTMLとして編集」する方法から。

step
1ブロックをHTMLとして編集モードに変更

いつものように文字を入力したあと［オプション（・・・が３つ並んでいるところ）］-［HTMLとして編集］をクリックします。

ブロックが次のような、HTMLタグを挿入できるブロックに変わります。

step
2HTMLタグの挿入

＜p＞と＜/p＞の間に、次のHTMLタグを挿入します。

「アンダーラインを引きたい文字」部分にアンダーラインが引かれるので、任意の文字に変更してくださいね。

ゆいて

step
3ブロックをビジュアル編集モードに戻す

最後に「ビジュアル編集」モード（通常ブロック）に戻します。

［オプション（・・・が３つ並んでいるところ）］-［ビジュアル編集］をクリックします。

これで通常のブロックに戻りました。

ブロックから直接編集する方法は以上です。

もう一つの方法は「コードエディター」を使った方法になります。

コードエディターからアンダーラインを引く方法

step
1コードエディターを開く

アンダーラインを引きたい文字を入力後

記事投稿画面の右上の［オプション（・・・が３つ並んでいるところ）］-［コードエディター］をクリックします。

step
2HTMLタグの挿入

１つ目の方法と同じように、アンダーラインを引きたい文字の＜p＞と＜/p＞の間に、次のHTMLタグを挿入します。

step
3ビジュアルエディターに戻す

最後に［コードエディターを終了］か［ビジュアルエディター］をクリックして完了です。

どちらの方法でもアンダーラインを引くことが可能なので、自分の好みに合うほうを使ってみてください！

まとめとAFFINGER6の蛍光ペン風マーカーの紹介

WordPressブログでのシンプルなアンダーラインの引き方は以上になります。

使う場面は限定的かもしれませんが、覚えておいて損はないと思います！

最後にアンダーライン繋がりで、このブログで使用中のテーマ「AFFINGER6」で使える蛍光ペン風マーカー機能を少しだけご紹介。

シンプルなアンダーラインよりも使う場面が多い、蛍光ペン風マーカーですが、無料テーマだとプラグインを使ったりCSSを編集する必要がありますよね。

しかし、AFFINGER6なら標準機能で搭載！

さらにプラグインも不要なので、プラグインのせいで重くなりがちなWordPressブログへの影響もありません。

使い方はとても簡単で、文字入力後にボタンを一度クリックするだけ！

ちなみにAFFINGER6では、次のような蛍光ペン風マーカーが使えます。

• マーカーA
• マーカーB

ワンクリックで２色が使用可能、さらに色も設定から好きな色に変更可能です。

その他にも、あなたの記事作成を劇的に時短してくれる便利機能が満載なので、興味があればAFFINGER6を一度チェックしてみてくださいね。

少しでも参考になれば幸いです。

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