Houn

記事内に広告を含む場合があります

詳しく見る
WordPress

公開日:2022.07.02

更新日:2024.05.12

WordPressブロックエディタで文字に下線(アンダーライン)を引く【簡単・プラグインなし】

WordPressのブロックエディタにおいて、文字に下線(アンダーライン)を引く方法です。

プラグインの追加などは不要で、簡単に実現できます。

広告

ブロックエディタ自体には下線を引く機能がない

まず、じつはブロックエディタ自体には「下線を引く」という機能がありません。

文字のツールバーを見ても、太字やイタリック、打ち消し線はあっても下線の項目はどこにも見当たらないですね。

段落ブロックのツールバー

ショートカットキーを使う

下線を引くにはショートカットキーを使います。

段落ブロックのテキスト選択状態
文字を選択した状態で
  • WindowsならCtrl + U
  • Macなら⌘(Command) + U

を押すだけです。

文字に下線が引かれた

とても簡単に下線が引けました。

ソースコードを見る

HTMLが分かるかた向けに、どういう状態になったのかソースコードを見てみましょう。

下線を引いたブロックに対して「HTMLとして編集」を選択すると、下図のようになっています。

段落ブロックのHTML

spanタグで囲って、style属性で「text-decoration: underline;」を指定してくれていますね。

広告

ブロック内の一部の文字にだけ引くことも可能

ブロック内すべてではなく、一部の文字に対してだけ下線を引くことも可能です。

一部の文字を選択した状態

目的の文字だけを選択状態にして、同じくショートカットキーを押します。

選択した文字に下線が引かれた

できました!

選択した文字に下線が引かれたHTML

ソースコードを見ると、選択した文字だけspanタグで囲って、スタイルが当てられていますね。

広告

まとめ〜Ctrl+Uはパソコン機能としてのショートカットキー

この方法は、言ってしまえば”パソコン機能としてのショートカットキー”ですね。

「なんだ、Ctrl + UならWordで使ったことあるよ!」というかたもいらっしゃるのではないでしょうか。

「TinyMCE Advancedプラグインを入れることで下線機能が追加できます」という解説記事もありますが、このためだけにインストールするという場合は不要です。