Gutenberg

こんにちは、久川和人です。

WordPress5.0から投稿や固定ページを書く際に使用されるエディターが『Gutenberg(グーテンベルグ)』になりました。

今回は、WordPressのGutenbergエディターの使い方を図解でわかりやすく説明していきます。

Gutenbergは、WordPress4.9まで使用されていたビジュアルエディターよりも、直感的にブログの記事が書きやすくなっており、HTMLやCSSといったプログラミング言語を知らない方にとっても使いやすいエディターになっています。

しかし、今までビジュアルエディターやテキストエディターを使用していた方やWordPress初心者の方は、Gutenbergエディターの使い方に戸惑ってしまう場合があります。WordPress5.0以上で、従来のビジュアルエディターやテキストエディターを使用したい場合は、こちらの記事を参照してみてください。

 

Gutenbergエディターの基礎知識

Gutenbergエディターの編集画面の説明

最初にGutenbergエディターの編集画面を説明いたします。投稿で新規作成を開くと、つぎのような画面が表示されます。
エディター画面

編集画面

画面中央が記事を書くためのスペースです。旧エディターのビジュアルエディターと同じように、記事の構成を確認しながら作成することができます。
編集画面

左上メニュー

編集画面の左上にはメニューがあり、「投稿一覧を表示」、「ブロックの追加」、「元に戻す」・「やり直す」ボタン、記事の構成を確認できる「コンテンツ構造」、ブロックに移動できる「ブロックナビゲーション」などがあります。
左上メニュー

右上メニュー

編集画面の右上にはメニューがあり、「下書き保存」、「プレビュー」、「公開する」などがあります。
右上メニュー

サイドバーメニュー

編集画面の右側にはサイドバーメニューがあり、記事全体の構成に関する設定を行うことができます。
右サイドメニュー

また、特定のブロックを選択していると、そのブロックに関する設定メニューが表示されます。
ブロックの詳細

「ブロック」の概念

Gutenbergエディターは、ブロックという単位でコンテンツを作成していきます。ここでいうブロックとは、見出し、段落(文章)、画像、動画などといった単位のもの。そのブロックを組み合わせて記事を作成していきます。

例えば、「見出し・段落・画像・動画」という順番に構成する場合は、下図のようにブロックを配置します。
ブロックの配置

実際のブロックの配置方法については、つぎの章で説明します。

Gutenbergエディターの記事の作成方法

Gutenbergエディターの記事の作成方法について説明します。

記事タイトルの入力

記事タイトルは、「タイトルを追加」と書いてある場所をクリックすると入力できます。
記事タイトル

記事本文を入力する

記事本文を入力する手順は、以下のとおりです。
①左上メニューの「+」ボタンをクリック
②「段落」をクリック
段落を選択

【補足】ブロックの追加方法
上記以外にも以下のような方法でブロックを追加することができます。
①ブロックの真ん中にある「+」をクリック
ブロックの真ん中
②ブロックの右下にある「+」をクリック
ブロックの右下

文字を入力します。
文章入力

文字を太文字にする

文字を太くする手順は以下のとおりです。
①太くしたい文字を選択
②「B」をクリック
文字を太くする

リンクを設定する

自分のブログの他の記事や、外部サイトにリンクを設定する手順は、以下のとおりです。
①リンクを設定したい文字を選択
②「鎖マーク」をクリック
リンクを設定

リンク先を入力する画面が表示されます。
③直接URLを入力するか、自分のブログ内のキーワードを入力します。
④リンクをクリックした後、新しいタブで開きたい場合はクリックし、ボタンを有効にします。
リンク先を入力

文字の色を変える

ブロックの文字の色を変える方法は、以下のとおりです。
①右側にあるサイドバーメニューの「色設定」をクリック
色設定をクリック

②文字色の中から変更したい色をクリック
 ※変更したい色がない場合は、「カスタムカラー」をクリックし、変更したい色を選びます。
文字色の変更

背景色を変える

ブロックの背景色を変える方法は、以下のとおりです。
①右側にあるサイドバーメニューの「色設定」をクリック
色設定をクリック

②背景色の中から変更したい色をクリック
 ※変更したい色がない場合は、「カスタムカラー」をクリックし、変更したい色を選びます。
背景色の変更

見出しを作る

見出しを作る手順は、以下のとおりです。
①左上メニューの「+」ボタンをクリック
②「見出し」をクリック
見出しを作る

見出しを入力します。
見出しを入力

入力した文字が「見出し2(H2)」となります。

「見出し2(H2)」ではなくて、「見出し3(H3)」、「見出し4(H4)」にしたい場合は、以下のとおり変更することができます。
①「H2」をクリック
②「H3」または、「H4」をクリック
見出しの変更

箇条書き(リスト)を作る

箇条書き(リスト)は以下のようなことです。

箇条書き(リスト)を作る手順は、以下のとおりです。
①左上メニューの「+」ボタンをクリック
②「リスト」をクリック
リストを選択

箇条書き(リスト)を入力します。
リストを入力

番号付きのリストに変更もできます。変更する場合は、「番号付きリストに変換」をクリックします。
番号付きリストに変換

引用を挿入する

引用とは、書籍や他のブログなどから文章を使いたいときに用います。引用を挿入するとこのような感じで表示されます。
引用イメージ

引用を挿入する手順は、以下のとおりです。
①左上メニューの「+」ボタンをクリック
②「引用」をクリック
引用を挿入

引用したい文字を入力します。
引用文

つぎに、「引用元を入力」をクリックし、引用元を入力します。
引用元を入力

引用元は他のブログから引用した場合は、引用元の「ブログ名」、「URL」を記載するとよいです。

画像を挿入する

画像を挿入する手順は、以下のとおりです。
①左上メニューの「+」ボタンをクリック
②「画像」をクリック
画像を挿入

画像を新規にアップロードする場合は【アップロード】、メディアライブラリから選択したい場合は【メディアライブラリ】、画像のURLを指定したい場合は【URLから挿入】をクリックします。
メディアを選択

それぞれ、指示に従って画像を挿入します。

SNS(Twitter、YouTube、Facebook、Instagramなど)を挿入する

Twitter、YouTubeなどの投稿を挿入することができます。挿入する手順は、以下のとおりです。
①左上メニューの「+」ボタンをクリック
②メニューを下にスクロールさせ、「埋め込み」をクリック
埋め込みをクリック

③追加したいコンテンツをクリック
コンテンツを選択

④埋め込むURLを入力
⑤【埋め込む】をクリック
URLを入力

HTMLで入力する

HTMLで入力する手順は以下のとおりです。
①左上メニューの「+」ボタンをクリック
②メニューを下にスクロールさせ、「フォーマット」をクリック
フォーマットをクリック

③「カスタムHTML」をクリック
カスタムHTMLをクリック

④HTMLコードを入力します。
HTMLコードを入力

旧エディター(ビジュアルエディター)で入力する

WordPress4.9までで使用していた旧エディター(ビジュアルエディター)で入力する手順は以下のとおりです。
①左上メニューの「+」ボタンをクリック
②メニューを下にスクロールさせ、「フォーマット」をクリック
フォーマットをクリック

③「クラシック」をクリック
クラシックをクリック

④文字などを入力します。
クラシックエディター

ブロックの再利用

一度作ったブロックを「テンプレート」として保存することで、ブロックの再利用ができるようになります。

1.テンプレートとして保存する

最初に再利用したいブロックをテンプレートとして保存します。
①テンプレートとして保存したブロックをクリック
②「詳細設定」をクリック
③「再利用ブロックに追加」をクリック
再利用ブロックに追加

④ブロックの名前を入力
⑤「保存」をクリック
再利用するブロックを保存

これで、再利用する準備ができました。

2.テンプレートとして保存したブロックの再利用

つぎに、テンプレートとして保存したブロックを再利用します。
①左上メニューの「+」ボタンをクリック
②メニューを下にスクロールさせ、「再利用可能」をクリック
③先ほど保存した「ブロック」をクリック
ブロックの再利用

ブロックを削除する

ブロックを削除する手順は、以下のとおりです。
①「詳細設定」をクリック
②「ブロックを削除」をクリック
ブロックを削除

ブロックを移動

ブロックを移動させることもできます。移動させるには、ブロックの左側にあるバーにあるボタンをクリックします。
ブロックの移動

右上メニューの使い方

右上メニューは記事の公開前と公開後では表示する項目が変わります。それぞれ表示される項目について説明いたします。

記事を保存する(下書き保存)

記事を下書き保存する場合は、「下書き保存」または、「下書きへ切り替え」をクリックします。下書き保存とは、記事を公開せずに保存したいときに使用します。

記事公開前

下書き保存

記事公開後

下書きへ切り替え

作成した記事を確認する(プレビュー)

作成した記事をブラウザで確認する場合は、「プレビュー」をクリックします。なお、プレビューの場合は、記事は公開されません。

プレビュー

記事を公開/更新する

記事を公開/更新する場合は、「公開」または「更新」をクリックします。

記事公開前

公開

記事公開後

更新

おわりに

今回は、WordPress5.0以降の新エディター(Gutenberg)の使い方を紹介しました。

WordPress5.0以前の旧エディターを使っていた方にとっては、使い方が違う部分が多く、初めのうちは使いにくいかもしれません。でも、記事を書いていくうちに慣れていきますので、あせらずに使い方を覚えていってくださいね。

 

好きをお金にするマニュアルプレゼント中♪
久川和人のうつ病克服への日記を別のブログで書いています。読んでもいいよって方は、以下をクリックしてみてくださいね♪
日記
好きなことを仕事にできるブログライティングが身に付く教科書”ドリームライティング”
ドリームライティング

趣味ブログから始めて、
あなたの好きな場所で、好きな時間に、好きなことを仕事にできるブログライティングを身に付けてみませんか?
そんな夢が叶う教科書が”ドリームライティング”です。
今なら僕の特典も付いています。

Twitterでフォローしよう

おすすめの記事