≫ 超高速!Wordpressブログの始め方はこちら

ブロックエディターの使い方をやさしく解説【WordPressテーマSWELL】

ブロックエディター初心者必見
この記事のまとめ

ブロックエディター(Gutenberg)の使い方をやさしく解説!

これを読めば、ブロックエディターの基本をマルっと押さえられます。

ブロ美ちゃん

クラシックエディターは使えなくなると聞いたので、そろそろブロックエディターに対応しなきゃ・・・。

でも、ブロックエディターって、なんだか難しそうなんですよね・・・。

ヒナキラ

それが、実はとっても簡単。

慣れれば、記事を書くスピードも速くなって効率的に執筆できるようになります。

もはや、僕はもうクラシックエディターには戻れません。

ブロックエディターが気になっている・・・

ブロックエディターの使い方が良く分からない・・・

ブロックエディターのことをもっと知りたい。

こんなお悩みがある方のために、ブロックエディターの使い方をできるだけ分かりやすく解説します。

ヒナキラ

WordPressテーマSWELLを使っての解説となりますが、他のテーマであってもほとんど同じなので、安心してくださいね。

では、まいりましょう。

当サイト使用のテーマはSWELLです。

ブロックエディター完全対応、使いやすく、おしゃれなサイトを作りたい方に。

目次

ブロックエディター(Gutenberg)とは「積み木」のようなもの

SWELLのブロックエディター

ブロックエディター(Gutenberg)とは、2018年のWordPress5.0から採用されている新エディター。

下記のように、それぞれのブロックを組み合わせて作っていくために「ブロックエディター」と呼ばれています。

ブロックエディターのブロック
  • 見出しの入力には「見出しブロック」
  • 本文の入力には「段落ブロック」
  • 画像の挿入は「画像ブロック」
  • 引用には「引用ブロック」

というように、それぞれのブロックを組み合わせていきます。

簡単にいうと、見出しや文章、画像などのブロックを積み上げていく「積み木」のようなものといえますね。

ヒナキラ

積み木のように、ブロックを積み上げていくイメージです。

直感的で効率的に装飾ができるので、時短にもなりますよ。

ブロックエディター使い方「画面構成」

ブロックエディタ-画面構成

では、次にブロックエディターの画面構成について見ていきましょう。

ブロックエディターでは、大きく分けて3つのエリアに分けられます。

  1. トップツールバー
  2. 右ツールバー
  3. メインコンテンツエリア
ヒナキラ

3つのエリアについて、ひとつずつ解説しますね。

①「トップツールバー」エリア

トップツールバーは、ブロックを追加したり、記事の公開をしたりといった基本項目が並ぶエリアです。

ブロックエディタ-トップツールバー

\タップすると説明が見れます/

WordPressの管理画面(ダッシュボード)へ移動

ヒナキラ

ブロックの追加、文字数確認、プレビュー確認、下書き保存、記事の公開などをしたい時に使うエリアですね。

②「右ツールバー」エリア

右ツールバーエリア

右ツールバーは、「投稿タブ」と「ブロックタブ」の2つに分かれていて・・・

「投稿タブ」ではパーマリンクなどの投稿設定を、「ブロックタブ」では記事の装飾などを行います。

詳しくは下記をご覧ください。

 右ツールバー「投稿タブ」 

投稿タブ

\タップすると説明が見れます/

公開状態の確認・設定など

ヒナキラ

「投稿タブ」では、カテゴリーを選択したり、アイキャッチ画像を設定したり出来ます。

右ツールバー「ブロックタブ」

ブロックタブ

\タップすると説明が見れます/

文字のフォントサイズや行の高さを設定

ヒナキラ

「ブロックタブ」は、ボックス装飾など記事の装飾で使いますよ。

③「メインコンテンツ」エリア

ブロックエディタ-メインエリア

タイトルや記事の本文などを入力していく、記事作成のメインとなるエリアです。

ヒナキラ

記事作成のメインとなる場所。

ここで文字や画像などを組み合わせて記事を組み立てていきますよ。

ブロックエディター使い方「記事公開までの5ステップ」

では次に、ブロックエディターを使って記事を公開するまでの流れを見ていきます。

ブロックエディターで記事公開までの流れ
カラフル娘

記事を公開するまでの全体像はこんな感じなんですね。

でも、良く分かりません。

ヒナキラ

そうですよね!

なので、今から上記の5ステップについて、やさしく解説していきますよ~。

ステップ①:まずはタイトルを入力する

ブロックエディタ-タイトル

まず、「タイトルを追加」となっている箇所をタップして、記事のタイトルを入力します。

ステップ②:メインエリアで記事本文を入力していく

続いて、本文や画像などを入力していきます。

ブロックエディタ-本文

上記のエリアに「段落ブロック」「画像ブロック」など、様々なブロックを組み合わせて記事を作成していきます。

というわけで、記事作成の基本となる「文章入力方法」「画像挿入方法」と、良く使う「リスト」の作成方法も見ていきましょう。

文章の入力方法

文章を入力していく方法を見ていきましょう。

段落ブロック

文章は「段落ブロック」というブロックに入力していきます。

ヒナキラ

上記画像のエリアが「段落ブロック」ですね。

ここに文字を入力していきます。

段落ブロックは改行「Enter」するだけで自動で生成されます。

なお、「Shift+Enter」で同じ段落ブロックのまま改行することもできます。
「Shift+Enter」で改行をすると・・・
こんな感じで、行と行の間に「余白」を入れずに・・・
同じ段落の中で改行ができます。

「Enter」 で改行するか、「Shift+Enter」で改行するかの違いは、行間に余白が入るかどうかの違いです。

ヒナキラ

記事本文は、上記のように作成していきます。

慣れれば簡単で楽しいですよ。

続いて、文字を入力すると出てくるメニュー「ブロックメニュー」の見方も解説していきます。

ブロックメニューの見方

ブロックエディターでは、文字を入力すると下記のような「ブロックメニュー」が出てきます。

ブロックメニュー

\タップすると説明が見れます/

①ブロックタイプまたはスタイルを変更

ブロックのタイプやスタイルを変更したい場合につかいます。

  • 「見出し」ブロック→「段落」ブロック
  • 「段落」ブロック→「見出し」ブロック
  • 「段落」ブロック→「リスト」ブロック

などのように、 文字列はそのまま使いたいけど、スタイルだけを変えたい場合に使います。

SWELLでは「段落」から「ふきだし」にブロックタイプ変更も出来てとても便利です。

ヒナキラ

ブロックメニューは、トップツールバーに置いておくこともできます。

実際に、僕はトップツールバーに常駐させてますね。

ステップ③:投稿の設定をする

タイトル、記事本文の入力が完了したら、「投稿の設定」をします。

投稿設定
ヒナキラ

右ツールバーで設定していきます。

アイキャッチ画像・パーマリンク・カテゴリーなどの設定をしていきましょう。

では、「アイキャッチ画像」「パーマリンク」「カテゴリー」の設定方法も解説していきます。

アイキャッチ画像の設定

アイキャッチ画像というのは、下記の画像のことです。

記事の「顔」となるものですね。

アイキャッチ画像

アイキャッチ画像設定の流れは下記です。

ブロックエディタ-アイキャッチ画像

アイキャッチ画像設定

  1. 右ツールメニューをタップ
  2. 投稿タブをタップ
  3. アイキャッチ画像に画像を追加
ヒナキラ

アイキャッチ画像は、記事の「顔」のようなもの。

とても重要なので、投稿前には必ず設定しましょう。

パーマリンク(URL)の設定

パーマリンク

パーマリンクは、記事URLの一部を構成するものになります。

ヒナキラ

デフォルトの状態では、日本語のパーマリンクになっているのですが、変更しましょう。

日本語のパーマリンクは避けた方が良いようですからね。

パーマリンク設定の流れは下記です。

ブロックエディタ-パーマリンク

パーマリンク設定

  1. 右ツールメニューをタップ
  2. 投稿タブをタップ
  3. パーマリンクの「URLスラッグ」を変更
ヒナキラ

僕の場合、パーマリンクは「記事タイトル」を英語変換したものを使うことが多いですね。

記事を公開したあとは、あまりパーマリンクを変えない方が良いので、投稿前に設定しておきましょう。

パーマリンクを変えると、それまでの記事の評価がリセットされてしまいます。

カテゴリー設定をする

記事を分類する「カテゴリー」を選択しましょう。

カテゴリー設定の流れは下記です。

ブロックエディタ-カテゴリー

カテゴリー設定

  1. 右ツールメニューをタップ
  2. 投稿タブをタップ
  3. カテゴリーを選択
ヒナキラ

カテゴリーはSEO対策でも大切なので、必ず設定しておくべきですね。

ちなみに、カテゴリー選択は「1つ」だけを選びましょう。

複数選択するのは良くないようです。

ステップ④:プレビューで記事を確認・点検する

ここまでくれば、記事作成のゴールはもうすぐです。

記事が書けたら、最後にプレビューでおかしなところがないか確認しましょう。

ブロックエディタ-プレビュー

プレビューの見方

  1. トップツールバーのプレビューをタップ
  2. 見た目の崩れがないか、誤字脱字がないか確認
  3. PCだけでなく、モバイルでも確認

ステップ5:記事を公開する

「公開」をタップして記事投稿完了です。

以上、ここまでがブロックエディターでの記事作成の流れになります。

ヒナキラ

ブロックエディターに慣れてしまえば、簡単です。

というか、すぐに慣れますよ。

ブロックの基本操作と使い方

ブロックエディターについておおまかに理解できたところで、次はブロックの基本操作についても解説していきます。

解説する内容は以下の通り。

  1. ブロックの追加
  2. ブロックの移動
  3. ブロックの削除
  4. ブロックのコピー
  5. ブロックのグループ化
  6. ブロックの再利用

順番に解説していきますね。

基本操作①:ブロックを追加する

ブロック追加の方法は下記のとおりです。

ブロック追加

①ブロック追加「+」をタップ。

ブロックエディタ-ブロック選択

②使いたいブロックを選んでタップする。

すると、選んだブロックがメインコンテンツエリアに追加されます。

と、「ブロック追加」はこのような流れになります。

ヒナキラ

ちなみに、画像で表示されているブロックは一部のみです。

SWELLでは80以上のブロックがありますよ。

基本操作②:ブロックを移動させる

ブロック移動のやり方は下記のとおり。

ブロックを移動させる

①移動させたいブロックを選ぶ。

上矢印をタップ

②上下ボタンをタップ。(今回は上)

ブロック移動が完了

これで完了です。

選んだブロックが一番上に移動していますね。

ヒナキラ

ブロック移動は良く使いますよ。

複数のブロック範囲を選択して、一気に移動することもできます。

基本操作③:ブロックを削除する

ブロックの削除も見てい行きましょう。

削除するブロック選択

①削除したいブロックを選ぶ。

ブロックを削除をタップ

②「ブロックを削除」をタップ。

ブロック削除完了

③削除したいブロックが消えました。(削除完了)

ヒナキラ

もし間違えて削除してしまったときは、下記の「元に戻す」をタップすればブロックを復元できます。

元に戻すボタン

基本操作④:ブロックをコピーする

ブロックのコピー方法も見ていきましょう。

ブロックエディタ-コピー

①コピーしたいブロックを選ぶ。

ブロックのコピー

 ②「コピー」をタップ。

ブロックの貼り付け

③貼り付けをしたい場所で、「右クリック」→「貼り付け(Ctrl+V)」をタップ。

ブロックのコピー完了

④上記のように、コピーされたことが分かります。

ヒナキラ

貼り付け方は、ブログ以外でも使うコピペの時と同じですね。

基本操作⑤:複数のブロックをグループ化する

続いて、複数ブロックのグループ化を見ていきます。

グループ化したいブロックを選択

①グループ化したいブロックを選択。

グループ化をタップ

②グループ化をタップ。

ブロックのグループ化が完了

③グループ化が完了。

あとは、グループごとに移動をしたり、グループごとに装飾したり、といった形で使用します。

グループごと移動したい場合

では、実際にグループ化したブロックを移動させてみます。

ブロックのグループ化

①段落ブロックと画像ブロックをグループ化

ブロックグループ化移動

②移動ボタンをタップ。

グループ化ブロック移動

すると、グループ化したブロックが上に、上の見出しは下にスライドしました。

といったように、「グループ化」はブロックをまとめて移動する場合にも便利です。

基本操作⑥:ブロックを他の記事などで再利用する

「ブロックの再利用」は、何度も同じブロックを使いまわしたい場合に使います。

たとえば、複数の記事で同じブロックを使いたいときなどですね。

ヒナキラ

いってみれば、定型文のようなものですね~。

再利用ブロックの登録方法

  1. 再利用したいブロックの範囲を選択。
  2. 「再利用ブロックに追加」をタップ。
ブロック再利用

上記のとおり、再利用したいブロックを選択して、「再利用ブロックに追加」をタップ。

これで、再利用ブロックに登録ができました。

ブロックエディタ-再利用ブロック

上記のように「ブロック一覧」の「再利用可能」タブに再利用ブロックとして追加されています。

ヒナキラ

あとは、別の記事などで再利用ブロックを呼び出せばオッケーですね。

よく使う基本ブロック5選

では、僕がよく使うブロックをご紹介したいと思います。

ヒナキラ

僕がよく使うのなら、みなさんもよく使うことになると思いますので。

まとめると下記です。

  1. カラムブロック
  2. リストブロック
  3. 画像ブロック
  4. 見出しブロック
  5. 段落ブロック

では、順番に見ていきましょう。

①カラムブロック

下記が「カラムブロック」です。

2カラムブロック

上記画像の場合は、左右2つのカラムに分けています。

カラムブロックの呼び出し

カラムブロック

カラムブロックは、上記のようにブロック一覧の「カラム」をタップすれば呼び出せます。

ヒナキラ

カラムブロックは、左右で分割してブロックを表示させたいときに使います。

2つだけでなく、3つに分割したり、4つに分割したりもできますよ。

②リストブロック

下記が「リストブロック」です。

リストブロック

リストブロックの呼び出し

リスト

リストブロックを呼び出すには、ブロック一覧の「リスト」をタップでオッケー。

ヒナキラ

リストブロック、めちゃくちゃ重宝しますね。

情報をまとめたいときに便利です。

使用頻度も高めです。

③画像ブロック

下記は、画像ブロックです。

画像ブロック

画像ブロックの呼び出し

ブロック-画像ブロック

画像ブロックを呼び出すには、ブロック一覧の「画像」をタップすればオッケーです。

ヒナキラ

画像ブロックの使用頻度は高いです。

「段落ブロック」「見出しブロック」についで多く使われるブロックかもしれません。

④見出しブロック

下記は「見出しブロック」です。

見出しブロック

見出しブロックの呼び出し

ブロック-見出し

画像ブロックを呼び出すには、ブロック一覧の「見出し」をタップすればオッケーです。

または、あらかじめ段落ブロックにテキスト入力をしてから、ブロックタイプを「見出し」に変更する方法でも良いですね。

ヒナキラ

見出しブロックは、見出しを作成したいときに使います。

使用頻度が高いので、基本ブロックのひとつといえますね。

⑤段落ブロック

もはや説明の必要はないでしょうが、下記が「段落ブロック」です。

段落ブロック

段落ブロックの呼び出し

ブロック-段落

段落ブロックは、ブロック一覧の「段落」をタップするか、記事エリアで「改行(Enter)」をすれば作れます。

ヒナキラ

「段落ブロック」は文字を入力するために使います。

一番使うことになる基本のブロックですね。

便利なSWELL専用ブロック5選

\便利なSWELLブロック/

SWELLブロック

当サイトも使用しているテーマ「SWELL」は、ブロックエディターに完全対応したテーマといえます。

ヒナキラ

SWELLブロックエディターの使い心地は、最高です!

事実、これまで8つの有料テーマを使用しましたが、その中でも最高の使いやすさでしたよ~。

SWELLならではのブロックが豊富にあって、これがまた使いやすくて素晴らしい。

ブロックエディターを使うならSWELL!

ということで、SWELLの素晴らしいブロックについて「ランキング形式で」ご紹介していきます。

>>WordPressテーマ「SWELL」公式サイト

【SWELL】第5位:ステップブロック

SWELLブロック第5位は、ステップブロックです!

手順の説明などの時に重宝します。

ブロックエディター記事公開までの流れ

STEP
タイトル入力

タイトル入力欄にタイトルを入力する。

STEP
記事本文入力

メインコンテンツエリアで、記事本文を入力していく。

STEP
投稿設定

パーマリンク、アイキャッチ画像などの設定をする。

STEP
プレビュー確認

プレビューで変なところがないか確認する。

STEP
記事公開

記事を全世界に羽ばたかせる。

といった感じですね。

【SWELL】第4位:SWELLボタンブロック

SWELLブロック第4位は、SWELLボタンブロック!

上記のように、他のページにリンクしたい時や、アフィリンクを貼るにも便利です。

ヒナキラ

おしゃれなボタンで押したくなっちゃいますよね。

その数なんと60種類!

【SWELL】第3位:関連記事ブロック

SWELLブロック第3位は、関連記事ブロックです!

下記のようなブログカードや、テキストリンクを簡単に呼び出せます。

【SWELL】第2位:キャプション付きブロック

SWELLブロック第2位は、キャプション付きブロックです!

ヒナキラ

下記のようなキャプション付きのボックスですね。

とてもおしゃれです!

キャプション付きブロック

SWELLのキャプション付きブロック

おしゃれで使いやすい!

キャプション

SWELLのキャプション付きブロック

おしゃれで使いやすい!

キャプション付きブロック

SWELLのキャプション付きブロック

おしゃれで使いやすい!

【SWELL】第1位:ふきだしブロック

SWELLブロック第1位は、ふきだしブロックです!

ヒナキラ

めっっっちゃくちゃ!使いやすいですよ!

サンジ

SWELLのふきだしブロック最高だぜ~!

ヒナキラ

あ、サンジさん!目が飛び出てます!

ろびん

ふふ、いつものことね。

めっちゃ使いやすい「ふきだしブロック」利用の流れ

  1. ふきだしセットに画像などを登録
  2. ふきだしブロックから選ぶ
STEP
ふきだしセットに画像などを登録
ふきだしブロック

まずは、このように画像を「ふきだし」として登録しておきます。

STEP
ふきだしセットから選ぶ

あとは、記事作成のときに、登録してあったふきだしを選ぶだけです。

ヒナキラ

登録したふきだしセットから選ぶだけで、
このように簡単にふきだしを作れます。

カラフル娘

わ~お、簡単すぎますね~。

といったように、めちゃくちゃ簡単にふきだしを使えるのがSWELLの「ふきだしブロック」の最大の良さです!

SWELLのおかげで、ふきだし大好きマンになってしまいました。

SWELLブロックエディターでトップページをカスタマイズ

SWELLブロックエディターのカスタマイズ
当サイトのトップページ

SWELLのブロックエディターでは、トップページのカスタマイズもラクラクです。

トップページのカスタマイズについても、記事を書くのと同じように、ブロックの組み合わせで作ることができます。

SWELLブロックエディターの評判

ヒナキラ

こんな感じで、Twitterブログ界隈でも、SWELLブロックエディターは使いやすいと評判です。

SWELLのブロックエディター(Gutenberg)は最高に使いやすい!

公式サイトSWELL
使いやすさ使いやすさNo.1
ブロックエディター対応完全対応
記事の装飾使いやすくてオシャレ

当サイトでも使用しているWordpressテーマ「SWELL」は、ブロックエディターに完全対応しています。

しかも、ただ対応するだけではなく、抜群の使いやすさと機能を備えています!

ヒナキラ

AFFINGER、JINなど、他の有料テーマ7つと比較しましたが、SWELLよりも使いやすいブロックエディターを実装しているテーマはありませんでした。

もはや、他の追随を許さないほどの使いやすさです。

なので、これからブロックエディターを使おうかな?

と思っている方は、まず第一候補に「SWELL」を入れることをオススメします。

実際に、僕はSWELLにして良かった!と本気で思っていますから。

気になる方は、SWELLの評判・評価レビューでSWELLについて詳しく書いていますので、良ければ見てくださいね。

\ブロックエディターの使いやすさ№1/

まとめ|Wordpressブロックエディター(SWELL)の使い方

いかがでしたでしょうか。

ぶろっ子

ブロックエディターのことが良く分からなかったけど、なんとなく分かるようになったよ。

なんて思ってもらえたなら、とても嬉しいです。

ブロックエディターは慣れると(すぐに慣れる)とても使いやすいエディターです。

そして、SWELLはブロックエディターに完全対応したすばらしいテーマ。

SWELLとともに、ブロックエディターとともに、楽しく効率的なブログライフを楽しんでいきましょう。

では、またのお越しを~。

>>WordPressテーマ「SWELL」公式サイト

SWELLバナー
  • ブロックエディター完全対応
  • オシャレでスタイリッシュ
  • ブログが最高に楽しくなるテーマ
当サイト使用!
当サイトはPSIスコア100点。つまりSWELLは爆速です!
よかったらシェアしてね!

コメント

コメントする

目次
閉じる