【WordPress】ブロックエディタの使い方 – 基本編 –

2021/10/22

WordPress

WordPressでWebサイトを運用されている方に質問ですが、WordPressの投稿画面ってすごく使いにくくないですか？

名称をブロックエディターというのですが、投稿画面の各種UIも、チュートリアルが特にないのでわかりづらいですし、文章を書いたり、画像を掲載するのもわかりにくい…

僕は、WordPressの投稿画面が今の状態になった際に、率直にそう感じました。

しかし、しっかりと使い方を理解すれば、ただ文章を書くだけのエディターよりも間違いなく使いやすく、スピーディーにページの作成をすることが可能です！

今回は、そんなWordPressの投稿画面に採用されている、ブロックエディターの使い方について、基本編として紹介をさせていただきます。

これからWordPressを触るという方や、現在WordPressを運用していて、使いにくさを感じているという方はぜひこちらの記事をご覧ください！

ブロックエディターとは

ブロックエディターは、WordPressで「投稿」や「固定ページ」で新規ページを作成する際に使用するエディターになります。

2018年に旧エディター（クラシックエディター）から、正式名称Gutenberg（グーテンベルク）というブロックエディターになりました。

そもそもエディターとは、以下のようなものを指します。

編集用アプリケーションプログラムの総称。文字データを扱うことからワープロ・ソフトと似ているが、主にプログラムを作成するためにつくられたもの。単にエディターーという場合、文字情報の編集を目的とするテキストエディターーを指す。ワープロ・ソフトに比べて規模が小さく、市販ソフトのほか、インターネットで配布されているオンラインウェアも多い。テキストエディターーのほか、画像を編集するグラフィックエディターー、音楽を作成する音楽エディターー、HTMLやCGIを作成するためのHTMLエディターーなど、さまざまな種類のエディターーがある。

出典元：コトバンク

ということで、有名なものだと、Windowsのパソコンに入っている「メモ帳」や、MicrosoftのWord（ワード）などは、文字を扱うエディターの一種ですね。

さまざまな用途に対してエディターという言葉が使われていますがWordPressのブロックエディターは、文章や画像などのページのコンテンツを作成、編集するためのものだと思えばOKです。

このブロックエディターの特徴として、文章や画像といったコンテンツを、それぞれ一つのブロック（かたまり）として組み立てていくものとなっています。

この特徴の利便性については、別のセクションにてより理解できる形でご説明していきます。

投稿・固定ページを作成する流れ

投稿や固定ページを作るためにはこのような流れでページを作成していきます。

この過程で、ブロックエディターを扱い、コンテンツ部分を作成したり、記事の公開設定などを行っていく形になります。

投稿、固定ページともに、ページを作成する方法は別の記事でまとめていますので、こちらをご覧ください。

【WordPress】投稿の使い方・ページの作り方まとめ【ブロックエディタ版】

【WordPress】固定ページの使い方・作り方まとめ【ブロックエディタ版】

基本的なブロックを覚える

では、さっそくブロックエディターを使って、ページのコンテンツを作っていきましょう。
今回の記事では、ページを作るうえで使用頻度の高いブロックを4つご紹介します。

ブロックエディターの操作画面の解説はこのあと説明します。
まずは、操作画面をより理解するために、まずはブロックの概念をつかみましょう。

これから紹介する4つのブロックは、それぞれ投稿画面の上部にある青いプラスマークをクリックし、各種ブロック選択画面より使用していきます。

段落ブロック

まずは、段落ブロックについて説明します。

段落ブロックとは、その名の通り、文章の段落を作成する場合に使用するブロックです。

投稿も固定ページも、ほぼ必ず文章が入力されるはずですので、その文章の段落ごとにこの段落ブロックを使用することになります。
おそらく一番利用されるブロックです。

段落ブロックの使用方法

ブロックの選択画面から「段落」を選択しするか、コンテンツエリアで「Enterキー（改行）」を行うことで使用することができます。

段落ブロックを選択中、「Enterキー」を入力すると改行ではなく新しい段落ブロックを生成します。
もし、一つの段落ブロック内で文章の改行を行いたい場合は、「Shiftキー＋Enterキー」を入力して、段落ブロック内で文章の改行を行いましょう。

また、段落ブロックは、テキストの左寄せ・中央寄せ・右寄せを指定することができます。

見出しブロック

次は、見出しブロックについて説明します。

見出しブロックは、文章の見出しになる箇所に対して使用するブロックです。

見出しは、文章や情報を適切に区切り、その内容を簡潔に表す項目としての役割があります。そのため、投稿や固定ページにおいても欠かせない存在です。

なので、段落ブロックに次いで、使用頻度の高いブロックとなります。

見出しブロックの使用方法

ブロックの選択画面から「見出し」を選択することで使用することができます。

見出しには情報の親子関係、入れ子関係によって、大見出し・中見出し・小見出しのようにいくつかの種類があります。

具体的には、H1〜H6までの6段階の見出しが用意されているので、文章構造によって、使用する見出しの大きさを使い分けましょう。
※見出しを適切に用いることは、Googleのサイト評価にもつながっていきます

段落ブロックと同様、左寄せ・中央寄せ・右寄せも可能という点も覚えておきましょう。

画像ブロック

次は画像ブロックです。

画像ブロックは、図や写真などの画像を用いたい場合に使用するブロックです。
わかりやすいページを作るためには適宜画像を用いると効果的ですので、こちらも利用頻度の高いブロックといえます。

画像ブロックの使用方法

ブロックの選択画面から「画像」を選択することで使用することができます。

「アップロード」から掲載したい画像をアップロードするか、すでにアップロードされた画像をメディアライブラリから選ぶ、画像のURLを直接挿入する方法があります。

掲載した画像は、その画像の見出しないし説明文となるキャプションを入力することができます。

などが行なえます。

また、画像に関しては右側のサイドバーから以下の設定も行えます。

• 画像の角丸などのスタイル指定
• Altテキストの指定
• 画像サイズの指定
• 寸法指定

特に、「Altテキストの指定」は重要です。
これは、画像が表示されない場合にここに入力したテキストが画像の代わりに表示され、画像の説明になることや、Googleの検索エンジンのクローラーに画像の内容を伝える役割も果たしています。

リストブロック

最後はリストブロックです。

リストブロックは、何か情報をリスト形式で掲載したい場合に使用するブロックです。
箇条書きで項目をまとめる場合にも利用できます。

リストブロックの使用方法

ブロックの選択画面から「リスト」を選択することで使用することができます。

1つ目の項目を記入した後、「Enterキー」で改行をすることで、リストを増やすことができます。

また、リストの文頭で「Spaceキー」を入力することで、インデントをズラすことができます。

リストの種類も、

• 箇条書きリスト
• 番号付きリスト

と選ぶことができるので、手順などを記したい場合は「番号付きリスト」を選択してもよいでしょう。

まず、この4つのブロックを扱うことができれば、簡単なページ構成を作成することができます。

ブロックエディター（投稿画面）の画面説明

では、基本的なブロック4つを覚えたうえで、ブロックエディターの投稿画面の画面説明を行っていきます。

ブロックエディターの投稿画面は、大きくこのように分けることができます。

それぞれ、以下のような名称となります。

それでは、順番に解説していきます。

WordPressエディタートップメニュー

投稿画面の上部が、「WordPressエディタートップメニュー」となります。

それぞれの機能を紹介します。

ブロックエリア

これは正式名称ではないのですが、ブロックを追加するためのエリアをブロックエリアとしました。

ブロックエリアには、今回紹介した4つのブロックだけでなくさまざまなブロックが用意されています。

応用編となる記事では、より実践的なブロックの紹介やその使い方などもご紹介する予定なので、記事の公開をお待ちください。

エディター

文章を書いたり、画像を掲載したりと、ページのコンテンツを作成する部分がエディターになります。

ここで、ブロックを用いたページの作成を行っていきます。

ブロックツールバー

エディターにブロックを配置した際に出現するのがブロックツールバーです。

ブロックツールバーは以下のような構成になっています。

各ブロックに応じたカスタマイズ設定の項目が用意されているだけでなく、よく使用するブロックを定型文のように登録する機能などもあります。

このあたりも応用編となる記事の方で詳しく説明いたします。

WordPressエディターサイドバーメニュー

画面右側のサイドバーが、WordPressエディターサイドバーメニューになります。

WordPressエディターサイドバーメニューは、ページを公開するにあたって行う設定やブロックの詳細設定などを行います。
なお、固定ページの場合は項目が投稿と異なります。

詳しくは以下のような構成になっています。

まとめ

今回は、WordPressのエディターであるブロックエディター（Gutenberg）の説明と、基本的な4つのブロックをご紹介、投稿・固定ページの投稿画面の画面説明を行いました。

記事を読む前よりも、WordPressの投稿画面について親しみを持っていただけたのではないでしょうか？

今回ご紹介したブロックを使いながら、まずは投稿画面に慣れていただくことでブロックエディターの使いやすさを少しずつ実感していっていただければと思います。