Gutenbergエディタの基本


【2020年3月更新】

ワードプレスの投稿エディタはGutenbergと言って、機能が探せさえすれば、説明がなくても使い方がわかる興味深いエディタです。探せさえすれば。

操作感をざっくりいうと、タッチパッドやタッチスクリーン環境だと、かなり使いやすく、マウスだけだとちょっと面倒。

Gutenbergの新規投稿画面

Gutenbergエディタ、新規投稿
Gutenbergエディタ、新規投稿

オレンジ枠がタイトル。

ピンク枠内が本文。

(右側)黄色枠の「設定」アイコンは、紫枠+青色枠の編集メニューの表示・非表示の切り替え。

紫枠の「文書」タブでページ全体に有用な情報の調整。

青色枠の「ブロック」の本文の1ブロックの詳細設定。

(右側)緑色枠でもっと細かいエディタの設定。

Gutenbergのブロックの使い方

タイトルについては見たまんまなのでスルー。

Gutenbergエディタ、新規投稿
Gutenbergエディタ、新規投稿

Gutenbergの特徴はブロックエディタであること。

改行する毎にブロックが新設されます。

ブロックをくっつけたいときは、前の行の最後尾で「Delete」か、後の行の先頭で「Backspace」。メールやワードと同じ。

メールやワードと違う所は、「ブロック」まるごとブロックタイプを変えられるので、対象の先頭文字から最後尾の文字までを範囲指定しなくて済むこと。

Gutenberg、ブロックタイプを変える
Gutenberg、ブロックタイプを変える

始めから指定しておくことも出来るし、後から変えることも可能。後から変える時は、元のブロックタイプによって互換可能なブロックタイプが限られます。

マウスで「文字列の範囲指定→カット→ペースト」しなくても、ブロックを上下に移動させることができるのも、嬉しい。

Gutenberg、ブロックの移動
Gutenberg、ブロックの移動

複数ブロックをまとめて移動させることも出来ますが、一個一個移動させるのが面倒なので、キーボードのCtrl+Xでカットして、Ctrl+Vで貼り付けています。

Gutenberg、複数ブロックの移動
Gutenberg、複数ブロックの移動

タイトルやリストやテーブルなど

表、リスト、引用、画像、動画の埋め込みなど、通常の文字入力以外のことがしたい時は、ブロック先頭のば「+」ボタンを押すと、選択肢が出てくるので、ポチポチ開いて探してください。

Gutenbergのカバーブロック
Gutenbergのカバーブロック

かなり多くのことができます。

ブロックを装飾したい

ブロックごとにできる装飾が違いますから、「パラグラフ」ブロックを例にとります。

右側の「設定」メニューの「ブロック」タグを押すと、今いるブロックに可能な詳細設定メニューが表示されます。

Twenty Twenty、カラーパレット
Twenty Twenty、カラーパレット

太字や斜体やハイライト

ブロック内の特定の文字を装飾したい場合は、各ブロック上のメニューから機能を探します。

「パラグラフ」ブロックの場合は、右寄せ、左寄せ、中央寄せ、太字、斜体、リンク、コード化(コードとして表示するだけでコードではない)、ブロック内イメージ、取り消し線、下線ですね。

Gutenberg、ブロック内の装飾
Gutenberg、ブロック内の装飾

大抵の機能はデフォルトで揃っているのですが、一部の文字列をハイライトする機能が備わっているテーマとそうでないテーマはテーマ開発者依存見たいデス。

最後に

ま、大体こんなとこでしょうか?

以上、Gutenbergの基本構成、ブロックの使い方、ブロックの変更・装飾、ブロック内の装飾についてでした。

最後までお読みいただきましてありがとうございました。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です