ブロックエディターで部分的に文字色を変更したい時「Advanced Rich Text Tools for Gutenberg」

2020 3/06

2019.11.02 2020.03.06

WordPress5から登場した新しいエディターのブロックエディターですが、それ以前のエディターのクラシックエディターを使っていた人だと「どうすりゃいいんだよ！」って思うのが、部分的に文字色を変更したい時です。

クラシックエディターでの文字色の変更

以前のWordPressエディターでしたら上のスクリーンショットのように色を付けたいテキストを選択してエディターのツールバーから簡単にできました。

ブロックエディターだとブロックごとの文字色の変更しかできない

新しいWordPressのエディター、ブロックエディターでは選択したテキストだけでなくブロックごとの文字色の変更しかできません。これはちょっと不満ですね…(｡-_-｡)

ブロックエディターでの部分的な文字色変更方法

それでは、ブロックエディターで部分的に文字色を変更する方法を解説しましょう。

HTML編集する

ブロックエディターもHTML編集が可能です。ブロック上部の一番右の詳細設定アイコンをクリックし「HTMLとして編集」をクリックすると、

<p>テスト投稿の本文テキストテスト投稿の本文テキストテスト投稿の本文テキストテスト投稿の本文テキストテスト</p>

こんな感じに表示されます。これを…

<p>テスト投稿の本文テキストテスト投稿の本文テキスト<span style="color: #ff0000;">テスト投稿の本文テキスト</span>テスト投稿の本文テキストテスト</p>

と書き換えると…

こんな感じに部分的に文字色を変更できます。
ただまぁ…

面倒くさいですね(￣□￣;)!!

クラシックブロックを使う

ブロックエディターの様々なブロックの中には「クラシック」というブロックがあります。これをクリックすると…

こんな風にブロックエディターの中にクラシックエディターを入れることが出来ます。便利なようですが、文字色をいろいろ変更したい人だとクラシックブロックばかりになり…

クラシックエディターのままでいいんじゃね？

ってことになりそうです。(´･ω･`)

プラグイン「Advanced Rich Text Tools for Gutenberg」を使う

それではもう一つ、プラグインを活用する方法です。部分的に文字の色を変更するためのプラグイン「Advanced Rich Text Tools for Gutenberg」を活用しましょう。

Advanced Rich Text Tools for Gutenbergのインストール

WordPress管理画面（ダッシュボード）左側のメニュー「プラグイン」→「新規追加」をクリック。
「Advanced Rich Text Tools for Gutenberg」を検索。
「今すぐインストール」をクリック。
インストール完了後「有効化」をクリック。

このプラグインには設定項目はありません。プラグインをインストール、有効化してから投稿、固定ページの編集画面を見てみましょう。

左側の設定メニューに文字色を変更できるメニューが追加されました。

Inline Text Colour

選択した（文字）テキストのカラーを変更します。

Inline Background Colour

選択した（文字）テキストの背景色を変更します。

Remove Formatting

ブロック内の設定した内容をすべてクリアします。

WordPressのテーマはやっぱり国産テーマが安心！

WordPressのインストールは最近ではレンタルサーバー会社の「簡単インストール機能」などでだれでも簡単にできるようになりましたが、そこからのデザインがやっぱり悩みどころ。プラグインも何を使ったらよいのかわかんないし、解説サイトが英語表記というのもよくあるケースです。そして、

WordPressなんてムリだ…

なんていう残念な結論を出して、挫折してしまう方がとても多いです。
せっかく独自ドメイン取得したのに…
せっかくレンタルサーバー契約したのに…
せっかくWordPressインストールしたのに…
です。

WordPressのデザインを決めるものが「テーマ」であることは理解したと思いますが、どのテーマを選べばよいのかわからない…ダッシュボードのテーマの新規追加を試みても種類が多すぎるし、解説は英語だし、有効化してもよくわかんないし…

国産（日本語）のWordPressテーマを導入しよう

WordPressのダッシュボードからテーマを新規追加しようと探しても日本語のものはまず見つかりません。世界中のユーザーから見れば日本語なんて希少言語なので仕方ありません。日本語サイト向けのWordPressテーマはいくつもあります。それらの日本語サイト向けWordPressテーマはそれぞれのテーマ開発者のサイトなどで公開、販売されています。

日本語サイト向けWordPressテーマは有料のものも多いですが、有料であるからこそサポート体制も充実しています。多くの有料の日本語サイト向けWordPressテーマでは日本語での丁寧なサポートに対応しています。何をインストールすればよいかよくわからない「プラグイン」も不要だったり最小限の利用で済んだりします。以下に挙げる日本語サイト向けWordPressテーマは当サイトがおススメするWordPressテーマです。