Alice blog

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

WordPress ブロックエディターの使い方
           

2018年から実装された『ブロックエディター(Gutenberg)』は、現在WordPressのメインエディターとして採用されています。

コンテンツ作成には、ブロックエディターが主流となってきていますね

この記事を読んでいるということは、あなたもブロックエディターを使い始めたばかりであまり使い方がわからないのではないでしょうか。

当記事では、ブロックエディターの使い方を紹介していきます。

使い方はすべて画像と一緒に解説していきますので、ブロックエディターを使い始めたばかりでも理解しやすい内容となっています。

この記事を最後まで読み、ブロックエディターの使い方をマスターしましょう。



WordPressのブロックエディター(Gutenberg)とは

ブロックエディター(Gutenberg)とは、2018年から実装された新しいエディターのことです。

具体的には、WordPress5.0のアップデートから実装されました。

ブロックエディターの特徴は、ブロック(文章)を積み上げるようにして記事作成をすることです。

イメージとしては、下記の通りです。

※ブロックを積み上げるイメージ

ブロック単位で記事を管理できることには、次のメリットがあります。

  • 配置の変更をしやすい
  • レイアウトを簡単に変更できる
  • 文章の区切れが視覚的に理解しやすい
初心者でも簡単にレイアウトを変更できるようになった点は、従来のエディターからしてみれば大きな進化だと言えますね

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

ブロックエディターの基本的な使い方は、次の通りです。

  • ブロックエディターの基本設定
  • タイトルの入力
  • 見出しの作成
  • 本文の執筆
  • 文字の装飾
  • 画像の挿入
  • 記事のプレビュー
  • 記事の下書き保存
  • 記事の投稿・公開

それぞれの項目ごとに紹介していきますね。

実際に手を動かしながら記事を読むことで、使い方に関する理解度が深まります。そのため、記事と一緒にブロックエディターを使うことをおすすめします。

ブロックエディターの基本設定

ブロックエディターの基本設定は、画面右上のツールボタンをクリックすれば開けます。

 

ブロックエディターの基本設定では、次にあげる3つの項目を変更できます。

  • 表示
  • エディター
  • ツール

ブロックエディターの基本設定>表示

基本設定の「表示」では、ブロックエディターの表示方法を変更できます。

 

変更できる項目は、次の3つです。

  • トップツールバー
  • スポットライトモード
  • フルスクリーンモード
トップツールバー

トップツールバーをONにすることで、ブロックの編集ボタンが画面上部に固定されます。

そのため、いつも同じ位置からブロックのカスタマイズを行えるようになります。

 

スポットライトモード

スポットライトモードをONにすることで、選択しているブロックだけが強調されるようになります。

そのため、編集しているブロックを認識しやすくなります。

 

フルスクリーンモード

フルスクリーンモードをONにすることで、記事作成に必要ないダッシュボードのメニューなどが閉じます。

そのため、画面にはエディターだけが表示され、記事作成に集中できるようになります。

 

ブロックエディターの基本設定>エディター

基本設定の「エディター」では、ビジュアルエディターとコードエディターを切り替えられます。

 

ビジュアルエディター

ビジュアルエディターとはコードを見やすく表示し、編集をしやすくしたエディターのことです。

 

基本的にはビジュアルエディターを使って記事作成を進めていきます。
コードエディター

コードエディターとは、コードを直接編集するためのエディターです。

コードエディターで作業をするには『HTML』というプログラミング言語を身につける必要があります。

ブロックエディターの基本設定>ツール

基本設定の「ツール」では、主にブロックエディターの編集を行います。

 

「ツール」ではブロックエディターの編集以外にも、ガイドやヘルプの確認なども可能です。

エディターの編集を行う項目は、次の2つです。

  • ブロックマネージャー
  • オプション
ブロックマネージャー

ブロックマネージャーでは、追加するブロックの種類を自分好みにカスタマイズできます。

 

オプション

オプションでは、記事の詳細設定をカスタマイズできます。

 

タイトルの入力

記事タイトルはエディターの一番上に入力します。

 

見出しの作成

見出しの作成方法は、ブロックの追加ボタンをクリックし「見出し」を選択すれば作れます。

 

見出しの意味や使い方がわからない場合には、次の記事を読んでみてください。
【初心者必見】ブログの見出しの使い方・作り方_5つのコツも合わせて紹介

本文の執筆

本文はエディターの中央部分に書き進めていきます。

 

本文作成の時に使う基本的なコマンドは下記の通りです。

新規ブロックの追加
Enter
ブロックの中で改行
Shift+Enter

それでは本文作成の基本として、本文を執筆する際によく使うブロックを6つ紹介していきますね。

  • 段落の作成
  • リンクの作成
  • リスト(箇条書き)の作成
  • 引用文の作成
  • テーブル(表)の作成
  • HTMLの挿入

段落の作成

段落の作成方法は、ブロックの追加ボタンをクリックし「段落」を選択すれば作れます。

 

なお、通常の文章は「段落」で作成していきます。

ブロックを作成すると、初期の状態では「段落」が設定されています。そのため段落を使う場合には、そのまま文を書き始めればOKです。

アンカーテキスト(リンク)の作成

アンカーテキスト(リンク)の作成方法は、ブロックに文字を入力し、ブロック編集ボタンから「リンク」をクリックします。

 

あとは、リンク先のURLを入力すれば完了です。

 

リンク先のページを別タブで開きたい場合には「新しいタブで開く」にチェックを入れましょう。

リスト(箇条書き)の作成

リストの作成方法は、ブロックの追加ボタンをクリックし「リスト」を選択すれば作れます。

 

番号付きのリストを使いたい場合には、ブロックの編集ボタンから「番号付きリストに変換」をクリックすればOKです。

引用文の作成

引用文の作成方法はブロックの追加ボタンをクリックし、一般ブロックの中から「引用」を選択すれば作れます。

 

テーブル(表)の作成

テーブルの作成方法はブロックの追加ボタンをクリックし、フォーマットの中から「表」を選択します。

 

するとデータの入力画面が表示されますので、列数と行数を入力し「表を作成」をクリックすればテーブルの完成です。

HTMLの挿入

HTMLの挿入方法はブロックの追加ボタンをクリックし、フォーマットの中から「カスタムHTML」を選択すれば追加できます。

 

一度カスタムHTMLで作成したブロックは、ビジュアルエディターでの表示には変更できないので注意しましょう。

文字の装飾

文字の装飾は、ブロックエディターの右サイドバーにある「ブロック」から行えます。

 

変更できる項目は、次の3つです。

  • テキスト設定
  • 色設定
  • 高度な設定

テキスト設定

テキスト設定では、フォントサイズの変更が行えます。

  • デフォルト
  • 標準
  • 特大
  • カスタム

フォントサイズは上記の7種類から選べ、カスタムではpx単位で好きなフォントサイズに変更できます。

ドロップキャップをONにすると、文頭の文字だけが大きく表示されます。

色設定

色設定では、文字色と文字の背景色を変更できます。

 

高度な設定

高度な設定では、ブロックに任意のクラスを追加できます。

 

画像の挿入

画像の挿入方法はブロックの追加ボタンをクリックし、一般ブロックの中から「画像」を選択します。

 

「アップロード」をクリックし、掲載したい画像を選択すれば完了です。

 

掲載したい画像をドラッグ・アンド・ドロップしてもOKです。

他にも便利な画像の挿入方法が2つありますので、サクッと紹介していきますね。

ギャラリー機能の利用

ギャラリー機能を利用することで、画像を横並びに表示できます。

 

ギャラリーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「ギャラリー」を選択します。

 

あとは、横並びにしたい画像を続けてアップロードしていくだけでOKです。

 

カバー機能の利用

カバー機能を利用することで、画像に文字をかぶせて表示できるようになります。

 

カバーの使い方はブロックの追加ボタンをクリックし、一般ブロックの中から「カバー」を選択します。

 

あとは「アップロード」から画像を選択し、かぶせたい文字を入力すれば完了です。

 

記事の仕上がりを確認

記事の仕上がりは、エディターの右上にある「プレビュー」から確認できます。

 

記事の下書き保存

記事を下書き保存するには、エディターの右上にある「下書き保存」をクリックします。

 

下書き保存された記事はサイトには表示されないため、作成途中の記事を保存しておくときに便利な機能ですね

記事の投稿・公開

記事を投稿するには、エディターの右上にある「公開する」をクリックします。

 

すると確認画面が表示されますので、再度「公開する」をクリックすれば記事の投稿は完了です。

 

公開の最終確認を省略したい場合には、確認画面の一番下に表示されている「公開前チェックを常に表示する。」からチェックを外せばOKです。

記事の予約投稿をする方法

記事の予約投稿をする場合には、公開の確認画面で設定できる「公開」の欄を、”今すぐ”から投稿したい日付に合わせます。

あとは「予約投稿」をクリックすれば、設定した日付に記事を自動で投稿してくれます。

 

【エリア別】ブロックエディターの使い方

ブロックエディターはエリアごとに分類すると、次の3つにわけられます。

  • ヘッダーメニューエリア
  • メインエリア
  • サイドメニューエリア

※それぞれのエリアごとに分けた画像を用意

それぞれのエリアごとに、使い方を紹介していきますね。

ヘッダーメニューエリアの使い方

ヘッダーメニューエリアには、次の5つの機能があります。

  • ブロックの追加ボタン
  • ツールボタン
  • 戻るボタン
  • 進むボタン
  • コンテンツ構造
  • ブロックナビゲーション

それぞれの機能の使い方は、下記の表を参考にしてみてください。

ブロックの追加ボタン 全種類のブロックから、任意のブロックを選択して追加
ツールボタン ブロックの編集とブロックの選択を切り替え
戻るボタン 1つ前の作業に戻る
進むボタン 1つ後の作業に進む
コンテンツ構造 記事の中の文字数や見出しの数を表示
ブロックナビゲーション 作成したブロックをブロックの種類ごとに表示

メインエリアの使い方

メインエリアでは、本文の作成を行います。

本文の作成方法はこれまでに紹介したため、具体的な書き方は省略します。

サイドメニューエリアの使い方

サイドメニューエリアでは、下記の7項目を編集できます。

  • 記事の公開状態
  • パーマリンク
  • カテゴリー
  • タグ
  • アイキャッチ画像
  • 抜粋
  • ディスカッション

それぞれの項目の使い方や編集方法は、下記の表を参考にしてみてください。

記事の公開状態 記事の表示状態や公開日時を設定
パーマリンク 記事のパーマリンクを設定。パーマリンクの設定方法は、設定したいパーマリンクを「URLスラッグ」の欄に入力すればOK
カテゴリー 記事を配属するカテゴリーを設定。カテゴリーの設定方法は、配属したいカテゴリーにチェックを入れれば完了
タグ 記事に設定したいタグを設定。設定したいタグを入力欄に入れれば、タグの設定はOK。なお、複数のタグを設定したい場合には「,(コンマ)」で区切ります
アイキャッチ画像 記事のアイキャッチ画像を設定。「アイキャッチ画像を設定」をクリックし、設定したいアイキャッチ画像を選択すれば完了
抜粋 記事の要約文であり、記事一覧などに表示される。テーマによっては抜粋が表示されないため、基本的には空欄でOK
ディスカッション コメントとピンバックの許可を設定。許可したい項目にチェックを入れれば、設定は完了

ブロックの使い方

ブロックの使い方は、主に次の7つです。

  • ブロックの挿入
  • ブロックの編集
  • ブロックの移動
  • ブロックの複製
  • ブロックの削除
  • ブロックをグループでまとめる
  • 再利用ブロックに追加

それぞれの使い方を紹介していきますね。

使い方①:ブロックの挿入

ブロックの使い方1つ目は、ブロックの挿入です。

ブロックを挿入するには、挿入したいブロックの隙間にカーソルを乗せます。

するとブロックの追加ボタンが表示されるので、ボタンをクリックしてブロックを挿入します。

 

使い方②:ブロックの編集

ブロックの使い方2つ目は、ブロックの編集です。

ブロックの編集を行うにはエディターの右サイドバーにある「ブロック」と、ブロックの編集ボタンから編集できます。

 

使い方③:ブロックの移動

ブロックの使い方3つ目は、ブロックの移動です。

ブロックの移動は、ブロックの変更ボタンの左側に表示されている「矢印ボタン」から行えます。

 

使い方④:ブロックの複製

ブロックの使い方4つ目は、ブロックの複製です。

ブロックを複製するには、複製したいブロックを選択した状態で詳細設定をクリックし「複製」を選択します。

 

すると、選択していたブロックの下に同じブロック要素が複製されます。

文字の装飾パターンをいくつか試したい場合には、ブロックを複製していろいろ試してみましょう!

使い方⑤:ブロックの削除

ブロックの使い方5つ目は、ブロックの削除です。

ブロックを削除する方法は、削除したいブロックの詳細設定をクリックし「ブロックを削除」をクリックするだけです。

 

使い方⑥:ブロックをグループでまとめる

ブロックの使い方6つ目は、ブロックをグループでまとめる方法です。

ブロックをグループでまとめるには「Shiftキー」を押しながらまとめたいブロックを選択し、詳細設定ボタンをクリック。

そして設定欄の中の「グループ化」を選択すれば、選択したブロックをひとまとめにできます。

 

ブロックをグループ化することで、ブロックの移動や編集を一括して行えますね

使い方⑦:再利用ブロックに追加

ブロックの使い方7つ目は、再利用ブロックに追加する方法です。

再利用ブロックとはブロックの内容を保存し、他の記事でも複製できるようにしたブロックのことです。

よく使うブロックを再利用ブロックとして登録しておくことで、毎回同じブロックを作る手間が省けますね

再利用ブロックに追加する方法は、ブロックの変更ボタンの中から詳細設定をクリックし「再利用ブロックに追加」を選択すれば追加できます。

 

再利用ブロックを変更するとすべての記事に適用されてしまうため、変更を加える際には十分注意しましょう。

ブロックの種類

ブロックの種類は、大きく分けて次の6つに分類されています。

  • テキストブロック
  • メディアブロック
  • デザインブロック
  • ウィジェットブロック
  • 埋め込みブロック

それぞれのブロックの使い方を、簡単に紹介していきますね。

ブロックの種類は、ブロックの追加ボタンからすべて確認できます。
※ブロック種類の画像

テキストブロック

テキストブロックには、次の10コのブロックが該当します。

  • 段落
  • 見出し
  • リスト
  • 引用
  • コード
  • クラシック
  • 整形済みテキスト
  • プルクオート
  • テーブル

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

段落 通常の文章を書く時に使うブロック
見出し 見出しを作る時に使うブロック
リスト 箇条書きにまとめる時に使うブロック
引用 他サイトなどから情報を引用する時に使うブロック
コード コードを記載する時に使うブロック
クラシック 旧エディタの「クラシックエディター」を使うためのブロック
整形済みテキスト HTMLの「preタグ」を使うためのブロック
プルクオート 装飾付きの引用ブロック。とはいえ、他サイトから情報を引用する時は基本的に「引用ブロック」を使うため、プルクオートの使用頻度はそれほど高くない
テーブル 表を作成するためのブロック
セリフや詩を記載する時に使うブロック

メディアブロック

メディアブロックには、次の7コのブロックが該当します。

  • 画像
  • ギャラリー
  • 音声
  • カバー
  • ファイル
  • メディアと文章
  • 動画

それぞれのブロックの使い方は、次の表を参考にしてみてください。

画像 メディアライブラリから画像を追加するためのブロック
ギャラリー 画像を横並びに表示するためのブロック
音声 音声ファイルを掲載するためのブロック
カバー 文字を被せた画像を作成するためのブロック
ファイル 様々な形式のファイルを掲載するためのブロック
メディアと文章 画像とテキストを横並びにした表示するためのブロック
動画 動画を掲載するためのブロック

デザインブロック

デザインブロックには、次の7コのブロックが該当します。

  • ボタン
  • カラム
  • グループ
  • 続きを読む
  • ページ区切り
  • 区切り
  • スペーサー

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

ボタン クリックボタンを作成するためのブロック
カラム 2カラムや3カラムのレイアウトを作るためのブロック
グループ グループブロックを作成するためのブロック
続きを読む 「続きを読む」を挿入することで、続きを読む以降の文章が省略された状態で記事一覧などに表示されるようになります。そして省略された文章の代わりに、続きを読むボタンが設置されます。
ページ区切り 区切り線を引くためのブロック
区切り 区切り線を引くためのブロック(ページ区切りとは、デザインが少し異なる)
スペーサー ブロックとブロックの間にスペースを作るためのブロック

ウィジェットブロック

ウィジェットブロックには、次の11コのブロックが該当します。

  • ショートコード
  • アーカイブ
  • カレンダー
  • カテゴリー
  • カスタムHTML
  • 最新のコメント
  • 最新の投稿
  • RSS
  • 検索
  • ソーシャルアイコン
  • タグクラウド

それぞれのブロックの使い方は、下記の表を参考にしてみてください。

ショートコード ショートコードを挿入するためのブロック
アーカイブ 月別のアーカイブを挿入するためのブロック。なお、アーカイブの詳細設定はブロックの編集画面から変更できます
カレンダー 日別のカレンダーを挿入するためのブロック
カテゴリー サイトに存在するカテゴリーをリスト形式で表示するためのブロック
カスタムHTML 任意のHTMLコードを入力するためのブロック
最新のコメント 記事に寄せられた最新のコメントを表示するためのブロック
最新の投稿 新着記事を表示するためのブロック
RSS 任意のRSSフィードを掲載するためのブロック
検索 サイト内検索を行うための検索窓を設置するためのブロック
ソーシャルアイコン 任意のSNSと連携するためのボタンを設置するためのブロック
タグクラウド 記事に付与されているタグを表示するためのブロック

埋め込みブロック

埋め込みブロックでは、下記のように様々なサービスのコンテンツを追加できます。

例として、使用頻度の高い埋め込みブロックだけ紹介していきますね。

埋め込み 記事で表示したいURLを埋め込むためのブロック
Twitter Twitterの投稿を埋め込むためのブロック
Youtube Youtubeの動画を埋め込むためのブロック
Facebook Facebookの投稿を埋め込むためのブロック
Instagram Instagramを埋め込むためのブロック

WordPressでブロックエディターを使いこなそう!

これで「ブロックエディターの使い方」の内容は終わりです。

クラシックエディターからブロックエディターに移行した場合には、最初の頃は使いづらさを感じるかもしれません。

しかし、ブロックエディターも使っていくうちに徐々に使いやすくなっていきます。

今後はブロックエディターを使いこなし、効率的に記事作成を進めていきましょう。

当ブログでは、WordPressの使い方を初心者に向けて紹介しています。

WordPressを使い始めたばかりの場合には、ぜひ一度読んでみてください。

最後まで読んでいただきありがとうございました。