【Gutenbergブロックエディタの使い方】WordPressでブログを書いてみよう！【2022年版】

WordPress（ワードプレス）で記事を書くためには、「エディタ」という内部ツールを使います。

この「エディタ」は2022年3月現在、新型と従来型（利用にはプラグインか搭載テーマが必要）の2種類が利用可能です。

新型の「ブロックエディタ」は、誰でも、直感的に、素早く、ページの仕上がりをイメージしながら記事を書くことができる多機能なツールへ進化しました。

ただ、初心者にも優しくなったとはいえ、初めてだと聞きなれない言葉やボタンばかりで難しく感じてしまうことでしょう。

そこで今回は、ブロックエディタで良く使う機能の説明と、実際にブログ記事を書いて公開する方法について解説していきたいと思います。

「Gutenberg（グーテンベルグ）」ブロックエディタとは？

「Gutenberg（グーテンベルグ）」とは、ブログの記事を書くツールの名前で、WordPressを入れると一緒に導入される標準のエディタです。

このツールの特徴は、文章や画像を1つの「ブロック」として扱い、それを積み上げる形で記事の編集ができること。

文章もブロック、画像もブロック、ボタンもブロック、全部ブロックです。

このため、Gutenbergは「ブロックエディタ」とも呼ばれています。

この「ブロック」のおかげでブログの専門知識がなくても、簡単に記事の編集ができるようになっています。

中でも「再利用ブロック」機能が便利で、良く使うブロック形式をまるごと登録して、他の記事作成時に呼び出すことが可能です。

従来型の「クラシックエディタ」より新型の「ブロックエディタ」を使おう！

現在WordPressのエディタは新型のブロックエディタが標準になっていますが、記事内のブロックタイプを選択することで従来型のクラシックエディタも利用することができます。

昔からWordPressでブログを書いている人は、馴染みのあるクラシックエディタを好む傾向にあります。

優れたカスタマイズ性が高いことや、歴史が長い分ネット上に対応情報が多いことが好まれる理由でしょう。

クラシックエディタは未だに利用者が多く、一度サポート終了予定だった2021年末から、最大2022年末までサポート期間を延長する旨が公式発表されました。

しかし、エディタとしての寿命や将来性を考えると、初めてWordPressでブログを書く人も、前から書いている人も、これからは「ブロックエディタ」を使っていくことをおすすめします。

ブロックエディタで主に使うのは【3か所】だけ！

次はブロックエディタの各項目や機能について解説します。

初めは大量の項目やアイコンボタンに気が重くなるかもしれませんが、ブロックエディタで主に使う部分は次の3か所だけです。

本文は「記事」部分に書いて編集し、ブロックごとの設定変更や記事全体の設定は「右メニュー」で操作します。

「ヘッダーメニュー」はブロックの追加や、プレビュー、公開、といった操作が可能です。

ブロックエディタ「ヘッダーメニュー」

ヘッダーメニューは、下書き保存、プレビュー、公開、設定、オプションといった、他の記事作成時でも同じ項目が表示されるようになっています。

ここで出来る操作は、

などです。

ブロックエディタ「右メニュー」

右にあるサイドメニューでは、上部の切替タブの選択で設定できる項目が変わるようになっています。

ちょっと項目が多いのでタブごとに分けて解説していきます。

右メニュー：投稿タブ

「投稿タブ」では投稿記事や公開時の設定が可能です。

「リビジョン」や「パーマリンク」の設定は一度保存すると表示されるようになります。

右メニュー：ブロックタブ

「ブロックタブ」では、選択中のブロックの状態表示や、詳細設定が可能です。

ブロックエディタの基本的な操作方法【7つ】！

次に、ブロックエディタで良く使う操作について解説していきます。

基本となる操作は、

上記の7つです。

最低限この操作さえできれば、ブロックエディタのメリットは十分活かせるようになります！

「新規ブロックを作る」

まず、ヘッダーメニュー左上の「＋」アイコンをクリックしましょう。

すると利用可能なすべてのブロックタイプが一覧表示されます。

この中から希望のブロックタイプをクリックするだけで記事内に直接挿入することができます。

ブロックエディタ「サイドパネル」が便利！

また、記事エリアで、行末やブロック間にマウスカーソルを移動すると表示される「＋」をクリックすると、使用率の高いブロックタイプが一覧でサイドパネルに表示されます。

このサイドパネルのリストから希望のブロックタイプをクリックするだけで、記事エリアに挿入することもできます。

ブロックエディタ「フローティングツールバー」を使いこなそう！

記事ブロックにマウスカーソルを合わせ、クリックすると、「フローティングツールバー」を表示することができます。

このフローティングツールバーには、

といった、通常の記事作成時に良く使う機能が主に配置されています。

これを使いこなせれば記事作成の効率が格段にUPするでしょう。

「ブロックタイプを変更する」

変更したいブロックにマウスカーソルを合わせて、フローティングツールバーを表示します。

そのまま「ブロックタイプ変更アイコン」をクリックして、変換したいブロックをクリックしましょう。

簡単にブロックタイプの変更ができます。

「ブロックを移動する」

移動したいブロックを選択した状態で、フローティングツールバーの「上下矢印」を操作するだけです。

「ブロックの複製を作る」

複製を作りたいブロックのフローティングツールバーの「オプション」から「複製」をクリックします。

選択したブロックの直下に複製ブロックが作成されます。

「再利用ブロックに登録する」

登録したいブロックのツールバーの「オプション」から「再利用ブロックに追加」をクリックしましょう。

名前を入力し「保存」をクリックすれば登録完了です。

「再利用ブロックを使用する」

続いて登録した再利用ブロックを使う方法です。

ヘッダーメニューの「＋」からブロックタイプ一覧画面を開き、「再利用可能」タブを選択します。

過去に登録済みのブロックが一覧表示されるので、希望のブロックをクリックします。

「ブロックごと削除する」

ブロックメニューの詳細設定から、「ブロックを削除」をクリックするだけで削除できます。

ブロックエディタで記事を書いて公開してみよう！

実際にブロックエディタを使った記事の書き方と公開までの手順を解説します。

「投稿画面を開いて」→「ブロックを使って記事を書いて」→「実際に公開」といった流れです。

初めはあまり考え過ぎずに、ここの手順を見ながら記事を作ってみて下さい！

「下書き保存」しよう！

とにかく投稿画面を開いて、1つでも作業をしたらすぐ下書き保存をしましょう！

もし、ブログ記事を書いている最中にWordPressやブラウザの調子が悪くて止まってしまったりすると…

最悪、頑張って書いた記事が全部消えてしまうかもしれません。

自動保存機能もありますが、タイミングによっては保存されていなかったりするので過信は禁物。

手動で保存する癖をつけてください。

「タイトル」を決めよう！

まず、記事エリアの「タイトルを追加」部分に、記事タイトルを入力しましょう。

「記事」を書こう！

次は、先ほど解説した「ブロック」を駆使して記事（本文）を書いていきます。

「段落」を作る

「段落」は、画面内にカーソルを合わせてEnterを押すだけで簡単に作成できます。

段落内で改行したい場合は「Shift+Enter」、段落を新しく作りたい場合は「Enter」を押します。

「見出し」を入れる

「見出し」は、通常の段落に見出し文を入力して、フローティングツールバーのブロックタイプ変更から「見出し」を選択するだけで作ることができます。

箇条書き「リスト」を使う

「リスト」を使いたい場合は、リスト化したい段落全てを選択した状態にします。

表示されたツールバーのブロックタイプ変更で「リスト」を選ぶと、選択した段落がまとめてリスト表示に切り替わります。

「画像」を入れる

ヘッダーメニューの「＋」から、「画像」を選択すると、画像のアップロード画面が開きます。

アップロード方法は、

と3種類選択できますが、一番使いやすい方法は、

表示されているアップロード画面枠内に入れたい画像を直接ドラッグアンドドロップする

ことです。

画像がアップロードできると、記事エリアのブロックに画像が挿入されます。

挿入した画像は右メニューで、画像サイズやスタイル、Altテキスト（画像のリンクが切れてしまった時に表示する代替テキスト）の設定が可能です。

「投稿設定」をしよう！

ブロックを使って記事を書いたら、いよいよ「公開」するための設定をしていきましょう！

「パーマリンク」を変更する

「パーマリンク」とは、ブログの記事ごとのURLです。

初期状態ではタイトルにした文字がそのまま日本語で入力されてしっているので、英語に変更しておきましょう。

WEBブラウザは基本的に半角英数字や一部の半角記号しか扱えないので、URLが日本語だと文字化けしてしまうからです。

最近は日本語URL対応のブラウザも増えて、日本語の場合は自動的に半角英数字や記号に変換処理してくれるので、上記のような文字化けを見る機会は少なくなりました。

しかし、ブラウザによっては日本語が上手く変換できず、リンクが正常に働かない場合もあります。

日本語URL対応してないブラウザを使っている人もまだまだいますので、URLはこの投稿設定の段階で半角英数字・記号に変換するようにしましょう。

「カテゴリー」と「タグ」を設定する

続いて、右ニューから「カテゴリ」と「タグ」の作成、設定を行います。

「カテゴリー」とは、記事を種類別にまとめたフォルダのようなもので、「タグ」は、関連する記事を「札」を貼り付けて目印をつけるイメージです。

「カテゴリーは1記事に対して1つ」、「タグは1記事に対して3～4個程度」が一般的に望ましいと言われています。

ここで一つ注意ですが、「カテゴリー」や「タグ」を新規で追加した場合、URLに表示されるカテゴリーやタグ部分も日本語となってしまいます。

URLの時と同じく、英語化するのを忘れないようにしましょう。

まず、WordPress管理画面の左メニュー「投稿」の「カテゴリー」を選択し、新規作成したカテゴリーの「クイック編集」をクリックしてください。

「スラッグ」の枠に英語でタグを入力し直したら「カテゴリーを更新」をクリックして完了です。

「アイキャッチ画像」を設定する

「アイキャッチ画像」とは、言葉通り読者の目を引き付ける目的の画像です。

記事のタイトルや内容に合うアイキャッチ画像を設定すると、読者がページの内容を想像しやすくなり、読まれる確率も高くなるので必ず設定するようにしましょう！

右メニューの「アイキャッチ画像を設定」をクリックすると画像登録画面がポップアップします。

「メディアライブラリ」から登録済みの画像を選択するか、「ファイルをアップロード」タブに変更して、新規のアイキャッチ画像を直接ドラッグアンドドロップで登録することができます。

登録が終わったら、アイキャッチ画像が反映されているのを確認して完了です。

「プレビュー」で確認してみよう！

記事が出来あがったら、公開前に「プレビュー」機能で記事全体の確認をしてみましょう。

ヘッダーメニューの「プレビュー」をクリックすると、公開せずにブラウザで表示することができます。

確認して問題無ければ、公開前の設定と確認はすべて完了です！

「公開」しよう！

記事の準備が整ったので、早速「公開」してみましょう！

ヘッダーメニューの「公開する」をクリックしたら、記事の公開完了です！

「Gutenberg」ブロックエディタを使えば気持ちよくブログが書ける！

今回は、WordPressで初めてブログの記事を書く人向けに、

といった、とりあえず記事を公開するために必要な最低限の手順や、機能の解説をしました。

実は、ここで紹介しきれかったブロックタイプや機能、便利な使い方がまだまだあります。

ですが、まずはどんどん記事を書いて「Gutenberg」ブロックエディタに慣れましょう。

それが一番早くブロックエディタを使いこなすための近道になります。

WordPressを始めたばかりでブロックエディタの使い方に困っている方が、このページを読んで参考になれば嬉しいです！

今回も読んで頂き有難うございました！

ブログについてもっと知りたい、始め方が分からない人へ！

ブログを始めようTOPへ