ブロックエディターで部分的に文字色を変更したい時「Advanced Rich Text Tools for Gutenberg」
カテゴリー：WordPressプラグインガイド
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でWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る
お名前.comでドメインを取得しよう
ドメインの取得はレンタルサーバー会社でも取得できますが、一般的に割高であったり、将来サーバーを移転することがあったりした場合手続きが煩雑になる場合もあります。ドメインとサーバーは別々に契約しておくと管... もっと見る
WordPressを簡単にインストールできるレンタルサーバー【２】
WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る
さくらインターネット・レンタルサーバー
さくらインターネットのレンタルサーバーははじめてレンタルサーバーを借りる人でも料金的にも安心なレンタルサーバーサービスです。そして、ビジネス利用にもしっかり対応できるプランまで5つのプランがあります... もっと見る
ブロックエディターでコピペで勝手に半角スペースが入って困るとき
WordPressの新しいエディターブロックエディターを使っていると「おや？」と思うのが…「テキストをコピペするとその前後に半角スペースが勝手に入る」っていうこと。ブロックエディターでコ... もっと見る
HTMLは覚えたほうがいいのか？
ホームページは「HTML」っていうもので書かれているということは自分でホームページを作ろうと思っている方なら知っていると思います。しかし「HTML」を知っているか？というとそうではない方が多いのも事実... もっと見る
WordPressで作成作業中のWebサイトを見られたくない時にする設定
WordPressをインストールしたらまずは最初にやっておきたい設定がいくつかあります。まずは、WordPressで作成作業中のWebサイトを見られたくないと思ったときにしておく設定です。「制作中&... もっと見る
投稿の新規追加～ブロックエディターの基本
WordPressの投稿、固定ページの作成画面はWordPress5のバージョンから「ブロックエディター」と呼ばれる画面になりました。長年WordPressに慣れ親しんできた方にはちょっと戸惑うほどの... もっと見る
リビジョンがどんどん保存されるのを制御しよう「WP Revisions Control」
リビジョンってなあに？WordPressには「リビジョン（Revision）」という機能があります。「Revision」を翻訳すると「改訂、改版、訂正、改正、加筆…」というような意味です。WordP... もっと見る
