WordPress Gutenberg(ブロックエディター)の使い方を徹底解説

WordPress 新エディタ ブロックエディター の使い方を徹底解説
ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

本記事では、ワードプレス5.0からリリースされたブロックエディター、通称Gutenberg(グーテンベルク)エディタの使い方を解説していきます。
 

2018年の末くらいから出てきたワードプレスの新しいエディターの使い方がいまいちわからなくって・・・
 

ワードプレスは5.0系からGutenbergという新しいエディターに変わったんです。知らないとびっくりしますよね(苦笑)
ここでは、新エディターの使い方を説明していきますね。
 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクール
WEBST8

WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト

 

 

WordPressの新エディターGutenberg(グーテンベルク)とは

グーテンベルクエディター(Gutenberg Editor)とは、WordPress5.0から新しく追加されたエディターのことです。これまでのクラシックエディター(ビジュアルエディターやテキストエディター)と違い、ブロック単位でコンテンツを作っていくエディターになります。
 

■従来のエディターと新しいエディター
従来のエディターと新しいエディター(Gutenberg)
 

新エディター(ブロックエディター)の編集画面


 

覚えたら便利そうなんだけど、今まで使っていたエディターに慣れているのでいまいちとっつきにくいんですよね
確かに今までのクラシックエディターに慣れていたら最初は少し戸惑うかもしれませんね。ここで詳しく説明していきますので、少しずつ慣れていきましょう。
 

注意点

 
ホームページ Unavaiableグーテンベルクエディター(ブロックエディター)は、2018年12月にリリースされた比較的新しいエディターです。

現在、有名どころのテーマやプラグインはこの新しい順次エディターに対応していっていますが、全てのプラグインやテーマがこの新しいエディターに対応しているわけではないので、使い方によっては一部正常に動作しない場合もあります。

これからある程度利用者数の多いテーマやプラグインはじきに対応していくものと思われますが、今は過渡期にあたるので、注意しましょう。

 

合わせて読みたい記事

従来のエディター(クラシックエディター)の方が使い勝手が良い人もいるでしょうし、そもそも普段使っているプラグインがGutenberg未対応の場合はこれまで使っていた機能の一部が使えなくなります。その場合は、プラグイン「Classic Editor」を利用することで従来のエディターに戻すことができます。
詳しくは下記の記事をご覧ください。

【Classic Editor】ワードプレス5.0にグーテンベルクから従来エディターに戻す方法

 
 

ブロックエディターの基本的な使い方

まずはブロックエディターの基本的な使い方を中心に説明していきます。
 

タイトルを文章を書いてみよう

まずはタイトルと文章を書いて、プレビューで確認してみましょう。

 

下書き保存・公開をする

ある程度ページを作成したら、保存しましょう。下書き保存を選択すると、下書き(公開していない)でページを保存することができます。

 

ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。

 
 

画像を挿入する

次に画像を挿入してみましょう。左上の+ボタンを押して「画像」を選択、自分の好きな画像を選択します。

 
 

リストを挿入する

リストのアイコンを選択すると、箇条書きを作ることができます。

 
 

既存のブロックの間に見出しを挿入する

次に見出しを挿入してみましょう。すでに作成したブロックとブロック境目にカーソルを合わせると、既存のブロックの間に新しいブロックを挿入することができます。

 
 

既存のブロックを移動する

既存のブロックの左側の矢印を選択すると、ブロックの順番を変更することができます。

 
 

既存のブロックを削除する

既存のブロックを削除したい場合は、既存のブロックを選択して、詳細設定アイコンを選択してブロックを削除をすることができます。

 

このように、新しいエディターでは「ブロック」と言われる単位を挿入していくことでページを作成していくことができます。
 
 

アイキャッチ・カテゴリ・タグなど

カテゴリ・タグやパーマリンク、アイキャッチ画像などは、従来のエディターと同様にエディターの右サイドバーから設定できます。
 

 
 

便利なブロック。ブロックエディターの色々な使い方

次に、便利なブロックや、もう少し色々なエディターの使い方を説明していきます。
 

クラシックブロックを挿入する

フォーマット>クラシックを選択すると、従来のクラシックエディターをブロックとして挿入することができます。

 

2018年12月以前のワードプレスに備わっていた従来のエディターですね
 
 

HTMLとして編集する

詳細設定で「HTMLとして編集」を選択すると、既存のブロックをHTMLのソースコードとして編集することができます。

 
ただし、独自に編集したものはそのままブロックに戻すことができなくなるので注意です(以降もHTMLとして編集する形になります)
 
 

2カラム(2列横並び)のレイアウトを作成する

レイアウト要素>2カラムを選択すると、2列横並びのブロックを挿入することができます。

 

■表示例
2列横並びの例
 

今まで横並び表示するのは難しかったので、これは便利な機能ですね!!
 
 

カバーで背景をつける

一般ブロック>カバーを選択すると、背景に画像を設定してその上に見出しや段落を入力することができます。

 
 

ブロックの説明

新しいエディターの基本的な使い方は前述の通りです。ここからは、利用できる主要な各ブロックの説明をしていきます。
 

ブロックエディターでは、下記のブロック種類が用意されています。

  • よく使うブロック
  • 一般ブロック
  • フォーマット
  • レイアウト要素
  • ウィジェット
  • 埋め込み

 

 

それぞれのブロックについて下記に紹介していきます。
 

よく使うブロック

よく使うブロック
 

よく使うブロックは、見出しや文章、画像など一般的に使用頻度の高いブロックや過去利用したブロックが表示されます。
 

一般ブロック

一般ブロック
 

項目意味
段落通常の文章を入力する際に利用します。最も使用頻度の多いブロックの一つです。
画像画像を挿入する際に利用します。最も使用頻度の多いブロックの一つです。
見出し見出しを挿入する際に利用します。最も使用頻度の多いブロックの一つです。
ギャラリー横並びの画像を利用する際に利用するブロックです。
一般ブロック>ギャラリー
リストリスト(箇条書き)を作る際に利用します。使用頻度の高いブロックの一つです。
一般ブロック>リスト
引用引用blockquoteを挿入します。
一般ブロック>引用
音声音声ファイルをアップロードできます。
一般ブロック>音声
カバー 一般ブロック>カバー
ファイルPDFなどの任意のファイルをアップロードするためのブロックです。
一般ブロック>ファイル
動画mp4などの動画ファイルをアップロードするためのブロックです。
一般ブロック>動画

 
 

フォーマット

フォーマットでは、クラシックエディターやカスタムHTML、テーブルなど、少し高度なブロックが用意されています。
フォーマット
 

項目意味
ソースコード何かのソースコードを利用したいときに挿入するブロックです。利用頻度は低いでしょう。
フォーマット>ソースコード
クラシック従来のエディター(クラシックエディター)を利用したいときに挿入するブロックです。
フォーマット>クラシックエディター
カスタムHTMLHTMLで記述したいときに挿入するブロックです。
フォーマット>カスタムHTML
整形済み整形済みテキスト(preタグ)を利用したいときに挿入するブロックです。利用頻度は低いでしょう。
フォーマット>整形済みテキスト
ブルクオート引用にさらに装飾をしたブロックです。利用頻度は低いでしょう。
フォーマット>プルクオート
テーブル表を挿入したいときに利用するブロックです。
フォーマット>表

 
 

レイアウト要素

レイアウト要素では、2カラムやボタン、スペーサー(たて余白)など、レイアウトに関わるブロックが用意されています。
レイアウト要素
 

項目意味
ボタンボタンリンクを入力する際に利用します。
レイアウト要素>ボタン
カラム2カラム(2列横並び)のブロックを使用する際に利用します。
レイアウト要素>レイアウト
メディアと文章2カラム(2列横並び)で左側を画像、右側を文章にしたい場合に利用します。
レイアウト要素>メディアと文章
続きを読む「続きを読む」の表示にしたい場合に利用します。
レイアウト要素>もっと読む
改ページ改ページにする際に利用します。
レイアウト要素>改ページ
区切り区切り線hrタグを挿入します。
レイアウト要素>区切り"
スペーサー縦の余白(スペース)を作りたい場合に利用します。
レイアウト要素>スペーサー

 
 

ウィジェット

ウィジェット
 

項目意味
ショートコード任意のショートコードを入力したい場合に利用するブロックです。
ウィジェット>ショートコード
アーカイブ日付別アーカイブを入力したい場合に利用するブロックです。
ウィジェット>日付アーカイブ
カレンダーカレンダーを挿入したい場合に利用するブロックです。
ウィジェット>カレンダー
カテゴリー投稿のカテゴリーを挿入したい場合に利用するブロックです。
ウィジェット>カテゴリー
最新のコメント最新のコメントを挿入したい場合に利用するブロックです。
ウィジェット>最新のコメント
最新の記事最新の投稿記事を挿入したい場合に利用するブロックです。
ウィジェット>最新の投稿
RSSRSSフィードを挿入したい場合に利用するブロックです。
ウィジェット>RSS
検索検索ボックスを挿入したい場合に利用するブロックです。
ウィジェット>検索ボックス

 
 

埋め込み

埋め込み
 

項目意味
埋め込み埋め込みを挿入する際に利用するブロックです。
TwitterTwitterの埋め込みを挿入する際に利用するブロックです。
埋め込み>Twitter
YoutubeYoutubeの埋め込みを挿入する際に利用するブロックです。
埋め込み>Youtube
FacebookFacebookの埋め込みを挿入する際に利用するブロックです。
埋め込み>Facebook
InstagramInstagramの埋め込みを挿入する際に利用するブロックです。
埋め込み>Instagram
WordPressWordPressの埋め込みを挿入する際に利用するブロックです。
埋め込み>WordPress

 
 

まとめ

本記事では、2018年12月のWordPress5.0からリリースされたグーテンベルクエディタ(ブロックエディター)の使い方を解説しました。
 

従来のエディターと新しいエディター(Gutenberg)
 

まだ少し慣れない部分もありますが、慣れていったらとても便利そうですね!
 

今はまだ未対応やベータ版のプラグインが多いですが、これからどんどん新エディタに対応してくるものも増えてくると思いますので、便利なものは利用するようにしていきましょう。
 

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。
 

ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

『自分で作る選択を!』

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

インタビュー一覧

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ