WordPress

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

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

WordPressでブログを書こうとしたけど、知らない言葉ばっかり出てくるしエディタの使い方もわからない!

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

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

従来型の「クラシックエディタ」

  • 投稿を1ページ単位で編集する。中~上級者向け。

新型の「Gutenberg(グーテンベルグ)」(ブロックエディタ)

  • 投稿ページ内の文章や画像をブロック単位で編集する。初心者向け。

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

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

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

あふ太

従来型の「クラシックエディタ」はサポート終了予定だから、これからWordPressを始める人は「ブロックエディタ」でブログを書くようにしよう!

このページは、

  • Gutenbergブロックエディタの使い方
  • Gutenbergブロックエディタでブログ記事を書く手順

について書いてあるよ!

「Gutenberg(グーテンベルグ)」ブロックエディタとは?

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

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

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

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

WordPress【ブロックエディターを使った記事の書き方】1

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

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

あふ太

初めて「ブロックエディタ」を使うときは「積み木」をイメージすると書きやすいよ!

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

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

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

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

WordPress【ブロックエディターを使った記事の書き方】2.1

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

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

あふ太

ブロックエディタに移行したばかりの時は違和感がすごいけど、使い慣れてくると記事を書くスピードが段違いに早くなるよ!

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

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

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

WordPress【ブロックエディターを使った記事の書き方】3

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

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

あふ太

このページの画像はWordPress初期状態のまま撮ったから、テーマや入れているプラグインによっては項目や配置がちょっと違うかも!

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

WordPress【ブロックエディターを使った記事の書き方】4

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

ここで出来る操作は、

右上ボタン

  • 下書き保存
  • プレビュー
  • 公開

左上ボタン

  • ブロック挿入ツールの表示
  • 選択ツールの切替
  • 現在の文字数、段落数の詳細
  • 元に戻す・やり直す

などです。

あふ太

良く使うものは右上に集中してるよ!

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

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

投稿タブ

  • 記事の公開設定

ブロックタブ

  • 各ブロックごとの詳細設定

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

右メニュー:投稿タブ

WordPress【ブロックエディターを使った記事の書き方】5

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

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

あふ太

「テンプレート」「抜粋」「ディスカッション」を使うことはあんまりないかも!

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

WordPress【ブロックエディターを使った記事の書き方】6

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

あふ太

選択しているブロックによって、表示される内容が変わるからね!

あと、テーマによってこの部分の表示はかなり違ったものになるよ!

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

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

基本となる操作は、

上記の7つです。

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

「新規ブロックを作る」

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

WordPress【ブロックエディターを使った記事の書き方】9

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

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

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

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

WordPress【ブロックエディターを使った記事の書き方】7

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

あふ太

ボク的にはヘッダーメニュー左上の「」より、サイドパネルの方が使いやすい!

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

WordPress【ブロックエディターを使った記事の書き方】8_フローティングツールバーを使いこなそう

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

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

WordPress【ブロックエディターを使った記事の書き方】16

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

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

あふ太

通常の書式設定とかブロックタイプの変更とか、リンク作成もここからできちゃうよ!

ツールバーは選択ブロックの直上に表示されるから、マウスの移動距離が短くて効率的!

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

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

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

WordPress【ブロックエディターを使った記事の書き方】10

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

あふ太

ブロックタイプの変更リストで表示されるのは、変更可能なものだけだよ!

使っているテーマや、選択したブロックタイプによって変わるから注意してね!

「ブロックを移動する」

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

WordPress【ブロックエディターを使った記事の書き方】11
あふ太

記事を書いてる途中で、項目の順序を入れ替えたくなったときに便利だよ!

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

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

WordPress【ブロックエディターを使った記事の書き方】12

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

あふ太

同じ内容のブロックを作りたい時に便利だよ!

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

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

WordPress【ブロックエディターを使った記事の書き方】13

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

あふ太

良く使いそうなブロックを作ったら、すぐに登録しておこう!

他の記事を書く時でも、同じブロックがすぐ使えて便利だよ!!

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

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

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

WordPress【ブロックエディターを使った記事の書き方】14

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

あふ太

ブロックタイプだけじゃなくて、良く使う言い回しとか定型文も登録できるよ!

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

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

WordPress【ブロックエディターを使った記事の書き方】15
あふ太

要らないブロックをそのままにしておくのは投稿画面が重たくなる原因の一つだよ!

マメに消す癖をつけよう!

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

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

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

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

「下書き保存」しよう!

WordPress【ブロックエディターを使った記事の書き方】17.1

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

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

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

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

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

あふ太

集中したり、慣れてきた時ほど忘れがち!

後回しにしないでマメに保存する癖をつけよう!

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

WordPress【ブロックエディターを使った記事の書き方】18

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

「記事」を書こう!

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

「段落」を作る

WordPress【ブロックエディターを使った記事の書き方】19

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

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

あふ太

段落に入力した文字は、右メニューのブロックタブで、文字色や背景色、サイズの変更ができるよ!

「見出し」を入れる

WordPress【ブロックエディターを使った記事の書き方】20

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

あふ太

見出しの順番を間違えないように気を付けよう!

  • H1 タイトル
  • H2 見出し
  • H3 中見出し
  • H4 小見出し

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

WordPress【ブロックエディターを使った記事の書き方】21

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

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

あふ太

「リスト」も右メニューのブロックタブから、文字サイズや色の変更ができるよ!

あと、ツールバーで「番号付きリスト」を選んだ場合は、リストの開始番号も指定できたりして便利!

「画像」を入れる

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

WordPress【ブロックエディターを使った記事の書き方】22

アップロード方法は、

  • アップロード」新しい画像をサーバーに登録する
  • メディアライブラリ」サーバーにアップロード済みの画像を使用する
  • URLから挿入」指定したURLから画像を読み込みたい

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

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

ことです。

WordPress【ブロックエディターを使った記事の書き方】23

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

WordPress【ブロックエディターを使った記事の書き方】24

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

あふ太

画像ブロックは、段落ブロックとまたちがうフローティングツールバーが表示されるよ!

画像を入れ替えたいときの「置換」もツールバーから選択できるよ!

「投稿設定」をしよう!

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

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

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

WordPress【ブロックエディターを使った記事の書き方】25

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

WordPress【ブロックエディターを使った記事の書き方】26.1

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

こわ!

怪しげなサイトに見える!

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

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

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

あふ太

「パーマリンク」の設定は、1回下書き保存してからじゃないと表示されないから注意してね!

あと、WordPress側のパーマリンク設定によっては、投稿設定時に変更できない場合もあるよ!

詳しいパーマリンクの解説は下のページを読んでみてね!

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

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

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

WordPress【ブロックエディターを使った記事の書き方】27

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

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

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

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

WordPress【ブロックエディターを使った記事の書き方】28

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

あふ太

「カテゴリー」の方が大きい分類になるのでブログとしての重要度は高くなるよ!

重要度が低い「タグ」のページは、このブログでも紹介しているプラグイン「All in One SEO」を使って「noindex(検索エンジンに登録しない)にすることが多いよ!

All in One SEO」について詳しく知りたい人は下のページを読んでみてね!

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

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

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

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

WordPress【ブロックエディターを使った記事の書き方】29.1

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

WordPress【ブロックエディターを使った記事の書き方】30

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

あふ太

綺麗なアイキャッチ画像が設定されていると、ブログ全体の見映えもよくなるから絶対設定した方がいいよ!

アイキャッチ画像の簡単な作り方や、便利なツールに関しての情報は下のページを読んでみてね!

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

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

WordPress【ブロックエディターを使った記事の書き方】31

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

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

あふ太

ブロックエディタで綺麗に見えても、実際にブラウザで表示させると微妙にズレてたりするからちゃんと「プレビュー」して確認するようにしてね!

ブログを書いている途中でも確認してみるといいよ!

「公開」しよう!

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

WordPress【ブロックエディターを使った記事の書き方】32

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

あふ太

お疲れさま!これでGutenbergを使ってWordPressの記事が書けるようになったね!

まだまだたくさんの機能があるんだけど、時間をかけて覚えていこう!

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

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

  • Gutenberg(ブロックエディタ)について
  • Gutenberg(ブロックエディタ)の各種機能について
  • Gutenberg(ブロックエディタ)を使って実際にブログを書く手順

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

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

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

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

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

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

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

あふ太

「あふたろぐ」では「初心者でも分かりやすいブログの始め方・運営方法」を紹介してるよ!

ブログを始めてみたい!ブログ運営の全体像を知りたい人はコチラ!

あふ太

WordPressブログを実際に始めたい人向けの、おすすめの開設方法はコチラ!

ブログを始めようTOPへ

-WordPress
-, ,