当サイト使用のWPテーマ「SWELL」の評判口コミはこちら

完全版!WordPressグーテンベルクの使い方を54枚の画像で解説!

完全版!WordPressグーテンベルクの使い方を33枚の画像で解説!
URLをコピーする
URLをコピーしました!

本記事はグーテンベルク(Gutenberg)の使い方を54枚の画像を使って詳しく完全解説します。

WordPress新エディターのグーテンベルク

グーテンベルクは直感的に操作ができるのでとても使いやすく記事作成が速くなります。

しかしながらブロック単位で構成されているなど今までのエディターとは全く違うので最初は戸惑います。

そこで本記事はグーテンベルクの使い方を誰でも分かるように54枚の画像を使って詳しく解説します。

本記事を読むとスムーズにグーテンベルクで記事を作ることができます。

「グーテンベルクを今から使い始める方」や「グーテンベルクの使い勝手が気になっている方」は是非ご覧ください。

じゅんた

私は2020年6月からWordPressテーマSWELLでGutenbergを使ってます!
>>実際にGutenbergを使っている方の評判やメリットはこちら

読みたいところから読める「目次」

WordPressグーテンベルクの概要

グーテンベルクはブロック単位で作成していきます。

ざっくりとしたイメージは下記のような形です。

【図解】グーテンベルクの使い方概要

使い始めたばかりの頃は戸惑うかもしれませんが、慣れたらとても便利になります。

なぜなら見た目そのままで編集できてブロックの入れ替えも簡単なので記事の作成が楽になるからです。

WordPressグーテンベルクの使い方「基本的な操作5項目」を解説!

WordPressグーテンベルクの使い方「基本的な操作5項目」を解説!

ブロックエディター画面の基本的な操作5項目は下記の通りです。

それぞれ解説します。

ブロックを選択する方法

まずはブロック全体一覧から選ぶ方法です。

左上の「+」ボタンをクリックすると左サイドメニューにブロック一覧が表示され選べます。

ブロック全体一覧から選ぶ方法

ただし通常はエディターの中の「+」ボタンから選ぶ方が効率的です。

その際は良く使うブロックしか出てこないため検索を使えばうまく効率的に使えます。

ブロックを選択する画像

ブロックを別のブロックに変更する方法

例えば段落ブロックで書いていた文章を後で見出しブロックやリストブロックに変更することができます。

やり方は下記図の通り変更したいブロックを選択中に「ブロック変更ボタン」をクリックします。

ブロックを別のブロックに変更する方法

すると変換できるブロックのリストが表示されるので変換したいブロックを選びます。

ブロックを別のブロックに変更する方法2

ブロックを入れ替える方法

ブロックの入れ替えも簡単にできます。

例えば下記図のようにリストブロックと見出しブロックを入れ替えたい場合は見出しブロックを選択し赤枠の「∧」ボタンをクリックします。

ブロックを入れ替える方法1

すると下記図の通り簡単に入れ替わります。

ブロックを入れ替える方法2

右サイドメニューの設定の「ブロックタブ」から設定を変更できます。

ブロック単位の設定を変える方法

記事全体の設定を変える方法(パーマリンクやカテゴリ設定など)

右サイドメニューの設定の「投稿タブ」から設定を変更できます。

記事全体の設定を変える方法

WordPressグーテンベルクの使い方を記事作成の流れで詳しく解説!

それではさっそくグーテンベルクの使い方を記事作成の流れで解説します。

説明する流れは下記の通りです。

それぞれ説明します。

※グーテンベルクのエディター画面はWordPressダッシュボードの新規記事の追加をクリックすると立ち上がります。

記事投稿の新規追加画面

グーテンベルクでタイトル(H1タグ)を入力する

じゅんた

タイトルの入力方法です!

タイトルは下記の赤枠に入力します。

グーテンベルクでタイトルの入力

グーテンベルクで見出しを作成する

じゅんた

次に見出しの作成方法です!

見出しの作成も簡単です。

下記図の「+」ボタンをクリックして見出しを選択します。

良く使うブロックはそのまま表示されますがもし「見出し」がない場合は「ブロックの検索」で「見出し」と入力するか「全て表示」から選択できます。

グーテンベルクで見出しの選択

見出しが表示されるので「H2」のボタンをクリックし「H1」から「H6」まで見出しレベルを選択します。

そして見出しの文字を入力します。

グーテンベルクで見出しレベルの選択

文章を入力した後に見出しへ変換することもできます。

下記図のように見出しに変えたいブロックを選択し「ブロック変換ボタン」から「見出し」を選択します。

グーテンベルクで後から文章を見出しに変換

すると見出しに変更されます。

グーテンベルクで見出しの完成

グーテンベルクで文章を作成する

じゅんた

次は文章の作成方法です!

グーテンベルクは文章を作成した後に簡単に装飾できるので、まずは文章を入力していくと良いです。

グーテンベルクで文章の作成

また後ほど解説しますが、文章以外の表やリストなどもブロック単位で作成していきます。

>>グーテンベルクで使えるブロックの詳細を先に見たい方はこちら(ページ内リンク)

グーテンベルクで文字装飾する

じゅんた

次は文字装飾をします!

ここでは基本的な下記3パターンを説明します。

これ以外も同じ要領で文字装飾できますので参考にしてください。

  • 文字を太文字にする
  • 文字の色を変える
  • 文字をテキストリンクにする

それぞれ解説します。

文字を太文字にする

太字にしたいときは文章を選択して下記のアイコンをクリックします。

グーテンベルクで文字を太文字に

文字の色を変える

文字の色を変えたいときは下矢印のアイコンから「テキスト色」を選択します。

グーテンベルクでテキストの色を変える

そしてカラーを選択します。

グーテンベルクで文字カラーを選択

文字をテキストリンクにする

まずはテキストリンクにしたい文字を選択し「リンクアイコン」をクリックします。

グーテンベルクで文字をテキストリンクに変える手順1

次にリンク先のURLを入力して「決定」ボタンをクリックします。

グーテンベルクで文字をテキストリンクに変える手順2

そうすると下記のように選択した文章がテキストリンクになります。

グーテンベルクで文字をテキストリンクに変える手順3

グーテンベルクで画像を挿入する

じゅんた

次は画像の挿入です!

画像の挿入は画像ブロックを使います。

「+」ボタンから「画像」を選択します。

(画像アイコンがなければ「ブロックの検索」で検索してみてください。)

グーテンベルクで画像ブロックを選択

お好みの方法を選択して画像を追加します。

グーテンベルクで画像を追加する

画像が挿入されたら右側のサイドメニューでAltテキストや画像サイズなどの細かい設定ができます。

グーテンベルクで追加した画像の設定をする

グーテンベルクでパーマリンクを変更する

じゅんた

次はパーマリンクの変更です!

まずパーマリンクを変更する前に一度「下書き保存」してください。

下書き保存を一度もしていない状態だとパーマリンクの変更はできません。

グーテンベルクで下書き保存

そして右サイドメニューの「投稿」ボタンをクリックし「URLスラッグ」の欄にお好みのURLを入力します。

グーテンベルクでパーマリンクの設定

グーテンベルクでカテゴリ、タグを選択する

じゅんた

次はカテゴリ、タグの選択です!

右側のサイドメニューの「投稿」からカテゴリーの欄から選択しタグの欄にお好みのタグを入力します。

グーテンベルクでカテゴリ、タグを選択

グーテンベルクでアイキャッチを挿入する

じゅんた

次はアイキャッチの挿入です!

右側のサイドメニューの「投稿」から「アイキャッチ画像を設定」をクリックして画像を選択します。

グーテンベルクでアイキャッチ画像の挿入

グーテンベルクで抜粋を入力する

じゅんた

次は抜粋の入力です!

右側のサイドメニューの「投稿」から「抜粋を入力」の欄に入力します。

抜粋とはSNSで投稿した際に表示されるコンテンツの内容を説明する文章です。

140文字以内で簡潔に書くようにすることをおすすめします。

グーテンベルクで抜粋を入力する画面

グーテンベルクでディスクリプションを入力する

じゅんた

次はディスクリプションの入力です!

ディスクリプションの入力はSEOプラグインやWordPressテーマによっても変わってきます。

ここでは当サイトで使用している「SWELL&SEO SIMPLE PACK」のパターンで説明します。

右側のサイドメニューの「投稿」「SEO SIMPLE PACK」から「このページのディスクリプション」に入力します。

ディスクリプションは検索結果のタイトルの下に表示されるコンテンツの説明文です。

基本的には前述した抜粋と同じ文章で良いです。

グーテンベルクでディスクリプションを入力する画面

グーテンベルクで公開する

じゅんた

最後に公開です!

記事公開は右上の「公開」ボタンをクリックするだけです。

グーテンベルクで記事を公開する画面

以上が基本的な記事を作成する流れです。

次にグーテンベルクで使える様々な機能について紹介します。

グーテンベルクで使える標準ブロックを解説!

Gutenbergで使える標準ブロックは下記の通りです。

使用頻度が高いブロックはそれぞれ詳しく解説もしていきます。

※青地のブロック名はクリックするとジャンプします。

※WordPressテーマによってはこの標準ブロック以外のオリジナルブロックが使えます。

<テキストブロック>

ブロック名用途頻度
段落文字を入力する
見出しH2~H6の見出しを入力する
リストリストを入力する
引用他のサイトからコンテンツを引用するときに使用する
コードHTMLタグなどのコードをそのまま表示する
クラシッククラシックエディタをで入力する
整形済みテキスト改行やスペースを一つのブロックでそのまま表示する
プルクオート強調したい引用があるときにしようする
テーブル表を挿入する
詩を書くときに使う

<メディアブロック>

ブロック名用途使う頻度
画像画像を挿入する
ギャラリー複数の画像をリッチに表示する
音声音声プレイヤーを挿入する
カバーテキストオーバーレイを含む画像や動画を挿入する
画像や動画を背景にしてレイヤーを被せテキストを強調できる
ファイルファイルをダウンロードするリンクを挿入する
メディアとテキスト画像と文章を横並びに表示させる
動画動画を挿入する
※動画は重たいためYouTubeにアップして埋め込む方法がおすすめ

<デザインブロック>

ブロック名用途使う頻度
ボタンボタンリンクを挿入する
※テーマ独自のボタンリンクの方がリッチで使いやすい事が多い
多-少
カラムコンテンツ(ブロック)を横に2~3分割します
グループ複数のブロックを統合します
統合することで複数のブロックに対して装飾可能
続きトップページで抜粋表示されるまでのコンテンツを指定します
ページ区切りページを分ける
区切り水平に区切ります
スペーサーブロックとブロックの間のに空白のスペースを作ります。

<ウィジェット>

ブロック名用途使う頻度
ショートコードショートコードを挿入する
アーカイブアーカイブウィジットを挿入する
カレンダーカレンダーを挿入する
カテゴリーカテゴリーウィジェットを挿入する
カスタムHTMLHTMLコードを入力する
ブロック単位でプレビュー可能
最新のコメント最新のコメントを挿入する
最新の投稿最新の投稿一覧を挿入する
RSSRSSまたはAtomフィードからの投稿を表示する
ソーシャルアイコンソーシャルメディアにリンクするアイコンを表示する
タグクラウド良く使われるタグを表示する
検索サイト内検索ができる検索窓を追加する

<埋め込み> ※数が多いですが用途がほとんど同じなので一部抜粋して書いてます。

ブロック名用途使う頻度
埋め込みURLを入力することでコンテンツを自動で判別し記事に埋め込みます
TwitterTwitterの投稿内容を記事に埋め込みます
YouTubeYouTubeの動画を記事に埋め込みます

リストブロックの使い方

リストブロックを選択します。

リストブロックの選択

リストブロックの文字を入力します。

リストブロックの文字を入力

リストブロックのスタイルを変更します。

リストブロックのスタイルを数字に変更
リストブロックの段落を下げる

引用ブロックの使い方

引用ブロックを選択します。

引用ブロックの選択

下記図のように引用内容と引用元を入力していきます。

引用ブロックへの入力

ボタンブロックの使い方

ボタンブロックを選択します。

※WordPressテーマオリジナルのボタンブロックは各テーマのマニュアルをご覧ください。

ボタンブロックの選択

下記図の通りボタンブロックの「名称」「リンク先URL」を入力して色などの設定をします。

ボタンブロックの設定

カラムブロックの使い方

カラムブロックを選択します。

カラムブロックの選択

分割の仕方を選びクリックします。

カラムブロックの分割の仕方を選択

コンテンツを作成していきます。

カラムブロックのコンテンツ作成

グループブロックの使い方

グループ化したいブロックを選択してブロック変換ボタンをクリックします。

グループ化したいブロックの選択

グループ化を選択します。

ブロック変換ボタンからグループ化を選択

グループ化したブロックは一緒に枠で囲ったりできます。

グループ化したコンテンツの活用方法

グーテンベルクの良く使う「ショートカットキー」をご紹介!

グーテンベルクのショートカットキーで覚えておきたいのは下記の5つです。

これ以外にも合計で26個ショートカットキーはありますが、あまり多いと覚えるのも難しく間違える可能性も増えます。

私が良く使うキーが2つ以下のショートカットキーを厳選しました。

通常操作でも1クリックでできるものがほとんどなので3つ以上使うショートカットキーは逆に不便です。

まずは下記7点を是非活用してみてください。

操作したいことWindowsショートカットキーMacショートカットキー
ブロックの呼び出し/(/の後にブロック名で検索可)/(/の後にブロック名で検索可)
下書き保存するCtrl + S + S
直前の編集を取り消して戻すCtrl + Z + Z
選択したテキストをリンクに変換Ctrl + K + K
選択したテキストを太字に変換Ctrl + B + B
見出しブロックの呼び出し(H2の場合)##スペース##スペース
見出しブロックの呼び出し(H3の場合)###スペース###スペース

他のショートカットキー一覧を見たい方は投稿画面で下記キーを押すと確認できます。

  • Windows : Shift + Alt + H
  • Mac : + + H

再利用ブロックの使い方!記事作成を効率化する方法をご紹介!

再利用ブロックとは良く使うブロックの設定やブロックの組み合わせを登録しておくことで後から簡単に呼び出せる機能です。

再利用ブロックの使い方は下記の通りです。

それぞれ解説します。

再利用ブロックを登録する

まずは再利用ブロックの登録方法を解説します。

投稿画面で再利用したいブロックが出てきたらまずは選択します。

再利用ブロックに登録したいブロックの選択画面

その後赤枠の「:」ボタンから「再利用ブロックに追加」をクリックします。

再利用ブロックへの登録

すると再利用ブロックに登録されます。

次に再利用ブロックの名称が無題になっているので、名称を変更します。

編集中の記事を「下書き保存」してから左上の「+」から「再利用可能」「すべての再利用ブロックを管理」とクリックしていきます。

登録した再利用ブロックの編集画面へ移行

すると再利用ブロックの一覧画面になるので名称を変えたい再利用したいブロックをクリックします。

再利用ブロックの一覧画面

下記画面のように名称を入力し「変更」ボタンをクリックします。

再利用ブロックの名称変更

再利用ブロックを呼び出す

次に先ほど登録した再利用ブロックを呼び出します。

呼び出し方法は簡単で通常ブロックと同じように名称で検索すると表示されるので選択します。

再利用ブロックの呼び出し方

すると登録したブロックが表示されます。

再利用ブロック呼び出し完了

グーテンベルクにおすすめのWordPressテーマ「SWELL」をご紹介!

SWELL

最後にグーテンベルクにおすすめのWordPressテーマは「SWELL」です。

なぜならGutenbergに完全対応しておりオリジナルブロックの数が多いからです。

 SWELLSnow MonkeyTHE SONICAFFINGER6JINTHE THORSANGO
Gutenberg対応度×
オリジナルブロック1625116115
価格17,600円16,500円/年980円/月
7,800円/年
14,800円14,800円16,280円11,000円
※Snow MonkeyとTHE SONICはサブスクリプション(定期課金性)です。

Snow MonkeyやTHE SONICもSWELLと同じくらいグーテンベルクにおすすめですが、サブスクリプション(定額課金性)になります。

SWELLは買い切りなのでお得です。

グーテンベルクの使用を見当されているのであればチェックしてみてください。

\ Gutenberg完全対応で使いやすさNo1 /

専用プラグインで他テーマからの乗り換えも安心♪

参考>>SWELLの口コミ・評判を知りたい方はコチラ♪

まとめ

まとめ

以上のようにGutenbergは慣れたら使いやすく記事を効率的に書く事ができます。

是非、当記事を参考にGutenbergを使って頂ければ嬉しいです。

ただしGutenbergの弱点としてWordPressテーマによって使い勝手が全然変わってきます。

もしGutenbergが使いづらいのであればお使いのWordPressテーマがGutenbergに対応していない場合もあります。

下記に「Gutenberg対応のWordPressテーマ」をまとめた記事のリンクを掲載しておきますので、こちらも良かったら参考にしてみて下さい。

参考記事>>Gutenberg対応のWordPressテーマを徹底解説!専門家が7つ厳選!

シェア頂けると嬉しいです!よろしくお願いします!
URLをコピーする
URLをコピーしました!

コメント

コメントする

読みたいところから読める「目次」
閉じる