Houn

WordPress

公開日:2022.07.02

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

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

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

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

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

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

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

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

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

文字を選択した状態で

  • WindowsならCtrl + U
  • Macなら⌘(Command) + U

を押すだけです。

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

ソースコードを見る

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

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

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

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

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

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

できました!

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

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

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

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

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

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

WordPressに関するご相談承ります

サーバーの移転(いわゆる”WordPressのお引越し”)や各種カスタマイズ。

また「管理画面に『更新してください』『サイトに重大な問題があります』と警告文があるがどうしたら良いか分からない」などといったメンテナンス面でのご不安ごとなど。

当事務所でお役に立てるかも知れません。ヒアリング・初回見積は無料です。

まずはいちどお気軽にご連絡ください。

ご相談・お問い合わせ