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

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

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

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

 

 

前提条件

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

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

・プラグインは、まずは何もなしとします。ただし、記事の途中で、TinyMCE Advancedを使用します。

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

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

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

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

 

 

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

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

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

 

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

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

ブロックエディター 文字のイタリック化

 

 

ブロックエディターで文字サイズの変更(ブロック単位)

編集中ブロックの右側に表示される段落用のブロックパネルで、文字サイズのところをクリックして文字サイズを選択します。

ブロックエディター 文字サイズの変更(ブロック単位)

ただし、この方法では、ブロック単位でしか文字サイズを変更できません

 

 

ブロックエディターで色の変更(ブロック単位)

背景色や文字色をを編集できます。

ブロックパネルの色設定で、背景色文字色を選択すれば、ブロック単位で反映されます。

ブロックエディター 色の変更(ブロック単位)

 

もし、色がデフォルトの選択色以外にしたい場合は、カスタムカラーをクリックしてカラーパネルから設定します。カスタムカラーの設定

 

 

 

文字単位で文字サイズを変更する

ここから先は、プラグインTinyMCE Advancedをインストール・有効化しましょう。

TinyMCE Advancedについては、

記事:ワードプレス 初めての記事投稿(クラシックエディター)

でも紹介していますので、参考にしてみてください。

 

文字単位での文字装飾は、基本的には、ブロック要素の『クラシック』を使用します。

 

ブロック左の+マークをクリックして、ブロック要素の『クラシック』を選択します。

もしすぐに表示されない(よく使うもの の中にない)場合は、ブロック一覧をスクロールして、フォーマットの中から捜してください。

Classic Paragraphというブロック要素もありますが、これとは違いますので注意しましょう。

文字単位で文字サイズの変更

ブロックをクラシック要素にすると、上のように、ブロック内編集ツールに従来のクラシックエディターで見慣れたものが表示されます。これであれば、文字単位で文字サイズや文字色を編集することが簡単ですね。

 

実際、以下のように文字単位で文字サイズを編集できます。

クラシックブロックで文字サイズの編集

 

 

文字単位で色を変更する

文字単位での色の変更もブロックのクラシック要素で簡単です。

 

まず文字色を変更してみます。

文字単位での文字色変更

 

 

さらに、同じところの背景色を変更してみます。

 

文字単位での背景色変更

 

 

 

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

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

 

実際、クラシック要素にしてしまうと、ブロックパネルは下記のようになります。

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

クラシック要素のブロックパネル

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

 

 

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

実は、TinyMCE Advancedを有効化すると、段落ブロックのブロックパネルに、以下のように

FormattingText Colorという機能が追加されます。段落ブロックのブロックパネルの機能追加の

Formattingでは、文字単位で上付き文字下付き文字アンダーラインなどの装飾が可能です。

Text Colorでは、文字単位での文字色背景色の編集が可能です。

ブロックパネルでの文字単位の編集

でも残念ながら、文字単位での文字サイズの編集機能は、なぜかできないのです。

 

 

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

そこで、強引ですが、HTMLの中にfont-sizeのCSSを埋め込んで対処する方法を紹介します。

以下のように、HTMLとして編集を選び、編集したい文字を<span style=”font-size:〇px”></span>で囲めばよいのです。

段落ブロックで文字単位の文字サイズ編集

ちょっと強引ですが、もしものときに知っておくとよいでしょう。

 

 

まとめ

ブロックエディターでの文字装飾編集機能は、ブロック内編集ツールでの太字、イタリックを除くと、ブロック単位での編集となります。

・デフォルトの段落ブロックでは、文字サイズ、文字色、背景色がブロック単位での制御となる

・ブロックをクラシック要素とすると、クラシックエディターと同様の文字単位での編集機能が使用可能となる

・段落ブロックのままでも、TinyMCE Advancedを有効化すると、文字サイズ以外の装飾や文字色・背景色が文字単位で編集できるようになる

 

段落ブロックのままで、文字単位での文字サイズ編集をするには、強引にHTMLでの編集でfont-sizeのCSSを埋め込めば可能となります。もちろんこのような手段を使わずに、今後ブロックエディターの機能が強化されることを期待したいですね。

 

 

関連記事