ワードプレス　Gutenberg（ブロックエディター）で文字装飾

2021年4月26日

ワードプレスのGutenberg（ブロックエディター）は『文字装飾がしにくい』とよく聞きます。

クラシックエディターでは簡単にできた文字単位の装飾がやりにくい、と。

そこで本記事では、ブロックエディターでの文字装飾について解説します。

※この記事は、2021年3月のワードプレスversion5.7へのアップデートにより、2021年4月にリライトしました。

なお、文字装飾ではなくおしゃれな装飾ボックス（囲み枠）の作成方法については、次の記事を参照ください。

前提条件

文字装飾は、プラグインやテーマによっても機能が異なります。
そこで、次のようにデフォルトに近い環境で文字装飾を実施してみます。

• テーマはTwenty Twentyを使用。
• プラグインはまずは何もなし。記事の後半にプラグインを導入します。

このほか、ブロックエディターの基本的な使い方については次の記事もご参考ください。

ブロック単位での文字装飾

ブロックエディターは、ブロック単位で文字サイズや文字色などの装飾ができるのが特徴です。

ブロック単位の装飾は、原則として画面右に表示されるブロックパネルを使用します。
（ブロックパネルというのは、画面右の情報パネルがブロックタブに切り替わった状態です。）

目的のブロック内にカーソルを置くと、パネルのタブが”文書”から”ブロック”に自動的に変化してブロックパネルとして表示されます。

ブロック単位で文字サイズを変更

ブロックパネルの”プリセットサイズ”をクリックして、文字サイズを変更することができます。

特大・大・通常・小の中から選択するか、カスタムサイズをクリックしてサイズを指定します。

ブロック単位での色変更

ブロックパネルの”色設定”をクリックすると、文字色および背景色の選択をすることができます。

テーマTwenty Twentyの場合、デフォルトでは下記のように選択できる色は少ないので、カスタムカラーをクリックしてカラーパネルで設定、またはカラーコードを入力すればよいでしょう。

下記は背景色をカラーコード”#04f9f0”に設定しました。

ドロップキャップ

ブロックパネルでドロップキャップをONにすると、段落ブロック内の最初の文字が大きく表示されます。

ブロックエディターの文字単位での装飾

文字単位の装飾は、原則としてブロック内ツールバーで設定することになります。

『原則として』というのは、プラグインによっては画面右のブロックパネルで文字単位の装飾ができることがあるからです。

ブロックエディターでの文字単位の太字化

段落ブロックで、太字化したい文字を選択して、ブロック内編集ツールの太字（”B”）をクリックします。

ブロックエディターで文字単位でイタリック文字化

段落ブロックで、イタリック化したい文字を選択して、ブロック内編集ツールのイタリックをクリックします。

デフォルトでできる文字単位装飾は少ない

以上のように文字単位の装飾はブロック内のツールバーで実施するのですが、そもそもこのツールバーでできる文字装飾機能が乏しい、というのがブロックエディターのウィークポイントです。

下図が段落ブロックのツールバーですが、先に紹介した”B（太字）”、”I（イタリック文字）”のほかの文字装飾としては、下矢印部をクリックして開くと現れる、”インライン画像”、”上付き”、”下付き”、”取り消し線”、”文字色”のみとなります。

実はまだこれでも装飾機能は増えたほうで、ブロックエディターがリリースされた2018年末の頃には、B（太文字）とI（イタリック文字）以外はほとんど装飾機能はない状態でした。

でもまだまだ足りませんよね。

ブロックエディター完全対応のテーマを使う

解決策の１つは、ブロックエディター完全対応のテーマを使う、ということです。

現在はほとんどのテーマで一応Gutenbergは使えるようになっていますが、準備されている機能にはばらつきがあります。

有料テーマでもクラシックエディターが推奨されているテーマの場合は、ブロックエディターの文字装飾機能はあまり準備されてません。

そこで、ブロックエディターを使いたくて今からテーマを新規検討するのであれば、ブロックエディター完全対応のテーマを使うようにしましょう。

無料テーマでもLuxeritas、Cocoon、Lightning（専用プラグインとのセットの場合）では、ブロックエディター完全対応されています。

Luxeritasの段落ブロックツールバー

例えばLuxeritasの場合、段落ブロックのツールバーは以下の通りです。

この恩恵で、この記事もストレスなく文字装飾できています。
若干ツールバーが横長すぎて、カラムブロックで右側のカラムに入力時、本文入力エリアからはみ出ることがあるくらいです。

Cocoonの段落ブロック文字装飾

Cocoonの場合も装飾が豊富に準備されています。

LuxeritasもCocoonも無料なのにすごい対応だと思います。

有料テーマのブロックエディター完全対応で私のおすすめは、SWELLとSTORK19です。
おすすめ理由は、どちらもブロックエディター完全対応だけでなく、SEOに強い構造かつ高速表示だからです。

文字装飾機能をプラグインで強化する

『使用しているテーマが完全対応でない、でもブロックエディターを使いたい』
こんな場合はプラグインの登場です。

ブロックエディターの強化プラグインはさまざま登場していますが、どちらかというとブロックの種類を増やすものが多く、文字単位の装飾を強化したものは、さほどないように思えます。

その中で私の一押しは、以下のプラグインです。

プラグインSnow Monkey Editorをインストール・有効化すると、段落ブロックのツールバー内にモンキーマークが追加されます。これをクリックすると様々な文字装飾機能が使えます。

文字色のほか、文字サイズ、文字背景色や蛍光ペンも使えます。これだけあれば、ブログ記事の装飾には困らないでしょう。

ただLuxeritasやCocoonを使う場合に比べると、”モンキーマークをクリックするというひと手間が増える”点では若干作業ロスかな、と思います。

クラシックブロックを使う方法もある

文字単位での文字装飾は、クラシックブロックを使用する方法もあります。

クラシックブロックの選択方法は以下の通りです（画面左上の+マークから始める）。

クラシックブロックに文字入力すれば、クラシックエディターと同じツールバーがブロック内に表示されます。

このツールバーには、クラシックエディターの機能強化で有名なプラグインAdvanced Editor Tools（旧TinyMCE Advanced）による機能強化も反映されます。

これであれば、文字単位で文字サイズや文字色を編集することが簡単ですね。

クラシックブロックはブロックとしては特異

このように、クラシック要素のブロックは、文字の装飾をするうえでは、非常に便利です。
しかし、これって、クラシックエディターを使うのと何が違うのだろう、という疑問が出ますよね。

実際、クラシック要素にしてしまうと、画面右のブロックパネルでは何も操作できません。

段落ブロックで可能だったブロック単位での文字サイズや文字色・背景色の設定ができない、ということですね。

クラシックブロックは、昔のクラシックエディターの機能を無理やり持ってきているがために、ブロックエディターならではのブロック単位での編集機能が使えないのです。

この場合、例えばカバーブロックやカラムブロックなど、ブロックエディターならでは機能を持ったブロックとのコラボがしにくくなります。ブロック単位で背景色をコントロールできないとデザイン的自由度も減ってしまうのですね。

したがって、クラシックエディターは、クラシックエディターで作成した記事をブロックエディターで編集するときなど、特異な用途として使うもの、と考えておきましょう。

まとめ

ブロックエディターの段落ブロックでの文字装飾は次のように考えましょう。

• ブロック単位の装飾には、画面右のブロックパネルを使用する
• 文字単位の装飾には、ブロック内ツールバーを使用する
• 文字単位の装飾機能は、ブロックエディター完全対応のテーマが使いやすい
  （おすすめ：Luxeritas,Cocoon,SWELL,STORK19）
• 文字毎装飾をテーマが対応していない場合、プラグインで強化する
  （おすすめ：Snow Monkey Editor）
• クラシックブロックならクラシックエディターと同等の文字装飾が使えるが非推奨
  （ブロック単位での操作ができないため）

文字単位の装飾でなく、ブロックの代表的な装飾である囲み枠の作り方は、次の記事がおすすめです。