Houn

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

詳しく見る
WordPress

公開日:2022.07.02

更新日:2023.06.14

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

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

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

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

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

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

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

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

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

文字を選択した状態で

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

を押すだけです。

文字に下線が引かれた

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

ソースコードを見る

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

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

段落ブロックのHTML

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

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

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

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

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

できました!

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

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

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

選択した文字だけspanタグで囲って、スタイルが当てられていますね。

あなたのWordPressは安全・快適ですか?

サイト引越し屋さんと提携!WordPress移転代行はお任せください
  • サイト表示が遅く、サーバーを切り替えたい
  • 管理画面に警告が出ているが、どうしたら良いか分からない
  • テーマを安全に切り替えたい
  • カスタマイズをしたいetc.

当事務所は利用者数No.1、2,000サイトを超える対応実績を持つ「サイト引越し屋さん」と提携しております。
お気軽にご相談ください。お見積りは無料です。

詳細ページ:【特典あり】サイト引越し屋さんと提携!WordPress移転代行はお任せください

パソコン機能としてのショートカットキー

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

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

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