Gutenberg エディタの使い方

WordPressの次期の標準エディタになるというGutenbergを使って見ました。新規投稿を選ぶと以下の画面が表示されます。

投稿の新規追加時のエディタ画面

最初にタイトル欄に投稿のタイトルを書きます。次に「本文をここに書く」をクリックして、入力欄を開き本文を挿入します。

Gutenberg は段落や画像の1つ1つをブロックとして管理するエディタです。文章の入力中にEnterを押すと、次のブロックが作られて続きを書くことができます。

画像の挿入には左上の のアイコンをクリックし、「画像」を選び、表示されたダイアログで「アップロード」を選んで、画像をアップします。画像をアップ後に右に表示されるプロパティで画像のサイズを決め、画像の上に表示されるタスクバーで表示方法(左寄せ、中央、右寄せなど)を選びます。

Gutenbergの画像

左寄せ画像の場合、画像の上のタスクバーにある「」ボタンを押して、「後に挿入」を選べば、このように画像の右にテキストを挿入できます。左にあるように画像にタイトルを付けることも簡単にできます。

Gutenbergの場合、画像だけをドラッグして位置を変えるということができないようで、この点が不便です。画像付きテキストが1つの段落となり、1つのブロックになるようです。ブロック単位で移動や削除を行えます。従来のエディタでは、1つの画像をドラッグで移動できましたが、なかなか思い通りの位置に配置できませんでした。ブロック単位というのは、自由度は低くなりますが、慣れれば使いやすいのかも知れません。

なお、狭い画面で編集していると、編集中の状態と実際の公表記事と見え方がかなり異なります。広い画面で編集すれば、この点はかなり改善されます。

ブロックの操作

本文を入力しているときに、カーソルが入力ブロックの内側にあると、以下のようにブロックの上と左側にツールバーが表示されます。

ブロック編集時の画面

ブロックの上のツールバーの意味は以下の通りです。

  •  段落マーク: ブロックの種類を変更するときクリックします。
  • 左寄せ・中央・右寄せ: ブロック内の文章や画像を左寄せ、中央、右寄せ表示にします。
  • B・I : 選択したテキストを太字/イタリックにします。
  • リンクマーク :  選択したテキストにリンクを設定します。
  • ABC : 選択したテキストに取り消し線を付けます。
  • ⋮ : クリックするとブロックの操作・表示に関する追加のオプションメニューを表示します。

ブロックの左側の「 < ⋮⋮ > 」を縦にしたものは、ブロックを移動させるためのハンドルのようなもののようです。これをドラッグすれば、ブロックの表示場所を変えることができます。なお、ブロックの移動にはコツがあります。他のブロックの間にドラッグしていくと、ブロックの間のすき間に青い横線が現れます。この青い線が表示されているときにドロップする(マウスボタンをはなす)とその位置に移動できます。青い線がないときドロップすると移動せずに元の状態に戻ってしまいます。

ブロックの追加と種類の変更

ブロックの追加は、上で述べましたように、本文入力中に「改行(Enter)」キーを押すことで、次のブロックが作成されます。ブロックの前にブロックを挿入したいときは、編集中でないブロックにマウスポインタを入れたときにブロックの上に表示される ⊕ をクリックします。

ブロック作成直後には表示されている ⊕ をクリックすることで、ブロックの種類(段落、見出し、画像、リストなど)を設定できます。画像を選べば、画像入力のためのダイアログが開きます。本文入力後にブロックの種類を変えたいときは、ブロックの上のタスクバーの ¶(段落マーク)をクリックします。

なお、テキストだけの「段落」ブロックに後から画像を挿入することはできないようです。それが必要なときは、当該ブロックの上に新規ブロックを作り、画像をアップロードし、画像を左寄せか右寄せに設定します。すると空いたすき間に下のブロックのテキストが移ってきて、自動でテキスト付画像ブロックが出来上がります。

Gutenberg には、たくさんのブロックの種類が用意されています。詳しくは下の参考文献をご覧下さい。

参考文献

Gutenbergの評価を書いた記事は多数ありますが、使い方を書いたサイトはなかなか見つかりません。従来エディタを使ってきた人は、だいたい勘で分かると思います。どのような機能があるのかという点については、以下が参考になるでしょう。

WordPressの新エディター「Gutenberg」の詳細と使い方

 https://mdstage.com/web/wordpress/gutenberg