WordPress 5投稿エディタGutenbergのキーボードショートカット

WordPress 5で正式採用されました、gutenbergエディタの覚書を記録させて頂こうと思います。


基本的な使い方の流れ

記事の作成は、見出しや段落、リストといった「ブロック」を作り、そこに内容を入力、それを繰り返してゆく流れかと思います。ブロックの選択は
キーボードショートカットの「/(スラッシュ)」を入力する方法が手軽そうな感じです。

  1. 記事のタイトルを入力します。これはH1の見出しタグになるようです。
  2. 通常の「段落」ブロックとして文章を入力するか、「/(スラッシュ)」を入力するとブロックの一覧(一部)が表示されますので、見出しやリスト等を選択します。
  3. ブロックの種類に応じた内容を入力します。
  4. 画像のサイズなど、ブロックの属性を変更したい場合、画面右側の設定サイドバーから行います。
  5. 同じ手順でブロックを連結して記事を作ります。

選択可能なブロック

画面左側の+アイコンから、次のブロックを選択できるようです。

これ以外に、「再利用ブロック」にブロックを登録できるようです。再利用ブロックは複数の記事に貼ることができますが、内容を変更すると、すべての記事に変更が反映されるようです。


キーボードショートカット

Shift + Alt + Hで、キーボードショートカットのヘルプが表示可能のようです。次の26種類のショートカットが用意されていました。

No.内容キーボード
ショートカット
1このヘルプを表示する。Shift+Alt+H
2変更を保存する。Ctrl+S
3直前の変更を取り消す。Ctrl+Z
4前回の取り消しをやり直す。Ctrl+Shift+Z
5設定サイドバーの表示/非表示を切り替える。Ctrl+Shift+,
6ブロックナビゲーションメニューを開く。Shift+Alt+O
7エディターの後の部分に移動する。Ctrl+`
8エディターの前の部分に移動する。Ctrl+Shift+`
9エディターの後の部分に移動する (代替オプション) 。Shift+Alt+N
10エディターの前の部分に移動する (代替オプション) Shift+Alt+P
11一番近くにあるツールバーに移動するAlt+F10
12ビジュアルエディターとコードエディターを切り替えるCtrl+Shift+Alt+M
13入力中にすべてのテキストを選択します。すべてのブロックを選択するにはもう一度押してくださいCtrl+A
14選択項目をクリアする。Esc
15選択したブロックを複製する。Ctrl+Shift+D
16選択したブロックを削除する。Shift+Alt+Z
17選択したブロックの前に新しいブロックを挿入する。Ctrl+Alt+T
18選択したブロックの後に新しいブロックを挿入する。Ctrl+Alt+Y
19新規段落の追加後、ブロックタイプを変更します。/
20選択したテキストを太字にする。Ctrl+B
21選択したテキストを斜体にする。Ctrl+I
22選択したテキストに下線を付ける。Ctrl+U
23選択したテキストをリンクに変換する。Ctrl+K
24リンクを削除する。Ctrl+Shift+K
25選択したテキストに取り消し線を追加する。Shift+Alt+D
26選択したテキストを等幅フォントで表示する。Shift+Alt+X


勉強も兼ねまして、この記事もGutenbergで作成しました。

たとえば任意の場所に画像を入れたい場合、インラインを画像を選ぶ必要がある事など、クラシックエディタと異なりHTML5のブロック要素、インライン要素を考慮した記事の作成技能が必要な感じです。意図した表示と異なる場合、もしかすると、CSSのカスタマイズも必要になるかもしれません。

ショートカットにつきましては、たとえばリストのインデントを変更したいとき。クラシックエディタではタブキーで行えましたが、Gutenbergではショートカットが用意されていない感じです。

何かそのような不足を補う、バージョンアップやプラグインを待たせて頂こうかなと思います。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク