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

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

ブロックエディタの概要と基本的な使い方|Cocoon編

目次

ブロックエディタの概要

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

導入当初は大変使いにくいと非難ごうごうでしたが、2018年12月にリリースされてから2年以上になり、ユーザーの間ではブロックエディタがかなり浸透してきています

特にここ1年で新しくブログを始めたユーザーは、クラシックエディタを使わずにブロックエディタのみという方も多いでしょう。今後新しくブログを始められる方の間でますます増えていくことが予想されます。

バージョンアップに伴って、ますます使いやすくなっているブロックエディタについて学んで行きましょう。

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

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

実際の編集画面で見ると、以下のようになります。

SWELLのテーマを使用中

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

選ぶブロックによって表示される設定項目は異なります。

ブロックを一つ一つ組み立てることで、文章を作成します。

新しいブロックの挿入とオプション

新しいブロックを挿入するには、以下の手順で行います。

STEP

ボタンをクリックします。最近使用したブロックの一覧が表示されます。

ここに表示されていないブロックを選択するには、すべて表示 をクリックします。

STEP

左側にブロックメニューが表示されます(下までたくさんあります)。

表示されるブロックは、使用しているテーマやプラグインによって異なります

ここでは試しに リスト を選択します。

STEP

リストブロックが現れます。

上のバーには「リストブロック」特有の編集メニューが表示されます。ビュレット(・)や数字付きのリストを作成できます。

右上の歯車メニューを押すと、右側にメニューが表示されます。

STEP

歯車メニューを押すと、選択中のブロックに対するオプション設定を表示できます。

編集バーの右側の ・・・ を押すと、ブロックの削除やコピーができます。

文字数、見出しの構成の確認

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

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

ブロックの種類を変更する手順について説明します。

STEP

ここでは、リストブロックを段落ブロックに変更してみましょう。

変更したいブロック内にカーソルを置き、ブロックの変換ボタンを押します。

STEP

リストブロックから変換可能な、他のブロックが表示されます(ここで表示されるブロックは、選択しているブロックにより異なります)。

ここでは段落をクリックします。

STEP

リストブロックが段落ブロックに変換されました。

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

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

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

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

STEP

移動したいブロックを選択します。

1つのブロックの場合は、カーソルを置いているブロックが対象になります。複数のブロックを同時に移動したい場合は、ドラッグで範囲選択します。

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

STEP

選択したブロックが、上に2ブロック移動しました。

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

次は、ドラッグで移動する方法を説明します。

STEP

移動したいブロックを選択します。

編集バーのドットの上にカーソルを置くと、矢印が手のひらマークに変わります。

STEP

カーソルが手のひらの形に変わったら、クリックして下向きにドラッグします。

移動する先のブロック間が青いバーで表示されます。

STEP

希望の場所に青いバーを移動したら、マウスを離します。

目的のブロックが下に移動しました。

記事の公開、アイキャッチ画像の設定

次に、記事の公開方法について説明します。

STEP

公開するファイルに名前を付けるには、「パーマリンク」下の「URLスラッグ」に名前を入力します。

URLスラッグが表示されていない場合は、下書き保存 を一度クリックすると表示されます。

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

STEP

次に、カテゴリーを選択します。

アイキャッチ画像を設定します。このアイキャッチ画像は、記事のトップに表示されたり、記事一覧のサムネイルとして使われる画像です。

STEP

アイキャッチを設定出来たら、右上の 公開 をクリックします。

(公開する前に表示を確認するには、隣の プレビュー を押すと表示できます)

STEP

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

今後確認が不要な場合は、「公開前チェックを常に表示する」のチェックを外して非表示にすることもできます。

今回は、ブロックエディタの簡単な概要を説明しました。


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

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

次は「記事の書き方 2

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