➡とってもお得なWordpressブログの作り方はこちら

WordPressブロックエディター(Gutenberg)の使い方【SWELL】

SWELLブロックエディター使い方
ブロックエディター(Gutenberg)初心者におすすめ!
この記事のまとめ

【SWELL】ブロックエディター(Gutenberg)の使い方をご紹介!

ブロックエディターって何?という方、ブロックエディターを使い始めたばかり!という方にオススメの記事です!

これを読めば、ブロックエディターの基本がまるっと押さえられますよ!

ブロ美ちゃん

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

ひなきら

いやあ、使ってみて分かったけど、実はとっても簡単なんですよ~。
むしろめっちゃ効率化できますしね!

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

ブロックエディターの使い方がイマイチ分からない・・・

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

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

これを読めば、なんとなく苦手意識のあったブロックエディターへの考えが180度変わるかもしれませんよ!

というわけで、ぜひ最後までお付き合いください~!

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

今回のブロックエディターの使い方についても、このSWELLのブロックエディターでの解説となります。

目次

ブロックエディター(Gutenberg)とは【動画あり】

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

見出しや文章などをブロックという単位で作成していくものです。

ブロックエディターSP
ブロックエディタ

見出しブロックに見出しを入力

文章ブロックに文章を入力!

安西先生

安西先生・・・!

見出しブロック

  • 見出しは「見出しブロック」
  • 文章は「文章(段落)ブロック」
  • 画像は「画像ブロック」

というように、それぞれの目的ごとにブロックを作成していく形になります。

\動画での解説はこちら/

ブロックエディター(Gutenberg)の画面構成【動画あり】

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

\動画で見たい方はこちら/

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

  • トップツールバー
  • 右ツールバー
  • メインコンテンツエリア
ブロックエディタ-画面構成
ひなきら

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

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

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

ブロックエディタ-トップツールバー
  1. 管理画面へ移動
  2. ブロックの追加
  3. 「編集・選択」モード切替
  4. ひとつ前の状態に戻す
  5. ひとつ先の状態に進める
  6. コンテンツの構造や文字数などの確認
  7. コンテンツのブロックナビゲーション
  8. 保存した投稿内容を確認
  9. 下書きを保存
  10. プレビューを表示
  11. 記事を公開
  12. 右ツールバーの表示/非表示
  13. SWELL設定
  14. ツールバー、エディターモードなどの設定
ひなきら

トップツールバーでよく使うものは、②、④、⑤、⑨、⑩、⑪、⑫あたりですね。

「右ツールバー」エリア

右ツールバーでは、ブロック関連の設定や、

記事投稿前に必ず行うカテゴリー・パーマリンク・アイキャッチ画像設定などを行うエリアです。

 投稿タブ 

ブロックエディタ-右ツールバー
  1. 公開状態の確認・設定
  2. パーマリンク(URL)の設定
  3. カテゴリーの選択
  4. タグの設定
  5. アイキャッチ画像の設定
  6. 要約文の設定
  7. コメントの許可など
  8. SWELL専用の設定(目次表示・非表示など)
ひなきら

右ツールバーの投稿タブでは、②、③、④、⑤は毎回使いますね~。

 ブロックタブ 

ブロックエディタ-ブロックタブ
  1. 文字のフォントサイズや行の高さを設定
  2. 文字色、背景色を設定
  3. 先頭文字を大きく表示
  4. ボーダー(囲い装飾)の設定
  5. 様々なスタイル・ボックスの使用
  6. スマホのみ表示・PCのみ表示の設定
  7. ブロック下の余白設定
  8. CSSの指定など
ひなきら

僕がブロックタブでよく使うのは、②、④、⑤、⑥あたりですね。

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

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

ブロックエディタ-メインエリア
  1. タイトルを入力するエリア
  2. 記事本文を作成するエリア(文章、画像、リストなど)
ひなきら

文章を入力したり、画像を挿入したり、装飾をしたり、
記事作成する上でのメインとなる場所です。

ブロックエディター(Gutenberg)で記事を公開するまでの5ステップ

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

記事公開までの流れ
カラフル娘

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

ひなきら

そうですね!順番に解説していきますよ~。

【ステップ1】タイトルを入力

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

「タイトルを追加」をクリックして、タイトルを入力します。

【ステップ2】メインエリアで本文作成

ブロックエディタ-本文

本文を入力していくエリアです。

色々なブロックを使って記事を作成していきます。

ひなきら

「見出し」、「文章」、「画像」、「リスト」などのブロックを使って作成していきます。

ブロックのメニューバーの見方

ブロックメニューについての解説です。

文字を入力すると、 入力した文字の上に下記のような「ブロックメニュー」が出てきます。

ブロックメニュー
  1. ブロックタイプまたはスタイルを変更
  2. テキストの配置を変更
  3. 太字
  4. イタリック
  5. リンク
  6. 続きを読む
  7. SWELL装飾
  8. オプション

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

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

  • 「見出し→段落」
  • 「段落→見出し」
  • 「段落→リスト」

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

ひなきら

SWELLでは、「段落→ふきだし」なども使えて超便利!

②テキストの配置を変更

ここで、入力した文章の配置を変えることが可能です。

通常は「左寄せ」ですが、

このように右寄せにしたり、

このように中央に寄せたり、

といったことができます。

③太字

入力した文字を「太字」に変更できます。

④イタリック

入力した文字を「斜め」に変更できます。

⑤リンク

テキストに「リンク」を貼りたい場合に使います。

⑥続きを読む

テキスト色を変えたり、取消し線を入れたり、といったメニューに表示されていない「その他のこと」ができます。

⑦SWELL装飾

SWELL独自の機能が使えます。

背景色」、「マーカー線」、「フォントサイズ変更」といったものが簡単に使えて便利です。

⑧オプション

オプションは、主にブロック関連の操作になります。

ブロックエディタ-オプション
  • ブロックの追加設定を表示
  • ブロックのコピー
  • ブロックの複製
  • ブロックを前に挿入
  • ブロックを後に挿入
  • ブロックの移動
  • ブロック内をHTMLとして編集
  • 再利用ブロックに追加
  • ブロックのグルーピング
  • ブロックの削除

文章の入力(段落ブロック)

次に、文章の入力についての解説です。

ブロックエディタ-段落

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

ひなきら

何も入力されていないと、

「文章を入力、または/でブロックを選択」

と表示されるところが段落ブロックですよ。

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

「Shift+Enter」で同じ段落ブロックのまま改行することもできます。

文字の大きさや色は、「右メニューバー」か、文字上に出てくる「ブロックのメニューバー」からでも変更可能です。

画像の挿入(画像ブロック)

画像を挿入する場合には、「画像ブロック」を使います。

ブロックエディタ-画像

①「+」ボタンをタップ

ブロックエディタ-画像ブロック

②「画像」をタップ

ブロックエディタ-画像挿入

③上記の3つの中からどれかを選択して、画像を挿入します。

ブロック画像

④画像が挿入されました。

ブロックメニューで配置を変更したり、右ツールメニューでサイズ変更をしたりもできます。

【ステップ3】投稿設定

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

ひなきら

アイキャッチ画像・パーマリンク・カテゴリーなどの設定ですね。

アイキャッチ画像

アイキャッチ画像というのは、記事一覧画面などに表示される画像のことです。

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

アイキャッチ画像設定

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

アイキャッチ画像は、記事の「顔」のようなもの。
とても重要ですよ~。

パーマリンク(URL)

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

デフォルトでは、おかしなパーマリンクになっているので変更推奨です。

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

パーマリンク設定

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

僕の場合は、タイトルを英語変換したものを使うことが多いですね。

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

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

カテゴリー設定

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

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

カテゴリー設定

  1. 右ツールメニューをタップ
  2. 投稿タブをタップ
  3. カテゴリーを選択
ひなきら

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

【ステップ4】プレビューで確認

ここまでくれば、ほとんどゴールのようなものですね。

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

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

プレビューの見方

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

【ステップ5】記事の公開

あとは「公開」をタップして完了です。

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

ひなきら

ブロックエディターに慣れてしまえば、簡単ですよ~。
というか、すぐに慣れます。

【ブロックエディター(Gutenberg)】基本の操作方法

画面構成や記事作成の流れなど、おおまかに理解したところで、次はブロックエディターの基本操作について解説していきます。

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

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

【基本操作①】ブロックの追加

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

ブロックエディタ-ブロック追加

①上記青枠の「+」をタップ。

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

②目的のブロックを選んでタップする。

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

といった流れで、ブロックを追加していくことになります。

ひなきら

ちなみに、画像で表示されているのは一部のみです。
SWELLでは80以上のブロックがありますよ。

【基本操作②】ブロックの移動

ブロックエディタ-ブロック移動

上記のように、上下ボタンをタップするだけで、ブロックごとの移動が簡単にできます。

ひなきら

ブロック移動はめちゃくちゃ重宝しますよ~!

【基本操作③】ブロックの削除

ブロックエディタ-ブロック削除

上記のように、「ブロック削除」をタップするとブロックが削除されます。

ひなきら

間違えて削除しちゃったときは、
下記の「元に戻す」をタップすれば大丈夫ですよ~。

元に戻す

【基本操作④】ブロックのコピー

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

上記のように「コピー」をタップすると、ブロックがコピーされます。

コピーしたブロックを貼り付けるには、PCなら右クリックで貼り付けをクリック、スマホなら長押しなどで貼り付けをタップしましょう。

ひなきら

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

【基本操作⑤】ブロックのグループ化

ブロックエディタ-

①グルーピングしたいブロックの範囲を選択。

ブロックエディタ-グループ化

②「グループ化」をタップ。

ブロックエディタ-グループ化完了

③グループ化が完了。

これで、グルーピングは完了です。

グループごと移動したい場合のやり方

では、下記のようにグループ化したものを「下に移動」するとどうなるかを見てみましょう。

ブロック-グループ化

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

ブロックグループ化移動

②移動ボタンをタップ。

ブロックグループごと移動

③グループ化したブロックが下に移動して、下の段落ブロックは上にスライドしました。

といったように、ブロックをまとめて移動する場合に便利です。

ひなきら

他にも、ブロックをまとめてボックス装飾したりする場合にも便利ですよ~。

【基本操作⑥】ブロックの再利用

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

たとえば、複数の記事で同じ文章や内部リンクを使いたいときなどに便利ですね。

ひなきら

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

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

ブロック再利用

①再利用したいブロックの範囲を選択。

②「再利用ブロックに追加」をタップ。

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

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

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

ひなきら

あとは、他の記事などで同じブロックを使いたい時に、この再利用ブロックをタップするだけで呼び出せますよ~。

よく使うブロックランキング(トップ5)

では、僕がよく使うブロックをランキング形式で紹介したいと思います。

ひなきら

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

第5位:カラムブロック

第5位は、カラムブロックです。

2カラムブロック

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

ひなきら

3つにしたり、4つにしたりもできますよ~。

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

カラムブロック

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

第4位:リストブロック

第4位は「リストブロック」です。

リストブロック
ひなきら

リスト、めちゃくちゃ重宝してます~!

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

リスト

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

第3位:画像ブロック

第3位は、画像ブロックです!

画像ブロック
ひなきら

画像ブロックを使わない記事はないですから、重要ですね!

画像ブロックの呼び出し

ブロック-画像ブロック

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

第2位:見出しブロック

第2位は、見出しブロックです!

見出し、絶対に使いますからね(笑)

見出しブロック

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

ブロック-見出し

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

ひなきら

もしくは、段落ブロックにテキスト入力をしてから、ブロックタイプを「見出し」に変更するかですね。

第1位:段落ブロック

栄えある第1位は、なんと・・・

「段落ブロック」です!!!

ひなきら

んお!?いや、そりゃそうですよね。
段落使わずに記事書けませんから!

段落ブロック

段落ブロックの呼び出し

ブロック-段落

画像ブロックを呼び出すには、ブロック一覧の「段落」をタップするか、

記事エリアで「改行」するだけで段落ブロックが生成されます。

SWELL専用ブロックランキング(トップ5)

\便利なSWELLブロック/

SWELLブロック

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

ブロックエディターのためのテーマといえます。

ひなきら

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

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

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

ということで、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のブロックエディター(Gutenberg)は最高に使いやすい!

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

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

ひなきら

控えめに言って、SWELLは最高です!

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

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

実際に僕もSWELLにして本当に良かったーーーーー!!!って思っていますので。

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

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

SWELLのブロックエディターについて、理解を深めていただけていたら嬉しい限りです。

ぶろっ子

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

なんて思ってもらえたら、大泣きして喜んじゃいますね!

それに長めの記事だったので、ここまで読んでくれたなんて感謝感激雨あられです。

ほんと、ありがとうございます!

またお待ちしてますので、いつでも来てくださいね~!

関連記事:高評価!WordPressテーマ【SWELL】評判・メリットデメリット完全紹介!

まだブログを始めていない方、まずはブログを作りましょう!

行動なくして成果なし!

【スマホでWordpressを作りたい方】

スマホでWordPressを始める方法!全ての手順を丁寧に解説!

【PCでWordpressを作りたい方】

WordPressブログの作り方【超絶進化したロリポップ!】が最強です!

SWELLバナー
  • ブロックエディター完全対応
  • 圧倒的な使いやすさ
  • ブログが最高に楽しくなるテーマ
当サイト使用!
サイト表示速度は神速!!!
よかったらシェアしてね!

コメント

コメントする

目次
閉じる