【Gutenberg】段落ブロックの文字装飾手順まとめ!部分的なサイズ変更・装飾も簡単に出来ますよ♪

Gutenbergでの文字装飾手順まとめ

こんにちは!ZIGです。

ここではワードプレスの新エディター「Gutenberg」における基本的な文字装飾の手順をまとめています。

文字装飾は使用頻度も高く、文章作成の基本ですね!ここを覚えるだけでもGutenbergでの記事作成がかなりスムーズになりますので、これからGutenbergを使おうと思っている方は参考にして下さい。

テキストを太字にする(strongタグ)

テキストを太字にしたい場合は太字にしたい箇所を右クリックしたままで選択状態にし、トップツールバーの「B」ボタンをクリックします。

テキストを太字にする

 

すると選択された箇所が太字になります。

テキストを太字にする

元に戻したい場合はもう一度トップツールバーの「B」ボタンをクリックすればOKです。

 

 

テキストを斜体文字にする(emタグ)

斜体文字にしたい場合は太字と同じようにテキストを選択し、トップツールバーの「I」ボタンをクリックします。

斜体文字

 

すると選択箇所が斜体文字になります。

斜体文字

戻したい場合は太字の際と同様、再度「I」ボタンをクリックすればOKです。

 

 

テキストリンクの挿入

テキストにリンクを挿入したい場合はまずテキストを選択し、以下のボタンをクリックします。

テキストリンクの挿入

 

すると選択したテキスト周辺にURLを入力するウィンドウが表示されます。

テキストリンクの挿入

ここにURLを入力し、ウィンドウ右の矢印をクリックすれば挿入完了ですね。

 

ちなみに以下のボタンをクリックすると、リンクを新しいタブで開くかどうかを設定できます。

テキストリンクの挿入

ここは必要に応じて設定しておきましょう。

例えば別のサイトへのリンク(外部リンク)の場合、新しいタブで開く方が自分のサイトへ戻ってきてもらいやすいですね。

 

打ち消し線を入れる

テキストに打ち消し線を入れたい場合は以下の手順で行います。

  1. まずトップツールバーの「▼」をクリック
  2. 表示された項目から「打ち消し」をクリック
打ち消し線を入れる

 

これで打ち消し線が挿入されます。

打ち消し線

打ち消し線を削除したい場合は「打ち消し」をもう一度クリックすればOKですね。

 

 

文字サイズを変更する

文字サイズを変更したい場合は段落ブロックが選択された状態で「テキスト設定」を編集します。

文字サイズの変更
段落ブロックが選択されていないとテキスト設定は表示されません。その場合は編集したい段落ブロックをまず選択しましょう。

 

 

「文字サイズ」の下の「標準」というボタンをクリックすると、いくつかのサイズが表示されます。

文字サイズの変更

例えば「大」を選択すると・・・

 

以下のように文字サイズが変更されます。

文字サイズの変更

ちょっと「大サイズ」はデカすぎですね(笑

文字装飾の注意点
段落ブロックでの文字装飾(文字サイズ・文字色・背景色変更)は全体に反映されます。つまりブロック内のテキストを部分的に装飾することが出来ません。ただ、別の方法で部分的なサイズ変更は可能です。これについては後述します。

 

文字サイズを細かく設定したい場合は以下のウィンドウに直接数字を入力すればOKです。

文字サイズの変更

 

 

また、「リセット」をクリックすれば文字サイズは標準に戻ります。

文字サイズの変更

 

 

ちなみに「ドロップキャップ」をONにすると・・・

ドロップキャップ

 

こんな感じで先頭の文字だけ大きく表示されます。

ドロップキャップ

これは文章の見せ方の一つの手段として使うと良いですね。

基本的にはあまり使わなそうですが(笑

 

 

文字色を変更する

文字色を変更したい場合は段落ブロックが選択された状態で「色設定」をクリックします。

文字色の変更

 

すると「背景色」と「文字色」が表示されます。

文字色の変更

文字色の中から好きな色をクリックすればその色で装飾される形ですね。

 

例えばピンクをクリックすると・・・

文字色の変更

 

このように文字色が変わります。

文字色の変更

 

「カスタムカラー」をクリックすれば細かな色設定が可能です。

カスタムカラー

色を元に戻したい場合は「クリア」をクリックしましょう。それで元に戻ります。

 

 

背景色を変更する

テキストの背景色変更は「色設定」⇒「背景色」から行えます。

背景色の変更

 

装飾したい色をクリックすれば・・・

背景色の変更

 

段落ブロック全体の背景色が変更されます。

テキスト背景色の変更

背景色も「カスタムカラー」から細かな色設定が可能です。

 

 

テキストを部分的に装飾したい場合

Gutenbergは仕様上、段落ブロック内のテキストを部分的に装飾(文字色・背景色・サイズ変更)することが出来ません。

しかし、方法が無いわけじゃありません。もし部分的にテキストを装飾したい場合は段落ブロックではなく「クラシック」ブロックを使いましょう。

「クラシック」ブロックは旧エディターを部分的に挿入するブロックですね。

 

「クラシック」ブロックはブロックの追加から「フォーマット」をクリックすると見つかります。

クラシックブロック

 

クラシックブロックを追加すると、テキスト上部に旧エディターの各種アイコンが表示されます。

クラシックブロック
上記は「TinyMCE Advanced」プラグインを有効化&設定した状態です。デフォルト状態だと表示されていないアイコンや項目もある可能性があります。

ここから部分的な文字サイズの変更や装飾が可能です。

 

例えば部分的にテキストサイズを変更したい場合はテキストを選択肢、文字サイズを変更ですね。

部分的な文字装飾

このあたりは旧エディターを使い慣れている方は迷わないでしょう。例えば12pxから18pxに変更すると・・・

 

 

このように一部だけ文字サイズを変更出来ます。

部分的な文字装飾

同じ手順で部分的な文字色の変更・背景色の変更も可能なので、文章の一部だけ文字色や背景色を変えたい・・・という場合もクラシックブロックを使うと良いですね。

 

 

TinyMCE Advancedプラグインを活用しよう
ちなみにTinyMCE Advancedプラグインを導入すれば部分的な文字装飾(フォントサイズ・文字色・背景色変更)だけでなく、下線(アンダーライン)等の文字装飾も出来るようになります。TinyMCE Advancedの使い方・設定方法は以下を参考にして下さい。
TinyMCE AdvancedでGutenbergの機能を拡張しよう

Gutenbergが地味に不便?それならTinyMCE Advancedプラグインで機能を拡張しよう

2019年6月7日

 

まとめ

というわけで新エディターGutenbergでの基本的な文字装飾手順をまとめてみました!

旧エディターに慣れているとGutenbergは使いにくく感じますが、慣れると感覚的にコンテンツ作成が出来ますし、文字装飾も覚えてしまえば簡単です。

いずれはエディターもGutenbergに完全移行するので、少しずつでも慣れておくと良いですね。

Gutenbergの使い方

【2019年最新】ワードプレスの新エディター「Gutenberg」の基本的な使い方と注意点まとめ(ver5.2対応)

2018年9月4日

 

 

 
Gutenbergでの文字装飾手順まとめ