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

カテゴリー:WordPressプラグインガイド

Advanced Rich Text Tools for Gutenberg

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

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

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

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

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

ブロックごとの文字色の変更しかできません

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

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

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

HTML編集する

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のインストール

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

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

部分的な文字色の変更が可能に

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

Inline Text Colour

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

Inline Background Colour

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

Remove Formatting

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

こんな記事が良く読まれています

こういう人はホームページ公開、運営で失敗しやすい

ホームページ作成前に...

これまでホームページを公開したことない、運営したことないという方にとって果たしてこれから作成するホームページが効果あるものとなるのかどうかはとても不安に思われることだと思います。実際、ホームページを公... もっと見る

WordPressを簡単にインストールできるレンタルサーバー【1】

レンタルサーバーガイド

WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る

お名前.comでドメインを取得しよう

ドメイン取得と各種設定

ドメインの取得はレンタルサーバー会社でも取得できますが、一般的に割高であったり、将来サーバーを移転することがあったりした場合手続きが煩雑になる場合もあります。ドメインとサーバーは別々に契約しておくと管... もっと見る

WordPressを簡単にインストールできるレンタルサーバー【2】

レンタルサーバーガイド

WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る

さくらインターネット・レンタルサーバー

レンタルサーバーガイド

さくらインターネットのレンタルサーバーははじめてレンタルサーバーを借りる人でも料金的にも安心なレンタルサーバーサービスです。そして、ビジネス利用にもしっかり対応できるプランまで5つのプランがあります... もっと見る

ブロックエディターでコピペで勝手に半角スペースが入って困るとき

WordPress投稿&固定ページ作成マニュアル

WordPressの新しいエディターブロックエディターを使っていると「おや?」と思うのが…「テキストをコピペするとその前後に半角スペースが勝手に入る」っていうこと。ブロックエディターでコ... もっと見る

HTMLは覚えたほうがいいのか?

ホームページ作成前に...

ホームページは「HTML」っていうもので書かれているということは自分でホームページを作ろうと思っている方なら知っていると思います。しかし「HTML」を知っているか?というとそうではない方が多いのも事実... もっと見る

WordPressで作成作業中のWebサイトを見られたくない時にする設定

WordPress(ワードプレス)

WordPressをインストールしたらまずは最初にやっておきたい設定がいくつかあります。まずは、WordPressで作成作業中のWebサイトを見られたくないと思ったときにしておく設定です。「制作中&... もっと見る

投稿の新規追加~ブロックエディターの基本

WordPress投稿&固定ページ作成マニュアル

WordPressの投稿、固定ページの作成画面はWordPress5のバージョンから「ブロックエディター」と呼ばれる画面になりました。長年WordPressに慣れ親しんできた方にはちょっと戸惑うほどの... もっと見る

リビジョンがどんどん保存されるのを制御しよう「WP Revisions Control」

WordPressプラグインガイド

リビジョンってなあに?WordPressには「リビジョン(Revision)」という機能があります。「Revision」を翻訳すると「改訂、改版、訂正、改正、加筆…」というような意味です。WordP... もっと見る