MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

【絶対に知っておくべき】ブロックエディタの概要と基本的な使い方

ブロックエディタの基本操作を、画像をふんだんに使ってわかりやすく解説しました。

ブロックエディタGutenbergは、WordPress バージョン5から採用された新しいエディターです。

2018年の導入当初は使いにくいと非難ごうごうでしたが、今ではかなり浸透してきています。新しくブログを始めたユーザーは、クラシックエディタを使わずにブロックエディタのみという方も多いでしょう。

バージョン5.8からは「ウィジェット」でブロックを使用するようになり、ブロックエディタの重要度はさらに増しています。

必須のブロックエディタについて、簡単に学んでいきましょう

目次

ブロックエディタの概要

さまざまなブロックの種類のサンプル

ブロックエディタでは、一つ一つのパーツ(ブロック)を組み合わせることによって、文章を作成していきます。

ブロックを移動したり、コピーしたりが簡単にできます。

以下は実際の編集画面のサンプルです。

ブロックエディタの概要、メニュー画面
SWELLのテーマを使用中

カーソルを置いているブロックに対する設定項目が、右側に表示されます。ここで各種の設定や装飾付けをします。

右側に表示される項目は、使用しているWordPressテーマによって異なるんだ。

だから、使いやすい高機能テーマを選ことが大切だよ。

それでは、簡単な使い方を見ていきましょう。

ブロックエディタの基本操作

ブロックを挿入する

新しいブロックを挿入するには、 ボタンをクリックします。

新しいブロックの挿入方法

左側にブロックメニューが表示されます。

左側の一覧から、目的のブロックを選択します(表示されるブロックは、使用しているテーマやプラグインによって異なります)。

ブロックの一覧が表示された

「リスト」ブロックが表示されました。編集バーも上に表示されます。

メニューを表示するには、歯車マークを押します。

リストブロックを表示した画面

編集バーの右側の を押すと、ブロックの削除や複製などの「ブロック全体」に対する操作が可能です。

特定のブロックに対するメニュー画面の表示

ブロックの種類を変更する

現在選択しているブロックを、別の種類のブロックに変更できます。

変換したいブロックを選択し、一番左のボタンを押して、目的のブロックを選びます。

ブロックの種類を変更する方法

ブロックを上下に移動する

次は、ブロックの移動方法を説明します。ブロックの移動には、2つの方法があります。

  1. 矢印ボタンで移動する方法
  2. ドラッグで移動する方法

①矢印ボタンで移動する方法

移動したいブロックを選択します(複数選択の場合は、ドラッグするか、Shiftを押しながら選択します)。

範囲選択したら、上か下向きの矢印ボタンを押して移動します。

ブロックを移動する方法、矢印で移動

②ドラッグで移動する方法

移動したいブロックを選択したら、ドット部分をクリックでつかみ、上か下に移動します。

ブロックを移動する方法、ドラッグで移動

スペースを挿入する

記事上でスペースを空けたい場合、「改行」をたくさん入れてもスペースは入りません。HTML上で不要なスペースとみなされて削除されてしまいます。

ブロックとブロックの間にスペースを空けたい場合は、「スペーサー」を使用します。

ブロック一覧から「スペーサー」を選択すると、スペーサーを挿入できます。下の○印をドラッグすると、スペースのサイズを変更できます。

スペースを入れる方法

ブロックの階層構造を理解する

ブロックエディタの特徴である、ブロックの階層構造を理解しましょう。

ブロック・イン・ブロック

ブロック内に他のブロックを含むことができます。

通常カラムなどは2層以上の構造になっています。ボックス類は「外枠」と「内側のコンテンツ」の2層で構成されています。

ブロックの中にブロックが入っている図

下のバーで階層を選択する

下のバーに、ブロックの階層が表示されます。

ここで、「階層内のどのブロックを選択しているか」を確認できます。目的のブロックをクリックして選択できます。

ブロックの階層を、下のバーで確認する

グループ化と解除

複数のブロックをまとめるには、「グループ」ブロックを使用します。

移動するときにバラバラになるのを防ぐ」目的や、「外枠の装飾を付ける」などの目的で使用します。

不要になったブロックは、「ブロック解除」できます。

ブロックのグループ化と、グループ解除

全体的な操作と設定

文字数の確認

執筆中に文字数を確認したい場合は、左上の i ボタンを押します。文字数や見出しの構成を確認できます

i ボタンを押して、文字数や単語数、見出しの構成を確認

ブロック要素のリスト表示

三本線をクリックすると、ブロックの一覧を「リスト表示」できます。一覧からリストを選択することもできます。

三本線を押して、ブロックのリストを表示

ブロックマネージャーで表示ブロックを選択

ブロック一覧に大量のブロックがありすぎて分かりずらいと感じるかもしれません。

ブロックマネージャー」を使用すると、不要なブロックを非表示にできます。

ブロックの一覧に、不要なブロックを表示しない方法

右上の をクリックし、ブロックマネージャー を選択します。

表示された一覧で、不要なブロックのチェックを外します。

ブロックマネージャーで、不要なブロックを非表示にする

「投稿」タブ内の設定と操作

「投稿」タブ内で行う主な操作は、以下の通りです。

ファイル名を指定

ファイル名を「URLスラッグ」に入力します(表示されていない場合は、下書き保存 を一度クリック)。

ファイル名には英数字とハイフンのみを使用します(日本語は文字化けするので避ける)。

投稿タブのURLスラッグに、ファイル名を入力する

カテゴリーとアイキャッチ画像の設定

目的のカテゴリーにチェックを入れます(複数可)。

記事トップに表示する画像(アイキャッチ画像)もここで設定します。

カテゴリーの選択と、アイキャッチ設定

記事を公開する

記事を公開するには、右上の 公開 ボタンを押します。

確認画面が出たら、もう一度 公開 画面を押して公開します。

公開ボタンで記事を公開

サイドバーを外して1カラムにする

当該ページでサイドバーを外して1カラム表示にしたい場合は、下記の箇所で設定します。

サイドバーを外して、1カラムの記事にする、Cocoon、SWELL、AFFINGER6の画像

SWELL:サイドバーの解説記事


次は個々のブロックの解説だよ

次の記事では、一番使用されることの多い「段落」、「ボックス」、「リスト」ブロックの使い方について解説します。

次は「記事の書き方 2

よかったらシェアしてね!
目次
閉じる