公開日:2022.07.02
更新日:2023.06.14
WordPressブロックエディタで文字に下線(アンダーライン)を引く【簡単・プラグインなし】
WordPressのブロックエディタにおいて、文字に下線(アンダーライン)を引く方法です。
プラグインの追加などは不要で、簡単に実現できます。
ブロックエディタ自体には下線を引く機能がない
まず、じつはブロックエディタ自体には「下線を引く」という機能がありません。
文字のツールバーを見ても、太字やイタリック、打ち消し線はあっても下線の項目はどこにも見当たらないですね。

ショートカットキーを使う
下線を引くにはショートカットキーを使います。
文字を選択した状態で

- WindowsならCtrl + U
- Macなら⌘(Command) + U
を押すだけです。

とても簡単に下線が引けました。
ソースコードを見る
HTMLが分かるかた向けに、どういう状態になったのかソースコードを見てみましょう。
下線を引いたブロックに対して「HTMLとして編集」を選択しますと、このようになっています。

spanタグで囲って、style属性で「text-decoration: underline;」を指定してくれていますね。
ブロック内の一部の文字にだけ引くことも可能
ブロック内すべてではなく、一部の文字に対してだけ下線を引くことも可能です。
目的の文字だけを選択状態にして、同じくショートカットキーを押します。

できました!

ソースコードは、こうなっています。

選択した文字だけspanタグで囲って、スタイルが当てられていますね。
あなたのWordPressは安全・快適ですか?

- サイト表示が遅く、サーバーを切り替えたい
- 管理画面に警告が出ているが、どうしたら良いか分からない
- テーマを安全に切り替えたい
- カスタマイズをしたいetc.
当事務所は利用者数No.1、2,000サイトを超える対応実績を持つ「サイト引越し屋さん」と提携しております。
お気軽にご相談ください。お見積りは無料です。
パソコン機能としてのショートカットキー
この方法は、言ってしまえば”パソコン機能としてのショートカットキー”ですね。
「なんだ、Ctrl + UならWordで使ったことあるよ!」というかたもいらっしゃるのではないでしょうか。
「TinyMCE Advancedプラグインを入れることで下線機能が追加できます」という解説記事もありますが、このためだけにインストールするという場合は不要です。