ブロックエディターで文字サイズや文字色を変更する。

ABOUTこの記事をかいた人

兵庫県加古川市在住の3児の父親です。
・ブログのサポート(月額会員制スポット
・某コミュニティの技術サポート
オルゴナイトのネットショップ店長

アニメやマンガ好きで、子供の影響か?ギターの練習を再開しましたw

口座やカードの自動取り込みが優秀すぎて、隙間時間に仕訳ができておすすめです^^

 

フリーランスの支払いトラブルを未然に防止


どうも、がみたか(@gamitaka02)です!

WordPressの編集画面が旧エディター(Classic Editor)からブロックエディター(Gutenberg)になることで、いくつか変更になった設定項目があることが使っていくうちにわかってきました。

その中のひとつとして、今回は「文字サイズと文字色の変更」について備忘録として残しておきたいと思います。

偉大な冒険家
今回もサクッと読める記事に仕上がってるぜw

ブロックエディターで太字にする。

ブログを書いていく上で、「太字(strong)」は割とよく使うのではないでしょうか?

ブロックエディターではテキストを選択して「B」のアイコンで太字にすることができます。

テキストを太字にする

ブロックエディターで文字サイズを変更する。

旧エディターでは、アイコンボタンの中で文字サイズを変更することができました(要プラグイン「Tiny MCE Advanced」)。

ビジュアルエディター(クラシックエディター)のボタン
がみたか
ブロック「クラシックの段落」を使うことで、旧エディターと同じようにテキストを装飾することはできるのですが、せっかくなのでブロックエディターでやっていきましょうw

1.テキストを選択する。

ブロックエディターでテキストを選択

2.右のメニューにある「ブロック」のタブを開くとこのようにサイズの数値が表示されます。

ブロックエディターの文字サイズ一覧

例として「36(大サイズ)」にするとこんな感じになります。

ブロックエディターの文字サイズを36(大)に設定

「サイズ」の横にあるアイコンをクリックすると「カスタム」になり、文字サイズを直接指定することができます。(例:100px)

ブロックエディターで文字色を変更する

こちらも文字サイズと同様、旧エディターではアイコンボタンから変更することができました。(要プラグイン「Tiny MCE Advanced」)

ブロックエディターでは文字サイズと同じように右のサイドバーから変更することができるので、やってみましょう^^

1.テキストを選択する。(標準は段落全体に適用されるため不要かも?)

テキストを選択する

2.右のサイドバーにある「色」を開き、変更したい色をクリックする。

変更したい色を選択する

3.「白とグレーの部分」をクリックするとカラーチャートが開き、より細かい色の指定ができます。(カスタムカラー)

ブロックエディターのカスタムカラー
偉大な冒険家
カラーコードを使った色の指定もできるぜ!

選択した文字だけを装飾する時はプラグイン「Snow Monkey Editor」を使う

上記の方法ではブロック全体に適用されるため、「選択した文字だけ装飾する」ということができません。

再現できませんでしたが、条件が揃うと選択した文字だけ色を変えることができるようになりました(^_^;)

この場合は、プラグイン「Snow Monkey Editor」を使うと選択した文字だけを装飾することができます。

偉大な冒険家
WordPress5.9に合わせて仕様が少し変わったが、画像と少し違っても基本的な使い方は同じなので実際に触って確認するべし!

1.プラグインのインストール&有効化

ダッシュボードにて「プラグイン」→「新規追加」を開き、「Snow Monkey Editor」で検索します。

プラグイン「Snow Monkey Editor」のインストール
偉大な冒険家
「Snow Monkley Blocks」は別の機能のプラグインになるから気を付けな!(ここでは割愛)

2.装飾したい文字を選択し、メニューを開く。

装飾したい文字を選択して、上部メニューにあるお猿の顔?みたいなアイコンをクリック。

お猿の顔のアイコンをクリック

3.装飾したい項目を選ぶ

「Snow Monkey Editor」の文字装飾は以下の項目が選べます。

  • 文字サイズ
  • 文字色
  • 背景色
  • 蛍光ペン
  • バッジ
「文字色」をクリック

ここでは例として、文字色を変更してみます。

4.変更する文字色を選ぶ。

変更したい文字色を選択しますが、ブロックの時と同様にカスタムカラーも選べます。

Snow Monkey Editorで文字色を変更する

ここでは例としてカスタムカラーを使って赤色(#ff0000)に変更してみました。

他にも項目がありますが、だいたいブロックの時と同じですね。

このプラグインを使うと、追加で蛍光ペンもあるので、今までCSSやショートコードを使っていたことを考えれば、少しは便利になったかと思います^^

がみたか
テーマの仕様によってはプラグインを使わなくても装飾できる場合がありますが、テーマを変更した時に影響が出るかもしれないので、こういった部分はプラグインの使用をおすすめします!

文字サイズ、文字色の変更:まとめ

旧エディターに馴染みすぎた人にとって、ブロックエディターは慣れるまで少し時間がかかるかもしれません(^_^;)

ですが、旧エディターには無かったけど、ブロックエディターには標準で使える機能もいくつかあるので、追加ブロックの中をいろいろと探してみてはいかがでしょうか?

僕自身まだまだブロックエディターへの慣れが必要ですが、そんな時期だからわかる「ブロックエディター初心者が躓きやすいポイント」をいくつか書いていこうと思います!

がみたか
一緒にブロックエディターを使いこなせるようにがんばりましょう!

その他、ブロックエディターのハードルを下げる記事はこちらにまとめています!

ブロックエディターまとめ(初心者向け)

2020年5月9日

それでは、今回はこの辺で!

ブログ運営者のためのサポート保険!

ブログのトラブルや困ったことに時間を取られて

自分のやるべきことが出来ていない人のためサービスです!


無料メールマガジン

WordPressに関するお役立ち情報や、

ブログサポーターの裏側について配信しています!


『ちょっと困った』時のスポットサポート!

WordpressやWebに関する「ちょっと困った」を、

30分 4,400円〜で解決するサービスです!


Wordpressのお引越し!

安心・安全・快適で、ブログサポーターがおすすめする、

Xサーバーへのお引越しを代行します!


ブログサポーターがみたかでは、
アフィリエイター様を募集しています!

記事が気に入ったらシェアをお願いします^^