皆さんこんにちは、エンドルフィンズのマーケティングロールのイトマンです！
この記事では、WordPressでブログやニュースなどの投稿を行う方向けに、現在のWordPressの標準エディタである「ブロックエディタ（Gutenberg）」の使い方をまとめていきます。
ブロックエディタとは何かから始め、画面構成や基本的な操作はもちろん、いろいろなブロックの使い方まで説明をしていきますので、以下のような方におすすめの記事となっています。
- ブロックエディタを使ったことがない方（初めて使う方や旧エディタを活用されている方）
- ブロックエディタをもっと使いこなしたい方
なお、この記事は「ブロックエディタ」についてのみ説明し、旧エディタ（以降クラシックエディタと記載）に関する操作方法については取り扱いませんのでご注意ください。
目次
ブロックエディタとは
さて、これまで何度も「ブロックエディタ」と書いてきましたが、そもそもこのブロックとは一体なんなのでしょう。
図1
図1は実際にWordPressにて作業を行う際の画面に、いくつかのブロックを挿入した図になります。
実際の操作方法などについては後述いたしますが、ブロックエディタではこの図のように「見出しブロック」や「画像ブロック」といったブロックを配置し、そこに文章や画像を当てはめることで記事を執筆することが可能です。
Webサイト制作に必要なHTMLやCSSなどの専門的な言語を知らなくても、直感的な操作でレイアウト面も含めて作成することが可能なのが、このブロックエディタになります。
ブロックエディタを使うべき理由
WordPressにはブロックエディタの他に、クラシックエディタと呼ばれる旧エディタも存在します。
ブロックエディタが導入されたのが2018年からですので、それまでにWordPressを使い始められた方はクラシックエディタに馴染み深い方も多いかと思います。
ただ、これから学習を始められる方はもちろんのこと、これまでクラシックエディタに慣れていらっしゃった方も、ブロックエディタを学習されることをお勧めします。
理由としましては、ブロックエディタがブラッシュアップされて使いやすくなっているのももちろんありますが、クラシックエディタが2022年末を持ってサポート終了が予定されているためです。
当初は2021年の予定でしたので1年伸びた形になっていますが、おそらく2022年には正式にサポート終了となるでしょう。
参考：Classic Editorプラグインの公式サポート期限更新
※Classic Editorプラグインとは、通常ではブロックエディタになる操作画面をクラシックエディタに変換してくれる公式プラグインです。
2022年でサポートが終わってしまいますので、この記事を見られている方はぜひ、ブロックエディタを学んでいただければと思います。
ブロックエディタの画面構成
ブロックエディタの操作画面は大きく分けて３つのエリアに分かれます。
- メインエリア
- ヘッダーメニュー
- サイドメニュー
それぞれでできることを確認していきましょう。
図2
メインエリア
先ほど紹介したブロックを利用して、文章・画像・動画などを配置していくエリアになります。
具体的にできることや操作方法については、この後のセクション「ブロックエディタの使い方」で紹介いたします。
なお、WordPressではプラグインと呼ばれる数多くの便利な追加機能があるため、各エリアの画面構成が図2と異なる場合があります。
図3
図3はSEO対策を行う際によく利用されている「ALL IN ONE SEO」と呼ばれるプラグインを導入した場合の例となります。
webサイトの目的に応じて導入されるプラグインは異なりますので、図3のように見慣れない操作エリアがある場合には、web制作会社に利用方法などを確認すると良いでしょう。
なお、プラグインの操作エリアには開閉ボタンがありますので、メインエリアの作業で邪魔となる場合には、閉じておきましょう。
ヘッダーメニュー
ヘッダーメニューは管理画面への移動やブロックの追加、保存・公開など記事の内容を問わず共通で利用するボタンが多く設置されています。
| No | 説明 |
|---|---|
① | 投稿一覧(固定ページ一覧)画面に移動します |
② | ブロックを追加することができます |
③ | 編集/選択モードを切り替えることができます |
④ | 元に戻す（１つ戻す）/やり直す（１つ進める）ことができます |
⑤ | 文字数やタイトルなど文章の概要を確認できます |
⑥ | ブロックナビゲーションを表示します |
⑦ | 下書きの保存、完成イメージの確認、投稿のそれぞれが可能です 急なPCトラブル対策のためにも、定期的に下書き保存をすることをお勧めします |
⑧ | サイドメニューバーの表示/非表示を切り替えます |
⑨ | エディタの設定などが可能です |
サイドメニュー
サイドメニューでは投稿の設定や各ブロックの設定が可能です。それぞれの詳細を確認していきましょう。
投稿の設定
投稿に関する設定を行う場合にサイドメニューの「投稿」画面にて操作を行います。
なお、「②テンプレート」・「⑦抜粋」・「⑧ディスカッション」についてはあまり利用する機会が無いと思われます。
| No | 説明 |
|---|---|
① | 公開状態の確認や公開に関する設定が可能です |
② | テンプレートを利用することができます |
③ | URLスラッグを決めることができます |
④ | 執筆している記事のカテゴリーを設定することができます |
⑤ | 執筆している記事のタグを設定することができます |
⑥ | アイキャッチ画像を設定することができます |
⑦ | 要約文を入力できますが、対応していないテーマも存在します |
⑧ | コメントの許可設定などが可能です |
各ブロックの設定
色やテキストの設定を行う場合にサイドメニューの「ブロック」画面にて操作を行います。
なお、今回はよく利用する「段落ブロック」を用いて説明を行います。
利用するブロックによって表示される項目は異なりますが、レイアウト面（画像のサイズや表の色など）を変更したい場合などには、まずはこの項目を確認するといいでしょう。
| No | 説明 |
|---|---|
① | 現在選択しているブロックの種類を確認することができます |
② | テキストの色と背景色を変更することができます |
③ | 段落の先頭文字を大きく表示する「ドロップキャップ」のON・OFFが選択できます |
④ | 文字の装飾に関する設定が可能です |
⑤ | ブロックにCSSのクラスを指定することができますが、通常は利用しません |
ブロックエディタの使い方
ここまで大まかな内容ではありますが、それぞれのメニューでできることを確認してきました。
ここからは、実際に記事を作成していく過程で、どの項目を使っていけば良いのか確認していきましょう。
記事の制作は以下のステップに分かれておりますので、この順で操作方法の確認をしていきます。
特に、「2.本文を入力」と「3.投稿の設定」ではできることが多いため、細かい項目に分けて説明をしていきます。
- タイトルを入力
- 本文を入力
- 投稿の設定
- プレビューで確認し、記事を投稿
タイトルを入力
「タイトルを追加」と書かれた場所にタイトルを入力しましょう。
なお、タイトルはブロックではないため、サイドメニューでブロックを選択しても文字色などの調整をすることはできません。
本文を入力
タイトルの入力後は本文の作成を行います。本文の作成の際には必ずブロックを設置してから、見出しやテキスト、画像などを配置しますので、まずはブロックの操作方法について確認しましょう。
ブロックの操作方法について
ブロックの作成・追加
ブロックを作成・追加する方法は複数あります。
①追加したい場所の「＋」マークを押し、ブロックを選択する（赤枠）
②「ブロックを選択するには「/」を入力」と書かれた場所に「/」を入力し、ブロックを選択する（赤枠）
③ヘッダー部分の「＋」マークから全てのブロックを表示させ、ブロックを選択する（緑枠）
①・②は先に作成したい場所を選択し作業を行う必要がありますが、③であればドラック＆ドロップで任意の場所に作成・追加することも可能です。
③の方がどちらも利用できるため便利ではありますが、全てのブロックが表示されるため必要なブロックを探す手間が少し発生します。
①・②では見出しや段落、画像などよく利用するブロックを厳選して表示してくれるため、探す手間を減らせるメリットがあります。
自分が設置したい内容に合わせて、うまく使い分けることで投稿記事作成のスピードを上げることが可能です。
ブロックの挿入
図4
図5
ブロックの挿入も作成・追加と同様で、先に場所を決定するか、先に追加するブロックの種類を決定します。
作成・追加時と異なる点は、先に場所を決定する場合に、挿入したい場所にカーソルを当てて青い「＋」マークを選択する必要がある点です（図4）。
もしくは、挿入したい場所の前後のブロックを選択し、「•••」から「前に挿入」もしくは「後に挿入」を選択することでも、挿入が可能です（図5）。
それ以外の操作方法につきましては、作成・追加時と同じ方法で挿入が可能となっています。
ブロックの移動
図6
図7
ブロックの移動もいくつかの方法が存在します。
１つ目の移動は、移動させたいブロックを選択後、ドラック＆ドロップで任意の場所に動かす、もしくは１つずつ移動させる方法です。
図6の赤い枠で囲われた部分をドラック＆ドロップすることで、簡単に移動させることが可能ですし、ドラック＆ドロップでの微調整が苦手な方は、緑色の部分で１つずつ場所を変更させることも可能です。
２つ目の移動は、ヘッダー部分にあるブロックナビゲーションをONにした上で、図7のリスト表示で移動させたいブロックをドラック＆ドロップで移動させる方法です。
見出しや段落など簡略化された表記のため、作成記事が長くなった場合でもドラック＆ドロップがしやすい利点がありますが、一方でどの場所の見出しなのかなどが分かりにくい欠点もあります。
こちらも、記事の作成状況などに合わせて使い分けを行うと作業効率が上がります。
ブロックの複製
複製したいブロックを選択し、「•••」から「複製」を選択することで同じブロックが作成されます。
装飾（太字など）も複製されますので、似たような構成のブロックがある際に重宝する機能です。
ブロックの変換
変換したいブロックを選択後、現在のブロックのマークを選択することで変換後のブロックを選択可能となります。
なお、現在のブロックによって変換可能なブロックの種類は異なります。
ブロックの再利用
ブロックの再利用とは、他の記事でも簡単にブロックを使いまわすことができる機能です。
例えば、記事の冒頭の定型文や締めの文章、よく利用する表などを再利用ブロックに登録をしておくことで、同じ文章を毎回打つ必要がなくなる便利な機能です。
図8
再利用したいブロックを選択し、「•••」から「再利用ブロックに追加」を選択する（図8）と、名前を決める画面が表示されますので（図9）、分かりやすい名称を決めましたら保存をクリックします。
図9
図10
保存した再利用ブロックは図10のようにブロック一覧のリストに「再利用可能」タブができますので、他の記事でもそこから選択して利用することが可能です。
＜再利用ブロックの注意点＞
再利用ブロックは「同期」された状態となっています。
同期とは、ある再利用ブロック（例えば、名称：再利用A）の文章をとある記事で変更すると、他の記事でも利用した同じ再利用ブロック（名称：再利用A）の内容も自動で変更してくれることを指します。
この時、他の再利用ブロック（名称：再利用Bなど）には影響はありません。
この機能は、１箇所の修正で複数の記事を変更してくれる素晴らしい機能ですが、誤って修正をしてしまうと、全ての記事で誤った情報となってしまいます。
再利用ブロックを使う際には同期の仕様に気をつけて活用するようにしましょう。
なお、特定のページだけどうしても再利用ブロックの内容を変更したい場合には、「通常ブロックへ変換」をすることで同期が解除されます（図11）
図11
ブロックの削除
削除したいブロックを選択し、「•••」から「〇〇を削除」を選択することでブロックの削除が可能です。
なお、ここでの「〇〇」は選択しているブロックの種類（図では見出し）が表示されます。
ブロックの基本的な使い方
ここまではブロックの基本的な操作方法を確認してきましたので、ここからはブロックの種類を説明しながら、基本的な使い方を解説していきます。
見出しの作成
見出しを挿入時に利用できる機能を紹介します。なお、一部機能は既にブロック操作の説明時に紹介をしているため、割愛しております。
| No | 説明 |
|---|---|
① | 見出しの横幅を「なし（標準）」「幅広」「全幅」から選択することができます |
② | 見出しレベル（H1タグなど）を変更することができます |
③ | テキストの「左寄せ」「中央寄せ」「右寄せ」を選択できます |
④ | 文字を太字にすることができます |
⑤ | 文字をイタリック体にすることができます |
⑥ | リンクの設定をすることができます |
⑦ | ④〜⑥以外の様々なツールを利用することができます |
文章の作成
文章は「段落」ブロックを利用して作成します。「段落」ブロックの機能は全て見出しブロックの機能に含まれているため、上述の表にてご確認ください。
段落の改行は「同じ段落」にする場合と「別の段落」にする場合の２つあります。
同じ段落内で改行を行う場合には「Shift + Enter」、別の段落にしたい場合には「Enterのみ」を入力しましょう。
図12の赤枠と青枠それぞれが段落の塊となっており、このように分けて設定しておくことで、文字サイズや色の変更を段落の塊ごとに設定することができ、操作の手間を削減することも可能です。
なお、文字サイズの変更や色付けなどは、サイドバーにあるブロック設定から可能です。
詳細は「サイドバー 各ブロックの設定」を確認してください。
図12
画像の挿入
図13
「画像」ブロックを追加すると図13が表示されます。
◯アップロード：利用したい画像がWordPress上にない場合には、まずはアップロードから行う必要があります
◯メディアライブラリ：過去にアップロードしている画像を利用する場合には、ここから使いたい画像を選択します（図14）
◯URLから挿入：画像がweb上に存在し、そのURLがわかる場合にURLの指定をすることで画像を表示することができます
図14
画像挿入後は、図15のように挿入した画像とメニューが表示されます。
一部機能は既に紹介している機能となりますので、割愛して説明していきます。
なお、画像のサイズを変更したい場合には「サイドメニューバー」にあるブロックの項目にて修正を行ないましょう。
図15
| No | 説明 |
|---|---|
① | 画像の横幅を「なし（標準）」「幅広」「全幅」から選択することができます |
② | リンクの設定をすることができます |
③ | 画像の加工をすることが可能です |
④ | 画像の上に文字を記載することができます |
⑤ | ツートーンカラー効果を設定することができます |
⑥ | 画像の差し替えを行うことができます |
なお、複数の画像を並べて掲載する場合には「ギャラリー」ブロックの利用もおすすめです。
使い方は画像ブロックとほぼ同じ要領で、画像選択時に複数の画像を一気に選択することが可能となっています。
選択後は図16の画面で掲載順番を調整し、挿入ボタンを押すと図17のように綺麗に並んだ画像を簡単に作成することが可能です。
図16
図17
動画の挿入
「動画」ブロックの利用方法は画像と同じとなっています。手元にアップロードしたい動画がある場合には「動画」ブロックから行いますが、Youtubeなどにアップしている動画を埋め込む場合には「Youtube」ブロックなどが別途準備されています。
動画は容量が大きくなりやすく、ロード時間が長くなってしまいますので、できるだけWordPress上にはアップロードせずYoutubeなどをうまく活用しましょう。
「Youtube」ブロックを設置すると埋め込むURLを求められますので、埋め込みたいYoutubeのURLを入力して埋め込みボタンを押すと動画が挿入されます。
| No | 説明 |
|---|---|
① | 画像の横幅を「なし（標準）」「幅広」「全幅」から選択することができます |
② | URLの編集をすることができます |
リストの作成
「リスト」ブロックでは箇条書きリストと番号付きリストを簡単に作成することが可能です。
インデントも容易につけることが可能で、番号付きリストではインデントに合った付番を自動で行なってくれます。
| No | 説明 |
|---|---|
① | 箇条書きリストにする場合に選択します |
② | 番号付きリストにする場合に選択します |
③ | 設定したインデンントを１つ戻すことができます |
④ | インデントを１つ加えることができます |
テーブル（表）の作成
「テーブル」ブロックにて表を簡単に作成することが可能です。追加したい表のカラム（列）数と行数を入力して「表を作成」ボタンをクリックします。
オーソドックスな表が作成されますので、随時必要な項目を入力していきます。
レイアウト面を変更する場合にはサイドメニューのブロックから、スタイルや色を変更することが可能です。
| No | 説明 |
|---|---|
① | 行・列の挿入・削除をすることができます |
ボタンの作成
「ボタン」ブロックを選択し、テキスト・リンクURLを設定するだけで、簡単にボタンを作ることができます。テキストは「テキストを追加」と書かれた場所に直に入力し、リンクURLはメニューバーから設定していきます。
デザイン面を変更する場合には、サイドメニューからスタイル・色・枠線などを変更することが可能です。
| No | 説明 |
|---|---|
① | スタイルを変更することができます（選択できる項目はサイドメニュー内のスタイルと同じです） |
② | ボタンの配置場所を選択できます |
③ | ボタンブロックの横幅を「なし」・「幅広」・「全幅」に設定できます |
④ | リンクの設定をすることができます |
カラム（段組み）の設定
カラム（段組み）を利用すると、本来であれば１つのブロックを画面の横幅全体で使っていたのに対し、２つのブロック（例えば、画像ブロックと段落ブロック）を横並びにするといったことが可能になります（図18）。
例として２つのブロックを表示していますが、３つ以上のカラムを設定することも可能です。
図18
カラムの操作を行う際には、自分が現在どのブロックを選択しているのか注意するようにしましょう。
例えば図18の画像ブロックのように、カラム全体に写真が反映されているとカラムブロックが選択しにくく、カラムブロックを選択して操作しているつもりが、画像ブロックを操作している場合があります。
確認方法としては図19のように「①選択しているブロックのメニューバーを確認する（赤枠）」か、「②ブロックナビゲーション（リスト表示）を活用する（青枠）」方法があります。
メニューバーでは一番左端のボタンを押すことで１つ上の階層に移動します。リスト表示の場合には、操作したいブロックを選択することで操作したいブロックを選ぶことができます。
図19
リスト表示と実際の画面のカラムの対応関係は図20になります。
カラム全体（赤枠）を選択することでカラムブロックの場所を移動させることができ、サイドメニューからカラム数の変更をすることが可能です。
個別カラム（青枠）では、隣の個別カラムと左右の場所の入れ替えをすることができ、サイドメニューから個別カラムの横幅を変更することが可能です。
図20
投稿の設定
これまでのブロックの操作を通して記事本文を完成させましたら、あとはその記事を投稿するだけとなります。
ここでは、投稿までの流れを確認しながらサイドメニューの「投稿」部分について、確認していきましょう。
ステータスと公開状態の設定
「ステータスと公開状態」では主に「表示状態」と「公開」の設定を利用します。
◯表示状態
公開：すべての人に表示します。
非公開：サイト管理者と編集者にだけ表示します。記事の配信を止めて修正したい時などに活用します。
パスワード保護：パスワードを知っている人のみ閲覧が可能になります。
◯公開
今すぐ：ヘッダーメニューの公開ボタンを押した際に、すぐにweb上に公開されます。
日時指定：ヘッダーメニューの公開ボタンを押してもすぐに公開されず、指定した時刻に自動で公開されます。
パーマリンクの設定
URLのスラッグ（URLの最後の部分）を設定します。
WordPressの設定によっては自動付番される場合もありますが、手動で付番する場合には忘れずに設定しましょう。
なお、初期には自動で「ブロックエディタ」など、タイトルが表示されていることが多いですが、SEOの観点からURLスラッグに日本語は推奨できません。
必ず確認し、タイトルにあった英語で記述するようにしましょう。
また、URLスラッグが表示されない場合には、一度ヘッダーメニューにある「プレビュー」→「新しいタブでプレビュー」を行なってから確認してみてください。
カテゴリーの設定
カテゴリーの設定を行います。
カテゴリーは事前に作成したカテゴリーを選択することもできますし、「新規カテゴリーを追加」から新しくカテゴリーを増やすことも可能です。
ただし、カテゴリーの増やし過ぎも好ましくないですので、執筆方針を決める際にどのカテゴリーに属した記事を書いていくのか考えてから、記事を書くようにしましょう。
タグの設定
タグの設定を行います。
タグはカテゴリーと違い選択式ではなく、記述式となっています。
すでに登録しているタグであれば、途中まで記述することで候補が表示されます。
初めて利用するタグの場合には、最後にEnterを押すことでタグとして登録されますので、次回以降は候補として表示されるようになります。
記事に見合ったタグを複数記述しましょう。
サムネイルの設定
アイキャッチ画像の設定を行います。
「アイキャッチ画像を設定」を選択すると、画像ブロックの時と同様にメディアライブラリが表示されますので、利用したい画像を選択して右下の「アイキャッチ画像を決定」ボタンを押します。
なお、利用したい画像をまだメディアライブラリにアップロードしていない場合には、左上の「ファイルをアップロード」からアップロードを行なってください。
プレビューで確認し、記事を投稿
ヘッダーメニューにあるプレビューボタンを押すと確認したい端末のサイズを選択することが可能です。
また、「新しいタブでプレビュー」では実際のレイアウトに即した形で表示されて確認することが可能です。
予期せぬレイアウト崩れが生じている場合もありますので、公開前に確認するようにしましょう。
問題がなければ、公開ボタンを押して公開（投稿予約）します。
ブロックエディタについてーまとめ
今回はWordPressのブロックエディタの使い方についてまとめました。
ブロックの種類が多く、一見すると使いにくい印象を受けるブロックエディタですが、実際に使っているとすぐに慣れることができ、記事の作成がとてもスムーズになると思います。
クラシックエディタが2022年末でサポート終了になりますので、これを機にぜひブロックエディタを利用してみてください！
Endorphinsでは実際に取り組んで得た知見を活かし、webマーケティングの戦略立案から制作後のサポートまで様々な要望にもお応えできるようにしております。
ぜひお気軽にご相談ください。
