ワードプレス新エディタGutenbergの便利な使い方！使って嬉しいグーテンベルク

wordpressの新エディタGutenberg(グーテンベルク)ですが、正直、使いにくいイメージはありませんか？

新しいもの好きなのでワードプレスに組み込まれてすぐにGutenbergエディタを使い始めましたが、使った見ると結構、使いにくい・・・

すぐにClassicEditorに戻してしまいましたが、ある時にGutenberg中々良いぞという話を聞き、イヤイヤ使い始めましたが、Gutenbergを使い込んで行くうちに、想像以上の嬉しい機能が沢山ありすっかり気に入ってしまいました。

そこで、取っ付きににくさから、旧エディタを使用していた方にぜひ試して貰いたいGutenbergの素晴らしさをご紹介します。

Classic Editorは2022年までしかサポートされませんので、何れはGutenbergエディタが主流になってくると思われますので、この際、一緒に慣れていきましょう！

Gutenbergを使う理由

wordpressのGutenbergが使いにくく感じるのは、旧エディタに慣れてしまっているからです。

例えば、ガラケーからスマホに変えた時に使いにくく感じましたが、使い慣れれば快適に過ごせていますよね。

エディタも同様に旧仕様に慣れているだけで、Gutenbergに慣れれば快適なライディングを行うことができます。

Gutenbergを使う大きな理由はこの3つです。

見た目通りに記事が作れる 簡単に装飾が出来る ページ内リンクも簡単で嬉しい

それでは順に解説していきます！

Gutenbergを使うと見た目通りに記事が作れる

Gutenbergは編集画面の表示と公開画面の表示がほとんど同じなので、見た目通りに記事を作成できることが魅力的です。

旧エディタを使っていると繰り返しプレビューを見て、細かな修正をするといった動作が必要な場合があります。

また、旧エディタは「ビジュアルモード」と「テキストモード」を切り替えて、HTMLの編集することもありますが、編集箇所を探し出すのも一苦労です。

Gutenbergは視覚的にわかりやすいだけでなく、専用ブロックを使えば修正箇所を簡単に特定して編集することが可能です。

画像の全幅表示が反映される

例えば、旧エディターで編集すると画像を挿入後にHTMLで固定する必要があり、編集画面では確認できない「画像の全幅表示」です。

Gutenbergの編集画面には画像に関する様々なブロックがありますが、全幅表示を選択すると編集画面内でも全幅で表示されます。

ちなみに、画像を全幅表示にした場合の編集画面には、以下のように表示されます。

このように、編集画面も全幅で表示されるので、作成中の記事のイメージが分かりやすくなっています。

カラムもそのまま表示される

旧エディタのデフォルトにはなかった「カラム」も対応しているので、編集画面もカラムを見たまま調整することができます。

例えば、こちらが実際に追加したカラムボックスの編集画面の画像です。

このように、実際にブロックが分けられた状態で、位置を確認しながら編集することができます。

Gutenbergは該当するブロックを使うことで、見たままの編集が行えるため魅力的です。

Gutenbergを使うと簡単に装飾が出来る

Gutenbergはクラシックエディタがあるので、旧エディタのようにライティングが行えます。

そのため、通常の記事を作成する場合は、今まで通りに文章をベタ打ちするだけで大丈夫です。

ただ、旧エディタの場合は背景画像などの装飾カスタマイズは、HTMLを入力する必要がありましたよね。

Gutenbergの場合は専用ブロックがデフォルトで用意されているので、ある程度のカスタマイズはブロック機能を使うだけで設定できます。

そのため、wordpress初心者の方の場合でも、簡単に装飾された記事を作り上げることができます。

ちなみにですが、Gutenbergのブロックは以下のようにカテゴリ別に様々な種類が用意されています。

旧エディタのように使う場合は 「Classic Paragraph」

ただ文章を打つだけであれば「Classic Paragraph」というブロックだけを使います。

このブロックを使うと、旧エディタのような編集方法でライティングが行えます。

ちなみにですが、このような入力画面になります。

このように、旧エディタで出来た太字や中央寄せ、画像の追加などは同じブロックで済ませることができます。

画像の上に文字は「カバー」

「文字の背景を画像にしたい」という装飾の場合は、「カバー」のブロックを使用します。

カバーブロックでは、背景にする画像を選択し、直接文字を打ち込むことができます。

また、背景画像にかけるマスクの色や濃度も、目視で調節することが可能です。

このように、専用ブロックを追加するだけで、お洒落な装飾を行うことができます。

ブロックを追加すると装飾の幅も広がる

Gutenbergのブロックは、テンプレートによって独自に追加されているものもあるようです。

そして、プラグインで新たなブロックを追加することもできます。

ここでは、一部有料ではありますが、「Snow Monkey Blocks」というプラグインでご紹介していきます。

Snow Monkey Blocksを追加すると、装飾として使いやすいボタン・吹き出し・星評価などのブロックがあります。

ブロック追加だけで、このような装飾が誰でも簡単に行えます。

また、「最近の投稿」や「スライダー」などのブロックもあるので、フロントページの作成も簡単にこだわり感のある仕上がりにできます。

Gutenbergを使うとページ内リンクも簡単で嬉しい

旧エディタでページ内リンクを貼る時は、基本的な動作だとHTML編集でID名を指定して、リンクを付けなければいけませんよね。

面倒に感じる方は一度記事を保存して、目次を活用しているかもしれません。

しかし、Gutenbergの見出しブロックを使えば、編集画面の「HTMLアンカー」にIDを入力するだけでリンク先を指定できます。

そのため、ページ内リンクを貼る時の面倒な動作を省略して、リンク先とリンク元を簡単に指定できるので簡単です。

このように、Gutenbergを使えば簡単にできるカスタマイズで、記事を見やすく分かりやすく編集できてしまいます。

ページ内リンクはアンカー指定とリンク指定の2ステップ

Gutenbergでページ内リンクを付けることがどれだけ簡単なのか、実際の手順をご紹介します。

これだけの操作で、手軽にページ内リンクが作成できます。

「先ほど説明した●●と同様に…」のような解説の際などに活用すると、読者さんも理解しやすくなりますね。

簡単に装飾したい人はGutenbergがオススメ！

文字を打つだけであれば、正直旧エディタもGutenbergも同じです。

ただ、文章を打っていると「ここは掘り下げて解説したい」や、「画像をオシャレに見せたい」などのアイディアが自然と生まれてきませんか？

そんな時に、簡単に装飾できるのがGutenbergです。

ブロックを追加するだけで装飾ができ、編集画面で実際の表示を確認しながら作業が出来るので作成がとても簡単です。

そのため、CSSを触ることが苦手な場合や、HTMLを記事に追加するのを面倒に感じる方にもオススメです。

Gutenbergとは

Gutenberg(グーテンベルク)は、wordpress5.0から実装されたビジュアルエディタのことです。

wordpress4.9.8以降は、プラグインを入れると使用できます。

ちなみにですが、Gutenbergという名前の由来は、印刷に改良を加えた活版印刷技術の発明者と言われているヨハネス・グーテンベルク氏です。

旧エディタは１つ枠にベタ打ちだったのに対し、Gutenbergはブロックという枠を複数埋め込める機能が備わっています。

また、ブロックには「見出し」や旧エディタのような「Classic Paragraph」などの他に、「カラム」や「カバー」などの視覚的カスタマイズができるものが複数あることが特徴的です。

Gutenbergのメリット・デメリット

メリット

Gutenbergのメリットは、視覚的な編集で装飾された記事を作成できることです。

まず、通常の文章はこちらの画像のように、旧エディタ同様にベタ打ちすることができます。

HTML編集に切り替えることもできるので、旧エディタのような感覚で使いたい方はこちらのブロックだけでも作成することができます。

しかし、せっかくGutenbergを使うなら、今まで複雑に感じていたカスタマイズのブロックも利用することがオススメです。

例えば、このような背景画像に文字を乗せるデザインは、「通常の記事に使用するのは面倒」と感じた事はありませんか？

上記のようなデザインもデフォルトで専用ブロックが用意されているので、簡単に視覚的に編集することができます。

ちなみに、こちらがGutenbergの編集画面になります。

編集画面で画像の上に表示するオーバーレイ(透かし色)なども調整することができ、簡単にカスタマイズできるのがわかりますね。

このように、視覚的な編集が可能な上に、専用ブロックが複数用意されているのがGutenbergの魅力です。

ブロックごとに細かく指定ができるので、旧エディタでは面倒に感じていた作業も簡単に行えます。

デメリット

Gutenbergは旧エディタのように入力できるので、大きなデメリットはありませんでした。

気になる部分といえば、一部の表記が日本語化されていないことです。

しかし、アップデートを重ねるごとに英語で表記されている部分も減ってきているようなので、さほど影響はありませんでした。

また、稀に「バグかな？」と思うこともあります。

例えば、編集中に突然ブロックが全て消えてしまうケースです。

リビジョンでは前回保存したところまで戻ることができますが、下書き保存をしていなかった時は白紙に戻ってしまいました…。

そのため、こまめな保存はしておいた方が安心です。

このように、Gutenbergのデメリットとしては、

日本語化の未完成 稀な白紙化するバグ

といった2点があります。

細かな不具合は、今後のアップデートで改善して頂きたい部分ですね。

Gutenbergの導入方法

インストールの手順

Gutenbergはwordpressをver5.0以上にバージョンアップするだけで、導入することができます。

wordpress4.9.8以上でGutenbergを試したい時は、プラグインを使用しましょう。

そこで、インストールの手順として、

wordpressをバージョンアップする プラグインを使用する

と、この2つの方法についてご紹介します。

wordpressをバージョンアップする

wordpressをバージョンアップしてGutenbergを使用する場合は、次の手順で更新を行いましょう。

管理画面ダッシュボードの「更新」を開く 「今すぐ更新」を押す

これだけで、表示されていたバージョンに更新することができます。

更新画面にはバックアップを推奨するアナウンスがあるので、行っておくと安心です。

プラグインを使用する

Gutenbergをプラグインで使用する場合は、wordpressのバージョンが4.9.8である必要があります。

該当のバージョンであれば、以下の手順でGutenbergを有効にすることが出来ます。

管理画面ダッシュボードを開く 「Gutenbergを試す」を押す

また、元に戻したい時は「Classic Editorプラグイン」をインストールし、有効化すると旧エディターに戻すことが可能です。

Gutenbergの使い方

では、実際にGutenbergで記事を作成する際の、基本の使い方について見ていきましょう。

Gutenbergのブロックの種類

Gutenbergは用途に合った専用ブロックを使うことで、スムーズなカスタマイズが行えます。

ただ、種類が多すぎるので、繰り返し使いたいブロックだけは覚えておくことがおすすめです。

では、各ブロックの種類や特徴を見ていきましょう。

一般ブロック

「一般ブロック」には、合計11個のブロックがあります。

では、詳しく見ていきましょう。

Classic Paragraph	旧エディタのようなカスタマイズが行えるブロックです。改行や見出し、画像やテーブルを入力することも可能です。※TinyMCE Advancedプラグインを入れていると表示されるブロックです。
見出し	H1～H6までの見出しを入力出来るブロックです。テキストの配置や文字色設定、追加CSSやHTMLアンカーの設定なども可能です。
段落	一行ごとに文章を入力できる基本のブロックです。未入力の状態で「/」を入力し、ENTERキーを押すとブロック選択画面を表示することもできます。
画像	画像を表示するブロックです。画像の配置や大きさ、キャプションや追加CSSなどの指定ができます。
カバー	背景に画像を設定し、テキストなどを乗せるブロックです。オーバーレイの色や濃さ、焦点の調整や追加CSSの指定も行えます。
リスト	番号なしリストや番号リストを作成できるブロックです。テキストカラーや追加CSSの指定も可能です。
ギャラリー	複数の画像を表示できるブロックです。カラム数の設定や列に合わせた画像の切り抜きなどの設定が行えます。
引用	引用テキストを強調して表示できるブロックです。内容と引用元の入力欄と、テキストカラーやスタイルなどの設定が行えます。
音声	シンプルな音声プレイヤーを埋め込めるブロックです。追加CSSの指定も可能です。
ファイル	ファイルをダウンローするリンクを追加できるブロックです。ダウンロードボタンの表示設定も行えます。
動画	メディアライブラリから動画を埋め込めるブロックです。追加CSSの指定も可能です。

フォーマット

「フォーマット」には、合計7個のブロックがあります。

テーブル	表を挿入できるブロックです。列や行数、色やスタイルの設定と、追加CSSの指定などが行えます。
カスタムHTML	カスタムHTMLコードを追加できるブロックです。編集しながらプレビューの確認も行えます。
ソースコード	余白やタグを考慮したコードスニペットを追加できるブロックです。ここに入力したコードは変換されずにそのまま掲載することができます。また、追加CSSの入力も行えます。
クラシック	従来のエディターで入力できるブロックです。Classic Paragraphのブロックと内容はほとんど同様で、デフォルトはこちらが旧エディタのようです。また、違いとしてクラシックブロックは2行以上の空行を削除する仕様になっているという情報がありました。
整形済み	スペースやタブを含むテキストを追加できるブロックです。改行なども含めることができ、文字色などの装飾や追加CSSも指定できます。
プルトオート	引用テキストを強調できるブロックです。文字装飾やスタイルの変更、追加CSSの指定などが行えます。
詩	詩を挿入できるブロックです。特別な余白形式のカスタマイズや歌詞の引用などに使えるように用意されているようです。

レイアウト要素

「レイアウト要素」には、合計7個のブロックがあります。

カラム	複数のカラム表示が追加できるブロックです。カラム数の選択や各カラムへのブロック使用、追加CSSの指定などが行えます。
ボタン	リンクボタンを追加できるブロックです。ボタンの色や文字色などのカスタマイズが行えます。
メディアと文章	画像と文章を横並びレイアウトで表示できるブロックです。配置の変更や全幅表示、色や追加CSSの指定も行えます。
続きを読む	「続きを読む」などを表示できるブロックです。このブロックより前に書かれている文章は、アーカイブページに抜粋として表示することができます。
改ページ	複数ページに分けて表示するブロックです。このブロックを配置した位置で文章を区切ることができ、ページ送りを表示します。
区切り	文章の区切りとして横線を入れるブロックです。ドットや幅広線などのスタイル変更や、追加CSSにも対応しています。
スペーサー	余白を入れるブロックです。余白の高さを指定することができるので、ブロック間の余白作りに利用できます。

ウィジェット

「ウィジェット」には、合計9個のブロックがあります。

カテゴリー	全てのカテゴリーをリスト表示できるブロックです。ドロップダウン表示や階層、投稿数の設定も行えます。
最新の記事	最近の記事をリスト表示できるブロックです。並び順や表示数、カテゴリーの指定や投稿日の表示などの設定が行えます。
ショートコード	ショートコードを追加できるブロックです。ショートコードを反映させたい時はこちらに入力しましょう。
アーカイブ	記事の月別アーカイブを表示できるブロックです。ドロップダウン表示や投稿数の表示などの設定が行えます。
カレンダー	投稿カレンダーを表示できるブロックです。追加CSSにも対応しているので、カスタマイズ表示が可能です。
最新のコメント	最近投稿されたコメントの一覧を表示できるブロックです。アバターや日付、抜粋の表示設定やコメント数などのカスタマイズが行えます。
RSS	RSSやAtomフィードからの投稿を表示できるブロックです。追加CSSで表示をカスタマイズすることも可能です。
検索	検索枠を追加できるブロックです。コンテンツを探しやすくする際に活用できます。
タグクラウド	タグクラウドを表示できるブロックです。タグやカテゴリーを表示することができ、投稿数の表示や追加CSSでのカスタマイズも可能です。

埋め込み

「埋め込み」には、合計33個のブロックがあります。

どのブロックもURLを貼るだけで、リンク元の表示を埋め込むことができます。

ここでは、使用頻度の多そうないくつかのブロックについてご紹介させていただきます。

YouTube	YouTubeの動画を埋め込めるブロックです。TouTubeの動画URLを入力することで、動画の表示とキャプションの入力が可能になります。
埋め込み	動画や画像、ツイートや音声などの外部のリソースのコンテンツを埋め込めるブロックです。
Twitter	Twitterのツイートの埋め込みたいページのURLを貼るだけで ブログに埋め込めるブロックです。
WordPress	wordpressのページを埋め込めるブロックです。記事の紹介などに使えますね。
Instagram	Instagramの投稿を埋め込めるブロックです。投稿ページの「リンクをコピー」で取得したURLを貼りましょう。

Gutenbergを使いこなすポイント

旧エディタからGutenbergに切り替えたあとは、使い方に慣れることが大切です。

そこで、Gutenbergを使いこなすポイントとして、

ブロックの種類を覚える 過去の記事はブロックに変換する 改行を活用する

と、この3つについてご紹介していきます。

ブロックの種類を覚える

Gutenbergはブロックの種類を覚えておくと、構成にかかる時間を短縮できます。

例えば、Gutenbergを使い始めたばかりの時に、テーブルを使う時に「テーブルのブロックはあったかな？」や、「ブロックはどの項目から追加するのかな？」と迷ってしまうかもしれません。

使い方に迷ってしまうと時間ロスに繋がるので、実際に使用しながら覚えておきましょう。

ちなみにですが、新たにブロックを追加する基本の方法は、以下の2つがあります。

編集画面の左上にある「+」を押す ブロックの上下にカーソルを合わせると表示される「+」マークを押す

このような操作でブロックを追加することができるので、積極的に使用してブロックの種類を覚えていきましょう。

過去の記事はブロックに変換する

旧エディタで作成していた記事は、「クラシック」のブロック内に全てが収まった状態で編集することになります。

しかし、このまま使用してしまうと、Gutenbergの良さが発揮できませんよね。

過去の記事をブロックに変換するには、「ブロックへ変換」を押すと行えます。

このように、旧エディタで作成した記事を編集する時は、まずブロックへ変換しましょう。

ブロックにすることで、Gutenbergならではのカスタマイズが可能になります。

改行を活用する

Gutenbergのブロック「段落」を使用すると、1ブロックに1行の文章を打つことができます。

段落ブロックを使用している時にENTERキーで改行をすると、次の行になる新たなブロックを作成できるので簡単です。

そして、新たに作られたブロックは「/」を押してENTERを押すと、その場で使用したいブロックを選択することができます。

改行するだけで次から次へとブロックができてしまうため、慣れるまでは違和感を感じるかもしれません。

間違えて作ってしまったブロックは画像右側に表示されている三つの点から「ブロックを削除」を押せば消すことが可能です。

この仕様になれると、ブロックの追加に必要となる動作も削減できるので、スムーズなライティングに繋がります。

Gutenbergのデメリットを補うカスタマイズ方法

初期状態のGutenbergの不便なところは、こちらの2つがあります。

文字装飾がない 編集中に追加CSSが見えない

これらのデメリットは、ちょっとしたカスタマイズで解決することが可能です。

そこで、オススメのGutenbergのカスタマイズをご紹介していきます。

文字装飾のカスタマイズ

Gutenbergの初期状態の文字装飾は太字やイタリックがありますが、文字の色や背景色、マーカーなどの装飾機能はありません。

そのため、文字装飾をしたい場合は、プラグインの「Add RichText Toolber Button」を入れることがオススメです。

Add RichText Toolber Buttonは太字やイタリックなどの横に、文字装飾の項目を増やすことができますよ。

入れるだけで良いプラグインなので、活用していきましょう。

追加CSSを編集中に見えるようにするカスタマイズ

Gutenbergでの入力に慣れてくると、ブロックごとに追加CSSを反映させるカスタマイズがしたくなるかもしれません。

ただ、初期状態では追加CSSに入力した表示は、Gutenbergの編集画面に反映されません。

そこで、編集画面に追加CSSを反映させる方法についてご紹介していきます。

こちらは「function.php」を触ることになるので、ある程度wordpressの操作に慣れてから行いましょう。

このような方法を行うと、編集画面でも追加CSSが見えるようになります。

ただ、functionの編集に失敗すると、サイトが真っ白になってしまうこともあります。

バックアップを用意するなどの対策を取りながら、慎重に編集を行いましょう。

Gutenbergの便利なブロックの使い方

せっかくGutenbergを使うなら、ブロックを便利に活用したいと思いませんか？

そこで、Gutenberugの便利なブロックの使い方についてご紹介していきます。

再利用ブロック

再利用ブロックは、作成したブロックの内容をそのまま保存し、同様の内容をすぐに追加できる機能です。

そのため、定型文やアフィリエイト広告などを再利用ブロックに登録しておくと、何度も同じ作業をする手間が省けます。

では、再利用ブロックの使い方について見ていきましょう。

このように、再利用ブロックは作成済みのブロックを登録しておくことができます。

繰り返し使うブロックを作成したときは、再利用ブロックを有効活用して作業を減らしましょう。

記事を複製する

一度作成した記事を全てコピーしたい場合は、以下の方法が有効です。

このように、複数のブロックを一括で新規記事に移すことができます。

Gutenbergはたくさんのブロックに分かれることがあるため、覚えておくと複製に困ることもありません。

使わない設定エリアを非表示にする

Gutenbergの「文書」で選択出来る公開設定や、記事下のSEO設定などが行えるエリアに普段使わない設定はありませんか？

例えば、下記のようなエリアです。

毎回使用するものエリアのみを表示すると、編集もスムーズに行えますよね。

では、使用頻度の少ない設定を非表示にする手順を見ていきましょう。

このような手順で、不要な設定エリアを非表示にすることができます。

使用頻度の低い設定を隠し、使い勝手の良い編集画面を作りましょう。

使わないブロックを非表示にする

Gutenbergは初期の状態からたくさんのブロックが用意されているため、使わないブロックが邪魔に見えることがあるかもしれません。

使用しないブロックを非表示にする方法は、以下の3パターンがあります。

function.phpを編集する プラグインを使用する ブロックマネージャーを使用する

function.phpの編集は「追加CSSを編集画面でも見えるようにするカスタマイズ」でも触れている通り、失敗するとサイトが白紙化する可能性があります。

使わないブロックを非表示にする場合はプラグインでも設定が行えるため、ここでは非表示設定の行えるプラグインとブロックマネージャーについてご紹介します。

ただ、手軽さを考えるとブロックマネージャーがオススメです。

それでは詳しく見ていきましょう。

プラグイン「Disable Gutenberg Blocks – Block Manager」

「Disable Gutenberg Blocks – Block Manager」は、プラグインの新規追加から検索すると追加できます。

ワードプレスのメニュー「設定」の「Disable Blocks」から、表示の有無を設定しましょう。

ブロックマネージャー

ブロックマネージャーは、Gutenbergの編集画面右上にあるメニューから開くことができます。

このような方法で、Gutenbergの不要なブロックを非表示に設定することが可能です。

普段使わないブロックを隠しておくと、使用頻度の多いブロックを探しやすくすることができます。

好みの設定にカスタマイズして、Gutenbergを使いこなしましょう。

Gutenbergのブロックを増やすプラグイン

不要なブロックを非表示にできれば、使いたいブロックの種類を増やした方が便利さも高まりますよね。

そこで、GUtenberugのブロックを増やすプラグインはこちらです。

Snow Monkey Blocks

「Snow Monkey Blocks」は、テーマ「Snow Monkey」向けに開発されたプラグインです。

互換のないテーマも中にはありますが、専用ブロックは全25種類があります。

日本人が開発しているプラグインなので、説明や更新情報も日本語で確認することができます。

Stackable – Gutenberg Blocks

「Stackable – Gutenberg Blocks」は、全22種類のブロックが追加できるプラグインです。

使用するブロックのみを選択できる設定ページが用意されており、デモを確認することも可能です。

デモを見ながら必要なブロックのみを選択できるので、英語が苦手でも設定しやすくなっています。

Kadence Blocks – Gutenberg Page Builder Toolkit

「Kadence Blocks – Gutenberg Page Builder Toolkit」は、1つのブロックに細かく設定が行えるプラグインです。

用意されているブロックの数は8種類と少なめではありますが、それぞれに細かな設定が行えます。

そのため、ホバー時のアニメーション効果なども、簡単なカスタマイズで加えることが可能です。

Gutenbergのショートカット表

ライティングの効率を良くするために、「できる限りキーボードから手を話したくない」と思いませんか？

そんな時に役立つGutenbergで使えるショートカットキーを、

「エディター」のショートカット 「選択」のショートカット 「ブロック」のショートカット 「テキスト整形」のショートカット

と、こちらの4つに分類してご紹介していきます。

エディターで使えるショートカット

内容	Windows /Linux用	macOS用
ショートカットの確認	「Shift」+「Alt」+「H」	⌃⌥H
変更内容の保存	「Ctrl」+「S」	⌘S
最後に行った変更の取り消し	「Ctrl」+「Z」	⌘Z
最後に取り消した変更を戻す	「Ctrl」+「Shift」+「Z」	⇧⌘Z
設定サイドバーの表示・非表示の切り替え	「Ctrl」+「Shift」+「,」	⇧⌘,
ブロックナビゲーションメニューを表示	「Shift」+「Alt」+「O」	⌃⌥O
エディターの次の部分に移動	「Ctrl」+「`」	⌃`
エディターの前の部分に移動	「Ctrl」+「Shift」+「`」	⌃⇧`
代替版：エディターの次の部分に移動	「Shift」+「Alt」+「N」	⇧⌥N
代替版：エディターの前の部分に移動	「Shift」+「Alt」+「P」	⇧⌥P
一番近いツールバーに移動	「Alt」+「F10」	⌥F10
ビジュアルエディターとコードエディターの切り替え	「Ctrl」+「Shift」+「Alt」+「M」	⇧⌥⌘M

選択に使えるショートカット

内容	Windows /Linux用	macOS用
入力中に全てのテキストを選択する	「Shift」+「A」	⌘A
入力中に全ブロックを選択	二度押し：「Shift」+「A」	⌘S
選択部分をクリア	「Esc」	Esc

ブロックで使えるショートカット

内容	Windows /Linux用	macOS用
選択したブロックを複製	「Ctrl」+「Shift」+「D」	⇧⌘D
選択したブロックを削除	「Shift」+「Alt」+「Z」	⌃⌥Z
選択したブロックの前に新しいブロックを追加	「Ctrl」+「Alt」+「T」	⌥⌘T
選択したブロックの後に新しいブロックを追加	「Ctrl」+「Alt」+「Y」	⌥⌘Y
新しいパラグラフを追加した後にブロックタイプを変更	「/」	/

テキスト整形に使えるショットカットキー

内容	Windows /Linux用	macOS用
選択したテキストを太字	「Ctrl」+「B」	⌘B
選択したテキストをイタリック体	「Ctrl」+「I」	⌘I
選択したテキストに下線	「Ctrl」+「U」	⌘U
選択したテキストをリンクに変換	「Ctrl」+「K」	⌘K
リンクを削除	「Ctrl」+「Shift」+「K」	⇧⌘K
選択したテキストに打ち消し線	「Shift」+「Alt」+「D」	⌃⌥D
選択したテキストを等幅フォント	「Shift」+「Alt」+「X」	⌃⌥X

まとめ

Gutenbergは旧エディタのように使うこともでき、簡単な方法で記事内装飾が行えます。

そのため、ブロックの操作に慣れれば、今まで以上にスムーズなライティングになりますね。

新しいものは慣れるまでに時間がかかりますが、慣れてしまえば簡単です。

Gutenbergを使いこなして、素敵な記事を完成させいましょう。