
WordPressで文字にシンプルなアンダーラインを引きたいです!どうやってやればいいの?
WordPressでは、蛍光ペン風のアンダーラインは、テーマ標準機能やCSS、プラグインなどで使うことができます。
しかし、単純にアンダーラインだけを引きたいという場面がありませんか?
シンプルなアンダーラインを引くには、次のHTMLタグを挿入することで実現可能です。
アンダーラインのHTMLタグ
<span style="text-decoration: underline;"> アンダーラインを引きたい文字</span>
今回は、この「シンプルなアンダーライン」の簡単な記事への挿入方法について解説していきます!

本記事の内容
- WordPressブログで文字にアンダーラインを引く方法
- アンダーラインの引き方の手順解説
- AFFINGER6のマーカー機能のご紹介
WordPressブログでアンダーラインを使うには

現在のWordPress最新バージョン(5.9)では、文字装飾などの設定からはアンダーラインを引く方法が存在しません。
過去のバージョンでは簡単にできたようですが、アップデートされていく中で機能自体が削除されてしまったようです。
そのため、アンダーラインを引くには冒頭でご紹介した通り、記事にHTMLタグを挿入する必要があります。
HTMLタグ?難しそう・・・という方もご安心。方法はとてもシンプルで簡単です!

では、どうやってアンダーラインを引くのか?
その方法は2つあります。
- ブロックを「HTMLとして編集」にしてHTMLタグを挿入する
- コードエディターからHTMLタグを挿入する
それでは、実際の手順に沿ってアンダーラインの引き方を解説していきます。
ブロックからアンダーラインを引く方法
まずは、ブロックを「HTMLとして編集」する方法から。
step
1ブロックをHTMLとして編集モードに変更
いつものように文字を入力したあと[オプション(・・・が3つ並んでいるところ)]-[HTMLとして編集]をクリックします。

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

step
2HTMLタグの挿入
<p>と</p>の間に、次のHTMLタグを挿入します。
アンダーラインのHTMLタグ
<span style="text-decoration: underline;"> アンダーラインを引きたい文字</span>
「アンダーラインを引きたい文字」部分にアンダーラインが引かれるので、任意の文字に変更してくださいね。


step
3ブロックをビジュアル編集モードに戻す
最後に「ビジュアル編集」モード(通常ブロック)に戻します。
[オプション(・・・が3つ並んでいるところ)]-[ビジュアル編集]をクリックします。

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

ブロックから直接編集する方法は以上です。
もう一つの方法は「コードエディター」を使った方法になります。
コードエディターからアンダーラインを引く方法
step
1コードエディターを開く
アンダーラインを引きたい文字を入力後
記事投稿画面の右上の[オプション(・・・が3つ並んでいるところ)]-[コードエディター]をクリックします。

step
2HTMLタグの挿入
1つ目の方法と同じように、アンダーラインを引きたい文字の<p>と</p>の間に、次のHTMLタグを挿入します。
アンダーラインのHTMLタグ
<span style="text-decoration: underline;"> アンダーラインを引きたい文字</span>

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

どちらの方法でもアンダーラインを引くことが可能なので、自分の好みに合うほうを使ってみてください!
まとめとAFFINGER6の蛍光ペン風マーカーの紹介

WordPressブログでのシンプルなアンダーラインの引き方は以上になります。
使う場面は限定的かもしれませんが、覚えておいて損はないと思います!
最後にアンダーライン繋がりで、このブログで使用中のテーマ「AFFINGER6」で使える蛍光ペン風マーカー機能を少しだけご紹介。
シンプルなアンダーラインよりも使う場面が多い、蛍光ペン風マーカーですが、無料テーマだとプラグインを使ったりCSSを編集する必要がありますよね。
しかし、AFFINGER6なら標準機能で搭載!
さらにプラグインも不要なので、プラグインのせいで重くなりがちなWordPressブログへの影響もありません。
使い方はとても簡単で、文字入力後にボタンを一度クリックするだけ!
ちなみにAFFINGER6では、次のような蛍光ペン風マーカーが使えます。
- マーカーA
- マーカーB
ワンクリックで2色が使用可能、さらに色も設定から好きな色に変更可能です。
その他にも、あなたの記事作成を劇的に時短してくれる便利機能が満載なので、興味があればAFFINGER6を一度チェックしてみてくださいね。
\ 期間限定5,000円相当のプラグイン付き/
少しでも参考になれば幸いです。
ありがとうございました。