インラインで文字色を変えるAdvanced Rich Text Tools for Gutenberg
WordPressのブロックエディタ「Gutenberg」を使っていて、部分的に文字色を変えたい時がありますよね。ここは強調したい、目立たせたいと思っても、デフォルト仕様のままだとブロックごとでしか文字色が変えられません。仕方がなく太字(B)にして我慢する方もいることでしょう。
「Advanced Rich Text Tools for Gutenberg」というプラグインを使えば、特定の文字だけを選択してこのように文字色だけでなく、背景色も変えることができます。
それだけでなく、H2Oのような「下付き文字（subscript）」、m2のような「上付き文字（superscript）」も表現できるようになります。
これらの文字装飾が簡単に作成されるので、ライティングに際してのストレスが減り、読む人にも親切で違和感のない文章がスラスラ書き進められます。
それでは、プラグイン 「Advanced Rich Text Tools for Gutenberg」の設定方法を図解入りで解説していきましょう。
※今回はその性格上、文字のカラー設定をいろいろ変えています。ご了承ください。
プラグインをインストールします
WordPressのダッシュボードを開いてください。
左側のサイドバーからプラグインを選択し、「プラグインを追加」します。
プラグインの追加画面右上に表示される「キーワード」窓に Advanced Rich Text Tools for Gutenberg と入力します。すると、目的のプラグインが下部にすぐ現れます。アイコンとプラグインの名前、簡単な説明と作者名が並んでいます。その下には評価を示す☆印、五つ星ですね。
このまま「今すぐインストール」をクリックしてください。
「詳細情報」を開くとバージョン情報などが書かれた画面になります。機能の具体的な説明もこちらに示されています。
- 行内にコードを追加して入力する、下付き文字、上付き文字のボタンを書式設定のツールバーに追加
- インラインテキスト色・背景色の設定パネル追加
- 書式解除ボタンの追加
という3つの機能があることがわかります。
インストールは数秒で完了します。成功するとプラグイン追加画面に表示されていた「今すぐインストール」の文字が「有効化」に変わります。クリックして有効化しましょう。
すぐに有効化されます。インストールしているプラグイン一覧画面に変わりますので、一番上にいまインストールした Advanced Rich Text Tools for Gutenberg があることを確認してください。
「無効化」と「自動更新の有効化」もここで操作できます。
使ってみましょう
何か文字を打ちこんで、書式設定ツールバーを表示してみます。
ドロップ表示される項目の中に、「コード」「上付き」「下付き」が追加されているのがわかりますでしょうか。
文字の「上付き」「下付き」設定
デフォルトの状態では、上付き・下付きのような小さな文字の表示が、インライン(文中)ではできませんでした。ですから、水の化学式は「H2O」としか書けません。同様に「平方メートル」も「m2」となってしまいます。
このプラグインがインストールされていれば、この「文字を部分的に小さく、上か下に表示する」ニーズに応えられます。
上に示した画像のように小さくしたい文字を選択した状態で、文字設定ツールバーをプルダウンし、「上付き」または「下付き」を選んでください。
H2Oもm2も、自然な表記にできました。
こんな使い方もできます。注：使い方は工夫次第
ただし多用しすぎると※うるさくなるので要注意
文字色と背景色を変える
次は文字の色を変えていく工程です。デフォルトで右に表示されている設定パレットを使うと、文字を部分的に選択していたとしても、そのブロック全体の色が上図のように変わってしまいます。
ブロックの設定パネルをスクロールしてみてください。
「Inline Text Colour」と「Inline Background Colour」という項目が追加されています。
色を変えたい文字の部分を選び、 「Inline Text Colour」 をクリックします。カラーパレットが表示されるので、任意の色を選択してください。これだけでOKです。
背景色についても操作方法は同じです。 「Inline Text Colour」の下に表示されている「Inline Background Colour」を使って、カラーを選択してください。
部分的な文字色変更の設定ができました。H2Oは文字色赤に、m2は背景色イエローになっていますね。
最初の状態では、文字色も背景色も初期設定の12色がパレットに並んでいます。実は、ここにない色も使うことができます。
「この色じゃないんだよな」と思ったら、「カスタムカラー」をクリックしてください。別窓が開き、グラデーションのパラメータと16進数指定で独自色の適用ができるようになっています。この機能はうれしいですね。
ただし、ここで選択したカラーが実際にどのように見えているか、プレビューで確認するようにしましょう。色によってはかえって視認性・可読性が損なわれる場合があります。
設定を元に戻す
Inlineカラー指定パネルの下をスクロールしてみてください。「Remove Formatting」という項目が見えますね。
もしここで説明したような文字の色付け、背景色の色付け、上付き・下付き表示などを解除したい場合は、その部分をカーソルで選択した状態で、青文字で表示されている「Remove Formatting」ボタンを押してください。
設定する前の元の状態に戻ります。
まとめ
Advanced Rich Text Tools for Gutenberg は、使いやすくシンプルなプラグインです。設定と使い方も簡単、入れておくととても便利です。このプラグインの主な機能は
- 文字の「上付き」「下付き」表示ができる
- 文字の表示色を部分的に指定できる
- 文字の背景色を部分的に指定できる
- 設定解除がワンボタンで行える
というものです。
WordPressは日々進化し、バージョンアップするCMSです。
いずれ部分的な文字装飾も、プラグインに頼らずデフォルトでできるようになるかもしれません。
ただ、 Advanced Rich Text Tools for Gutenbergを用いた文字装飾の効果は、プラグインを無効化しても残ります。
したがって、このプラグインでインラインの装飾を行い、WordPressデフォルトで部分装飾の機能が追加された際にこのプラグインを無効化しても、効果が消えることはありません。
安心して効果的なブログやwebサイトの編集・制作にお役立てください。