AFFINGER WordPress

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

悩む人

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として編集モードの仕方

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

HTML挿入ブロック

step
2
HTMLタグの挿入

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

アンダーラインのHTMLタグ

<span style="text-decoration: underline;"> アンダーラインを引きたい文字</span>

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

ゆいて
HTML挿入ブロック

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

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

[オプション(・・・が3つ並んでいるところ)]-[ビジュアル編集]をクリックします。

HTML挿入ブロックをビジュアル編集に戻す方法

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

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

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

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

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

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

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

コードエディターの入り方

step
2
HTMLタグの挿入

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

アンダーラインのHTMLタグ

<span style="text-decoration: underline;"> アンダーラインを引きたい文字</span>

コードエディターからのHTMLタグの挿入方法

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

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

コードエディターの終了方法

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

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

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

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

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

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

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

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

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

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

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

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

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

\ 期間限定5,000円相当のプラグイン付き/

>>AFFINGER6をチェック

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

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

ブログランキング・にほんブログ村へ


-AFFINGER, WordPress