ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

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

前提条件

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

  • テーマは、Twenty Twentyを使用。
  • プラグインは、まずは何もなしとします。記事の最後にプラグインを導入します。
  • ブロックエディターへの切り替え許可
注意事項

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブロック単位での色変更

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

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

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

ブロック単位での色変更

ドロップキャップ

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

ドロップキャップをON

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

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

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

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

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

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

文字単位で太字化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プラグインsnow monkey editor

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

Snow Monkey Editorの装飾機能

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

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

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

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

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

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

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

クラシックブロック

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

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

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

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

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

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

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

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

私がクラシックエディターを使う場合というのは、表を挿入したいときです。

ブロックエディターにも表が挿入できるテーブルブロックが準備されていますが、機能が少なくて使いにくいのですね。

クラシックエディター+プラグインAdvanced Editor Toolsの組み合わせでの表のほうが、若干高機能なのです。

まとめ

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

  • ブロック単位の装飾には、画面右のブロックパネルを使用する
  • 文字単位の装飾には、ブロック内ツールバーを使用する
  • 文字単位の装飾機能は、ブロックエディター完全対応のテーマなら使いやすい
  • ブロック内ツールバーの装飾機能強化には、プラグインSnow Monkey Editorなどを使用する
  • クラシックブロックならクラシックエディターと同等の文字装飾機能は使えるが、ブロック単位での装飾がないため、ブロックエディターならではの機能を活かせない
書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる