WordPress5から実装されたブロックエディタ「Gutenberg(グーテンベルグ)」
一時は物議を醸したブロックエディタですが、最近はブロックエディタに対応しているテーマが増えてきており、そろそろブロックエディターの使い方も身につけなければならないと思っている人もいるでしょう。
そこで今回はブロックエディタの基本的な操作方法について解説していきます。
ブロックエディタの使い方
タイトルの設定
記事のタイトルは「タイトルを追加」の箇所に入力します。
テキスト入力ボックスが表示されてないように見えますが、「タイトルを追加」をクリックするとテキスト入力中に表示されるカーソルが表示されるはずです。
そのまま入力するとタイトルを入力できます。
設定パネル
Gutenbergは右側に設定パネルが用意されています。
コチラのパネルからブロックで使用するフォントの際や色設定などブロックごとに用意された固有の設定が行えます。
プラグインやテーマ機能などが追加されたブロックだと、このようにスタイルをワンクリックで切り替えられたりもします。
本文を入力する
投稿本文は「文章を入力。または / でブロックを選択」と書かれた箇所をクリックすると投稿本文を執筆できる状態になり、文章を入力していけます。
クラシックエディタのビジュアルエディタと同じように、Enterキーを押すと段落が分けられ、Shiftキーを押しながらEnterキーを押すと段落を変えずに改行できます。
見出しを挿入する
見出しを挿入するには見出しブロックを挿入する必要があります。
ブロックの追加はエディタ内にある[+]から挿入できます。
挿入可能なブロックがたくさん表示されるので、その中から「見出し」をクリックすると見出しが挿入されます。
Enterキーを押すと見出しブロックを抜けて段落ブロックに移動できます。
画像を挿入する
画像の挿入も見出しの挿入と同じようにブロック挿入から行います。ブロックの挿入やり方は見出しを挿入した時と同じです
あとは画像ブロックの「メディアライブラリ」
エクスプローラーから画像を直接アップロードしてもOK
エクスプローラーから画像を直接ドラッグ&ドロップすると自動的に画像ブロックが挿入されます。
新しい画像を挿入する場合はこの方法の方が簡単なので基本的にはこちらのほうが効率的でしょう。
ブロックエディタの操作はここまで紹介した
- タイトルの書き方
- 段落の書き方
- 見出しブロックの挿入方法
- 画像ブロックの挿入方法
これら4つのを覚えていたら後は成り行きでブロックエディタを使いこなせていけます。初めは覚えることが大変なのでこの四つの方法に絞って覚えていくといいでしょう。
記事のプレビュー
Gutenbergで作成した記事をプレビューしたい場合は、ブロックエディター右上の[プレビュー]をクリックし、[新しいタブでプレビュー]を選択します
これで実際に表示されるページはどうなっているかどうかプレビューできます。
Gutenbergはブロックエディターそのものがプレビュー画面でもあるため、簡易プレビューだけならわざわざプレビュー操作をする必要はありません。
[タブレット][モバイル]を選べばブロックエディタの幅を狭めることができます。
Webページの読み込み処理も入らないため、サクッとプレビューしたい場合は[新しいタブでプレビュー]ではなく簡易プレビュー機能を使うといいでしょう。
記事の公開
ブロックエディタで記事を作成したらいよいよ記事の公開です。
アイキャッチ画像などの投稿設定は設定パネルの「投稿」から行います。「ブロック」になっていた場合は切り替えておきましょう。
こちらでカテゴリやタグ・アイキャッチ・パーマリンクなどを設定できます。
全てを設定したら右上の[公開]ボタンを押しましょう。
タグの設定漏れや公開設定間違いを防ぐために確認メッセージを表示してくれます。問題なければそのまま[公開]を押します。公開ボタン押すと今度こそ公開されます。
公開確認パネル一番下にひっそりと「公開前チェックを常に表示する」というチェック項目があるので、毎回確認されるのが鬱陶しいという場合はチェックを外しておきましょう。
ここまでがブロックエディタの基礎的な使い方です
設定パネルが非表示になってしまう
ブロックエディタを操作していると設定パネルが非表示になってしまうことがあります
この場合は右上の歯車アイコンをクリックしてください。歯車アイコンをクリックすることで設定パネルの表示・非表示を切り替えられます。
執筆中は設定パネルが邪魔という場合は非表示にしておき、投稿本部の装飾をするときや投稿設定をするときだけ表示させておきたいという場合は表示させておくと良いでしょう。
ブロックを素早く挿入する方法
わざわざ[+]をクリックしてブロックを挿入するのは面倒です。キーボードだけでブロックを挿入できたらかなり楽でしょう。
もちろんWordPressのブロックエディターにはキーボードだけでブロックを挿入できる方法が用意されています。
やり方はカンタンで、段落の先頭に半角の「/」を入力するだけです。
「/】を入力すると挿入するブロックの候補が表示され、キーボード矢印キーで選択してEnterキーで挿入できます。
「/」に続けてブロック名を入力していくとブロックを検索でき、目的のブロックを素早く見つけ出すことができます。
この方法を知っているかどうかでブロックエディターでの執筆効率が大きく変わってくるので、絶対に覚えておきましょう。
Markdown 記法もオススメ
WordPress ブロックエディタは Markdown 記法にも対応しています。
Markdown記法とは文章を効率よく執筆するための書き方で見出しやリストなどを素早く挿入できます。
例えば見出しを挿入したいのであれば## と入力した後にスペースキーを押すだけです
リストなども同様の手順で挿入できるため、カンタンなマークダウン記法だけでも覚えておくと執筆作業が楽になるでしょう。
マークダウン記法は有志の方がわかりやすくまとめてくれていますので、そちらを参考にしてください。
Gutenbergに慣れて装飾作業を効率化しよう
ブロックエディタに慣れてくると感じることですが、Gutenbergのブロック機能に慣れてくると記事の装飾がかなり効率化されます。
当サイトは全記事ブロックエディタで装飾しています。
ボックスなどを追加できるプラグインなどを駆使すればワンクリックでボックスで囲ったりリストをチェックリスト化できたりするので、頑張ってブロックエディタに慣れていくといるといいでしょう。
