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

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

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

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

詳細はこちら

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

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

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

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

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

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

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

この記事でわかること

Gutenberg(ブロックエディター)で文字装飾をしていきます。

ブロック単位でできる文字装飾
(文字サイズ、色の変更、ドロップキャップ)

文字単位でできる文字装飾
 ・デフォルト設定でできる文字装飾(太字化、イタリック文字など)
 ・デフォルト以外で文字装飾を強化する方法(対応テーマやプラグインを使う)
 ・クラシックブロックを使う方法(非推奨)

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

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

目次

前提条件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブロック単位での色変更

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

テーマ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の組み合わせでの表のほうが、若干高機能なのです。

まとめ

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

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

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

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

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

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