Gutenbergの機能だけでアンダーラインを引く方法

技術メモ

WordPressのGutenbergを使い始めて、ブロック内の任意の文字列をイタリック体にすることは出来るけど、なぜかアンダーラインを引くオプションはありません。いろいろ探したけど、巷の主流の解決法は「プラグインを入れる」みたいなのばっかりだったので、下線だけのためにわざわざプラグインをインストールするのは抵抗ある…と思って調べてたら、驚きの方法があったのでメモ。

まず、Gutenbergになってからアンダーライン機能が意図的に外されている理由として、「文章に下線を引くと、見た目がリンクと紛らわしい」という問題があるとのこと。それは確かにそうかもしれません。

だけどGutenbergから完全にアンダーライン機能が除外されている訳ではなくて、特定のブラウザで以下のショートカットを使うと、任意の文字列にアンダーラインを引くことができることが判明!

Windowsの場合:Ctrl+U
Macの場合:⌘+U

Chromeでやったらあっけなく下線が引けてびっくり。ただし、FirefoxやIEではこのショートカットは通用しないとのことです。

FirefoxやIEでアンダーラインを引く方法

もしFirefoxやIEで対応する場合は、ちょっとベタですが該当箇所をHTMLで編集する必要があるそうです。

まず該当するブロック内で、右上のオプション(縦に点が3つ並んでるボタン)をクリックし、「HTMLとして編集」を選択。すると、ブロック全体がHTML表示されるので、選択したい文字列を以下のように<span>タグで囲み、下線用のCSSをベタで追記すればよいらしいです。

<span style=”text-decoration: underline;”>選択した文字列</span>

すると、このようにアンダーラインが引けるようになります。

HTMLむき出しのブロックの見た目がイマイチだと思うなら、もう一度オプションボタンをクリックして「ビジュアル編集」に戻してやれば問題ありません。

やってみた感想

Chrome上で使えた下線ショートカットは大変便利だったので言うことなしです。というかGutenbergの隠れ機能としてアンダーライン機能が温存されていたというのが嬉しかったかも。(あやうくstyle.cssを改修してイタリック機能を強制的にアンダーラインに変更するという無茶をやるところでしたが、余計なことをしなくてよかったと思いました)

一方、FirefoxやIEでベタなHTML編集が必要になるやり方は、多少HTML+CSSの知識が必要なので万人向けではないかも知れません。そこのところは、単に「アンダーラインが引きたい」という目的だけのために、余計な機能てんこ盛りのプラグインを増やす煩わしさと天秤にかけて判断すると良いと思います。

ソースはこちら:How To Underline Text In WordPress Gutenberg Editor

にほんブログ村 ブログブログ WordPressテーマへ
にほんブログ村 「WordPressテーマ」ランキング参加中です。ポチッと応援お願いします♪

コメント

この記事へのコメントはありません。

naochka

長年IT業界でWeb+デザインをやってました。いまはWordPress中心です。やや技術的な話が多いですが、なぜか世界中あちこち放浪してた関係でたまに想い出を綴ってたりもします。 Wall Street Journalを読む会の英語ナビゲーターやってます。(実は帰国子女)

最近の記事

  1. [名刺デザイン] シンプルだけど個性的なオンオフ兼用名刺

  2. 第9回 Wall Street Journalを読む会:金融引き締めでも現金を有利に働かせるには

  3. [WordPress] マルチサイト導入から解除まで④:マルチサイトを解除して親サイトも完全削除

  4. [WordPress] マルチサイト導入から解除まで③:プラグイン管理、サイトの複製と削除

  5. [WordPress] マルチサイト導入から解除まで②:子サイトの追加とテーマの扱い方

カテゴリー

アーカイブ

TOP