Houn

2022.07.02 WordPress

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

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

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

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

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

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

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

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

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

文字を選択した状態で

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

を押すだけです。

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

ソースコードを見る

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

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

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

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

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

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

できました!

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

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

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

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

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

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

WordPressに時間を取られすぎていませんか?

「ブログやるなら、HP持つならWordPress!と聞いて始めたけれど『これどうやるの?』のオンパレード。分からなくてググってみれば『下手なカスタマイズはサイトが真っ白になります』『ハッキングされるかも?』って、何それ?!なんかもういいや‥」

‥というあなたへ朗報です!

WordPressブログに関するトラブル解決の専門家「ブログサポーターがみたか」さんが提供されているサービス

が助けてくれます。

WordPressのトラブル対応やカスタマイズにお強く、これまでのべ1,000件以上の解決実績をもとに

  • 使い方が分からない
  • カスタマイズしたい
  • ブログ運用の仕方、WordPressの使い方が間違っていないか不安
  • ハッキングに遭ってしまった‥

などさまざまな要望・問題に、丁寧迅速に対応してくださいます(がみたかさんは10年近く前から存じ上げていますが、本当に丁寧で優しいです)

ブロガーさんなら記事を書くこと、事業者さんなら本来の業務が時間を割くべきことで、「WordPress、これどうやるの?」とググって悩んでいるのは時間の無駄です。

きちっと必要な部分には投資をして”餅は餅屋”に任せ、できた時間でしっかり本業に集中し、より大きな収益を生みましょう。

安心して、快適にサイトを運営するために、ぜひ活用してください。

Share on SNSシェア

お問い合わせ