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

ワードプレスのGutenbergエディター(通称ブロックエディター)では、意外に文字装飾がしにくい、という声をよく聞きます。たしかに、以前のクラシックエディターでは簡単にできた文字単位の装飾ができないのでは?と思ってしまいます。

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

 

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

 

 

前提条件

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

・テーマは、Twenty Twentyを使用。

・プラグインは、まずは何もなしとします。記事の最後にプラグインを導入します。

・ブロックエディターへの切り替え許可
普段クラシックエディターを使用していて、ブロックエディターへの切り替え許可がされていない設定の場合は、ダッシュボードメニュー 設定>投稿設定 で、ブロックエディターへの切り替え許可をしてください。

このほか、ブロックエディターの基本的な編集方法として、次の記事もご参考ください。

記事:ワードプレス 初めてのブロックエディター(編集画面の各機能)

記事:ワードプレス Gutenberg(ブロックエディター)で記事作成

 

以下の解説本文では、特に断りのない場合は、段落ブロックを使用します。

 

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

ブロックエディターの特徴の1つとして、ブロック単位で文字サイズや文字色などの装飾ができることです。ブロック単位の装飾は、原則として画面右に表示されるブロックパネルを使用します。

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

段落ブロックのブロックパネル

 

そもそも画面右側に情報パネルが表示されていない場合は、画面右上の設定ボタンをクリックして表示してください。

情報パネルの表示・非表示切り替え

 

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

ブロックパネルの”プリセットサイズ”をクリックして、文字サイズを変更することができます。特大・大・通常・小の中から選択するか、カスタムサイズをクリックしてサイズを指定します。

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

 

ブロック単位での色変更

ブロックパネルの”色設定”をクリックすると、文字色および背景色の選択をすることができます。ただし、デフォルトでは下記のように選択できる色は少ないので、カスタムカラーをクリックしてカラーパネルで設定、またはカラーコードを入力すればよいでしょう。

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

ブロック単位での色変更

 

ドロップキャップ

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

ドロップキャップをON

 

ドロップキャップは、段落内の文字数が少ない場合はレイアウト崩れが起こったりしますので、使い方には注意しましょう。

 

 

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

文字単位の装飾は、原則としてブロック内ツールバーで設定することになります。原則として、というのは、プラグインによっては、ブロックパネルに文字単位の装飾ができる場合があるからです。

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

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

文字単位で太字化

 

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

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

文字単位のイタリック文字化

 

デフォルトでできる文字単位装飾

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

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

デフォルトの段落ブロック内ツールバー

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

 

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

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

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

プラグインsnow monkey editor

 

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

Snow Monkey Editorの装飾機能

 

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

 

 

 

 

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

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

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

ククラシックブロックの選択

 

クラシックブロックに文字入力すれば、クラシックエディターと同じツールバーがブロック内に表示されます。このツールバーには、クラシックエディターの機能強化で有名なプラグインTinyMCE Advancedによる機能強化も反映されます。

クラシックブロック

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

 

 

 

 

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

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

 

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

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

 

 

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

例えば、ブロックエディターには、画像と文字を重ねることができるカバーブロックなど、様々なコンテンツが作成できるブロックが用意されているのですが、このときの文字入力には、段落ブロックを使います。クラシックブロックは使用できません

すなわち、クラシックブロックに頼っては、ブロックエディターならではの高機能を利用することができないのです。

 

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

 

 

 

 

まとめ

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

  • ブロック単位の装飾には、画面右のブロックパネルを使用する
  • 文字単位の装飾には、ブロック内ツールバーを使用する
  • ブロック内ツールバーの装飾機能強化には、プラグインSnow Monkey Editorなどを使用する
  • クラシックブロッククラシックエディターと同等の文字装飾機能は使えるが、画像との組み合わせなど、他の高機能ブロックでは使用できない。したがって、基本的には使用しない。

 

 

 

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!

オンラインで開催して好評だったセミナー”ワードプレス100分体験セミナー(ブログサイト制作)”をamazonキンドルにて書籍化しました。

amazonページはこちら