WordPress | Gutenbergで指定範囲の文字色・背景色を変更する

2021-06-03WordPress Gutenberg,WordPress

「Gutenberg」は慣れてくると十分に使いやすいエディタではありますが、WordPress5.1現在ではまだデフォルトの機能面でカバーできていない部分もあります

中でも文字列の指定範囲の文字を部分的に文字色・背景色・サイズを変更出来ないのは、ブログ記事として結構困りものですね

WordPressもGutenberg関連の機能向上は色々追加している感じで少し待っていましたが、5.2のベータ版でも特定の文字に対して色・サイズの変更機能は確認できませんでした

プラグインで対応する

目的の部分的な文字色・背景色・サイズを変更を追加できる機能を持ったプラグインもあります

TinyMCE Advanced

旧エディタでも人気だったエディタ拡張プラグイン「TinyMCE Advanced」もGutenbergに対応してきております

ブロック編集でのインライン文字の色・背景色の変更機能はインストール・有効化するとエディタのブロックメニューに「Text Color」項目が追加されます

TinyMCE Advanced色指定ビュー

この機能でテキスト色を指定した場合、以下のHTMLコードが書き出されます

<span style="color:#ff6900" class="tadv-color">テキスト</span>

span styleで色コードが指定され、class名にTinyMCE Advancedの独自クラス「tadv-color」が入ります
「tadv-color」はTinyMCE Advancedが有効化状態でも特にCSSでは定義されていません

Advanced Rich Text Tools for Gutenberg

「Advanced Rich Text Tools for Gutenberg」というプラグインでも同機能に対応可能となっております

「Advanced Rich Text」をインストール・有効化するとエディタのブロックメニューに「inline Text Colour」と「inline BackgroundColour」項目が追加されます

インライン文字の色を変更すると、以下のHTMLが入ります

<span style="color:#ff6900" class="color">テキスト</span>

span styleで色コードが指定され、class名に「color」が入ります

「color」もデフォルトではCSSで定義されていないクラス名です

使うならどちらのプラグインが良いのか

「Gutenberg」では現状ブロック単位（<p>）での色指定しかできませんが、パレットに指定されている色指定の場合は各色毎に定義されたCSSクラス名が入ります

<p class="has-luminous-vivid-orange-color">テキスト</p>

カラーピッカーから色を選択した場合はspan styleで色コードが指定されます

<p style="color:#368cb1" class="has-text-color">テキスト</p>

結局はstyle属性でカラーコード指定となるなら「TinyMCE Advanced」も「Advanced Rich Text Tools for Gutenberg」も生成されるHTMLは似た感じですね

どちらも後にプラグインを停止・削除しても記事を編集する必要はないのは救い

「TinyMCE Advanced」は「tadv-color」なんてプラグイン固有のクラス名が残るのは気分的にちょっと嫌ですかね

個人的には、「TinyMCE Advanced」はクラシックエディタからの機能が多く搭載されていて、クラシックエディタモードを使わないのであれば、完全に機能過多感があります

「Gutenberg」でのアップデートを待ちつつ「Advanced Rich Text Tools for Gutenberg」を使っていこうかなという感じですね

WordPress Gutenberg,WordPress

Posted by Yousuke.U