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

WordPress

【2019年最新】WordPressブロックエディターの使い方を徹底解説

投稿日:2019年6月3日 更新日:

本記事では、2018年末にリリースされた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】WordPress5系でグーテンベルクから従来エディターに戻す方法

 
 

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

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

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

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


 

画像を挿入する

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


 
 

見出しを挿入する

次に、見出しを挿入してみましょう。+ボタンを押して、「見出し」を選択します。見出しはH2・H3・H4と複数の見出しが用意されています。


 

見出しってなんでしょうか?見出し2を使わないといけないんですか??
見出しは本の章みたいなものです。通常、投稿のタイトルに見出し1が使われているので、投稿本文では見出しH2以下を使用するのが一般的です。
なるほど!ちなみに見出しがH2、H3、H4と複数あるのは何故なんでしょうか?

見出しは階層を持つことができます。
h1が本のタイトルに相当して、H2は第1章・第2章、H3は第1-1章、第1-2章、H4は第1-1-1章、1-1-2章のような階層ですね

 

見出しとは本の章のようなもので、見出しをつけることで文章が読みやすくなりSEO対策にもなりますので、適切な見出しをつけるようにしましょう。
 

リストを挿入する

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


 
 

下書き保存・公開をする

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


 
 

公開をする

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


 
 

下書きに戻す

一度ページを公開してから再度下書きに戻したい場合は「下書きに戻す」ボタンを押下します。


 
 

ブロックの挿入・移動・削除

既存のブロックの間に新たにブロックを挿入したり、既存のブロックを移動したり、削除することもできます。
 

既存のブロックの間に挿入する

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


 
 

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

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


 

SHIFTボタンを押しながら複数のブロックを選択した状態で矢印を選択すると、複数ブロックまとめて順番を変更することもできます。


 
 

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

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


 

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

 
 

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

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

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

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


 

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

 
 

HTMLとして編集する

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


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

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

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


 

■表示例
2列横並びの例
 

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

 
 

カバーで背景をつける

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


 

再利用ブロックに追加して他のページでも利用する

任意のブロックに対して、「再利用ブロックに追加」をすることで、ブロックの雛形を作り共通化して、他の投稿ページや固定ページでも再利用することができます。
再利用ブロックに追加
 

ブロック選択時に再利用ブロックに追加したブロックを選択できるようになります。


 

SHIFTを押しながら複数のブロックを選択した状態で「再利用ブロック」に追加することもできます。


 

なお、共通化したブロックは、一方の投稿(固定ページ)で変更すると、他の投稿(固定ページ)でも共通化ブロックの内容が変更されているので気をつけましょう。


 

再利用ブロック:コンテンツを作成し、自分や他の投稿者がサイトで再利用できるよう保存しましょう。ブロックを更新すると、再利用しているすべての場所で更新が適用されます。

 

もし共通化したブロックを使いたいけど、ここのページで細部を変えたい場合は、「通常のブロックに変換」をすることで、個々のページごとに変更を加えられるようになります。
通常のブロックへ変換
 
 

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

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


 
 

アイキャッチを追加する

WordPressでは「アイキャッチ」という、いわゆるサムネイル表示機能があります。アイキャッチを設定していると、投稿一覧(または固定ページ)でサムネイルが表示されます。
 

アイキャッチは編集画面右下の「アイキャッチ画像を設定」から設定することができます。
投稿>アイキャッチ画像の設定
 

下記のようにアイキャッチ画像を設定しましょう。


 

投稿一覧で、アイキャッチ画像が表示されていることがわかります。
投稿一覧 アイキャッチ画像が表示されている
 

ご利用のテーマ・設定にもよりますが、一般的にFacebookやTwitterでシェアした際にアイキャッチに設定した画像が表示されます。

 

記事のURLを変更する

 
投稿の末尾のURLは下記のURLスラッグという箇所から変更できます。
パーマリンク URLスラッグの設定
 

下記のようにURLを変更してみましょう。


 

日本語URLは利用ケースによっては、「%5%2%....」のようにわかりづらい文字に変換されるので、当サイトでは半角英数字のURLに変更しています。

 

パスワード付きページを作成する

公開範囲を設定することもできます。公開ボタンを押してパスワード設定することができます。
パスワード保護の設定
 

パスワード保護設定をしたページについては、パスワードを知っている人だけがページを閲覧できるようになります。


 

関連記事

投稿のカテゴリーやタグなど、投稿に関する使い方については「【ブロックエディター版】WordPressの投稿の使い方を徹底解説」をご参照ください。

固定ページの親子設定など、固定ページに関する使い方については「【ブロックエディター版】WordPressの固定ページの使い方を徹底解説」をご参照ください。

 
 

ブロックの説明

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

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

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

 


 

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

よく使うブロック

よく使うブロック
 

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

一般ブロック

一般ブロック
 

項目意味
段落通常の文章を入力する際に利用します。最も使用頻度の多いブロックの一つです。
画像画像を挿入する際に利用します。最も使用頻度の多いブロックの一つです。
見出し見出しを挿入する際に利用します。最も使用頻度の多いブロックの一つです。
ギャラリー横並びの画像を利用する際に利用するブロックです。
一般ブロック>ギャラリー
リストリスト(箇条書き)を作る際に利用します。使用頻度の高いブロックの一つです。
一般ブロック>リスト
引用引用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)
 

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

 

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

 

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

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

合わせて読みたい記事

WordPressの基本的な使い方を「【2019年度版 WordPress使い方総まとめ】ワードプレスの使い方を徹底解説」にまとめました。WordPressの使い方をしっかり覚えたい方はあわせてご参考ください。

【2019年度版 WordPress使い方総まとめ】ワードプレスの使い方を徹底解説

 


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

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

詳細はこちら


 

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

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

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, , ,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.