Gutenberg(グーテンベルク)の使い方|画像&動画での解説アリ

Gutenbergの使い方が分からない…
旧エディタと何が違うの?…

こんな悩みを抱えていないでしょうか?

Gutenbergとは、WordPress5.0から採用された新エディタのことです。

きっと今まで旧エディタで記事を書いていた人にとっては、「使いにくい…」と感じるでしょう。

 

しかし、結論からいうと、それはまだ慣れていないだけ。

実際は、Gutenbergになってから、「使いやすくなった!」なんていう声もたくさんあります。

なので、ぜひこの記事でGutenbergをマスターしてしまいましょう!

 

というわけで本日は、

本日のテーマ
  1. Gutenbergとは
  2. Gutenbergで記事を公開する方法
  3. ブロックの理解を深めよう
  4. パターンの理解を深めよう
  5. Gutenbergでインストールしておくべきプラグイン
  6. Gutenbergでオススメするブログテーマ

というテーマでブログを執筆していこうと思います。

 

▼おすすめテーマ▼

 

目次

Gutenbergとは

Gutenberg

WordPress5.0から採用された新エディタのこと

結論、旧エディタと比べると、Gutenbergの方が格段に使いやすくなりました。

 

旧エディタとGutenbergの違い

結論、Gutenbergでは、ブロックという概念を採用しました。

簡単に説明すると、小さなブロックに分けて、1つの記事を形成していくイメージです。

 

しかし、ブロックなんて言われてもいまいちピンとこないですよね?

具体的に解説していきますね。

 

ブロックとは

前述した記事

たとえば、上記の記事は下記の3つのブロックで構成されています。

見出し
ボックス
段落

さらに、これらのブロックは自由自在に、入れ替えることが可能です。

たとえば、「見出しのブロック」と「段落のブロック」を入れ替えたりという感じで。

ここでは、ブロックのイメージがなんとなく湧いてもらえればOKです。

Gutenbergのメリット

結論から言うと、下記の2つですね。

Gutenbergのメリット
  1. リッチなコンテンツが作れる
  2. 機能が一元化される

メリット1.リッチなコンテンツが作れる

旧エディタでは、HTMLCSSの知識がなければ、リッチなコンテンツを作ることができなかったのですが、

Gutenbergでは、そのような知識がなくても、リッチなコンテンツを作ることが可能となりました。

たとえば、スライドショーなどがそうですね。

Gutenbergでは、このようなスライドショーを一瞬で作ることができます。

メリット2.機能が一元化される

旧エディタでは、機能があちこちに分散していたので、記事を書くのが面倒になる場面が多々ありました。

しかし、Gutenbergでは、バラバラだった機能たちがブロックという形で統一されたため、作業効率がUPしました。

たとえば、今までは「吹き出し」はプラグインを使わなければ生成できなかったのですが、

Gutenbergでは、それをブロックとしてデフォルトで取り入れました。

「吹き出し」がデフォルトになったのは嬉しいですね〜

ちなみに、WordPressから、ブロックについて下記のような説明があります。

Blocks are the unifying evolution of what is now covered, in different ways, by shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements.

(ブロックは、ショートコード、埋め込み、ウィジェット、ポストフォーマット、カスタムポストタイプ、テーマオプション、メタボックス、その他のフォーマット要素によって、さまざまな方法でカバーされるようになったものを統一的に進化させたものです)

引用:https://wordpress.org/plugins/gutenberg/

Gutenbergで記事を公開する方法

ではここからは、Gutenbergを使って記事を公開する方法について解説します。

手順1.「段落」を追加する

WordPressの編集画面

まずは、リード文を書くためのブロックを追加しましょう。

なぜなら、ブロックを追加しなければ、テキストを入力することはできないからです。

ブロックのメニュー

テキストを入力する際は、「段落」のブロックを使います。

すると、下記のようにテキストが入力できる状態になります。

記事の編集画面

段落の種類

段落には、下記のような種類があります。

 

手順2.「見出し」を追加する

ブロックのメニュー

ブロックの追加ボタンを押して「見出し」を選択します。

↓すると見出しが出現します。

見出しの種類

H2、H3、H4などは、エディタ内で選択可能です。

文と文の距離を話す

もしも、リード文見出しの距離が気になるようでしたら、

リード文と見出しの間に「スペーサー」というブロックを追加しましょう。

スペーサーのブロックをいれると、右メニューから文と文の距離を選択することができるので、お好みに合わせてどうぞ。

オータニは30にしています

手順3.詳細設定

上記5つの項目を設定しましょう。

  1. ステータスと公開状態
  2. パーマリンク
  3. カテゴリー
  4. タグ
  5. アイキャッチ画像

①ステータスと公開状態

基本的には、何もいじる必要はありません。

ただ、公開予約をする場合は、「今すぐ」というところをクリックすると、公開予約情報を設定することができます。

②パーマリンク

ここでパーマリンクが設定できますので、しっかり設定しましょう。

記事1つひとつに付けられるURLのこと

パーマリンクはシンプルで分かりやすいものにしましょう。

たとえば、本日の記事であれば、「blog/Gutenberg」みたいな感じです。

注意点としては、絶対に「日本語」にしないようにしましょう。

なぜなら、文字列がグチャグチャになるからです。

たとえば、パーマリンクを「テスト」にすると「%E3%83%86%E3%82%B9%E3%83%88」という感じになってしまいます。

③カテゴリー

あらかじめ設定しておいたカテゴリーにチェックを入れましょう。

もしも、新しくカテゴリーを設定する場合は、画面下の「新規カテゴリーを追加」をクリックすればOKです。

④タグ

タグをいれることで、読者が特定の記事を探しやすくなります。

たとえば、今回の記事であれば、「Gutenberg 新エディタ WordPress5.0」などですかね。

⑤アイキャッチ画像

アイキャッチ画像とは、記事一覧などで表示される画像のことです。

アイキャッチ画像によって、サイトの回遊率が変化しますので、しっかり設定するようにしましょう。

手順4.公開する

最後に、画面右上の「公開」をクリックすれば、記事を公開できます。

記事を公開するまでの流れは以上で終わりとなります。

Gutenbergでブロック・テキストを編集する

ではここからは、ブロックやテキストを編集する方法について解説していきますね。

ブロック・テキストの編集は、赤枠で囲った部分から行うことができます。

ブロックタイプまたはスタイルを変更

段落マーク

左の段落マークを選択すると、ブロックタイプやスタイルを変更できます。

矢印マーク

右の上下の矢印マークを選択すると、ブロックを上下に動かすことができます。

↓動画にしました。

テキストの配置を変更

3本線のマークを選択するちと、文字を右・中央・左に寄せるかを選択できます。

オータニは、テキストは左寄せにして、画像などは中央に寄せることが多いですね

マーカー・ラベル・フォントサイズ

マーカーマーカー
ラベルラベル
フォントサイズフォントサイズ

太文字・イタリック・リンク・よりリッチなテキスト制御

太文字太文字(mommand+Bでも可)
イタリックイタリック(mommand+Iでも可)
リンクリンク(mommand+Kでも可)
よりリッチなテキスト制御よりリッチなテキスト制御

よりリッチなテキスト制御

ここでは、よりリッチなテキスを作成することができます。

たとえば、下記のようなものですね。

お好みに合わせて使ってください。

詳細設定

ここでは、ブロックやテキストの詳細な設定が行えます。

再利用ブロックに追加

これは、効率よく記事を書くうえで欠かせない機能です。

たとえば、オータニは「スペーサー」というブロックをよく使うのですが、これをいちいちブロックから検索するのは面倒です。

しかし、あらかじめこの機能を登録しておくことで、瞬時に呼び起こすことができるようになります。

再利用ブロックの登録方法は動画にしておきました。

再利用ブロックを呼び起こす方法も動画にしておきました。

再利用ブロックを削除する方法も動画にしました。

ブロック>>テキストを使いこなそう

では、ここからは記事の作成効率をあげるテキストを厳選して紹介します。

  1. リスト
  2. 引用
  3. コード
  4. テーブル

1.リスト

  • オータニ
  • オータニ
  • オータニ

リストは、何かを列挙する時に使いましょう。

リストに番号をふりたい場合は、エディタから選択できます。

  1. オータニ
  2. オータニ
  3. オータニ

2.引用

オータニ オータニ オータニ

引用元:オータニ

引用は、他サイトの記事や本を引用する時に使いましょう。

3.コード

<div class="wp-block-liquid-speech-balloon liquid-speech-balloon-wrap liquid-speech-balloon-01"><div class="liquid-speech-balloon-avatar"></div><div class="liquid-speech-balloon-text"><p>Gutenbergの使い方が分からない…<br>旧エディタと何が違うの?…</p><div class="liquid-speech-balloon-arrow"></div></div></div>
<!-- /wp:liquid/speech-balloon -->

コードは、オススメしたいコードがある時に使いましょう。

4.テーブル

項目目標今月の数字
売上100万円50万円
集客4名5名
契約2名1名

テーブルは、チャートやデータの共有などに使いましょう。

テーブルは編集画面の左メニューから、様々な装飾を施すことができます。

スタイル

デフォルト、ストライプの2つから選択できます。

オータニオータニ
オータニオータニ
ストライプ

表の設定

表のセル幅を固定

これにチェックを入れないと、テキストを入力した際に、表が崩れてしまいます。

項目目標今月の数字
売上100万円50万円
集客4名5名
契約2名1名
ヘッダーセクション

ヘッダーセクションとは、下記表の赤文字の箇所です。

項目目標今月の数字
売上100万円50万円
集客4名5名
契約2名1名
フッターセクション

フッターセクションとは、下記表の赤文字の箇所です。

フッターセクションはあまり使いません

項目目標今月の数字
売上100万円50万円
集客4名5名
契約2名1名
オータニオータニオータニ

色の設定

テーブルの背景色を選択することができます。

緑の背景色

テキストの色

選択済みの文字色 →選択済みの文字色
選択済み文字色背景 →選択済み文字色背景

横スクロール設定

表が横長になると、スマホで見る時に、文字が押し潰されて見にくくなります。

しかし、表のスクロールにチェックを入れておくと、表を横にスクロールすることができるので、ユーザビリティ向上につながります。

ブロック>>メディアを使いこなそう

では、ここからは記事の作成効率をあげるメディアを厳選して紹介します。

  1. 画像
  2. スライドショー
  3. ギャラリー
  4. 音声
  5. カバー
  6. メディアと文章
  7. 動画

1.画像

引用元:https://www.youtube.com/channel/UCCRsTn4VlUET2usxF9N7idQ?view_as=subscriber

「メディア」→「画像」から簡単に挿入することができます。

2.スライドショー

スライドショーは、デザイン性のあるサイトにしたい場合に使いましょう。

3.ギャラリー

ギャラリーを使うことで、複数の画像をキレイにレイアウトすることができます。

4.音声

このような形で表示されます

音声を埋め込む時は、下記の方法から選択することができます。

5.カバー

カバーを使うことで、画像の上にテキストを入力するというリッチなコンテンツを作ることができます。

画像の焦点に関しては、メニューから操作することが可能です。

6.メディアと文章

モバイルの場合は、画像とテキストは縦に並べるようにしておきましょう。

なぜなら、見にくくなり、ユーザビリティが低下してしまうからです。

デフォルトでチェックが入っています

7.動画

動画は、下記の方法から挿入することができます。

ブロック>>デザインを使いこなそう

では、ここからは記事の作成効率をあげるデザインを厳選して紹介します。

  1. ボタン
  2. カラム
  3. スペーサー

1.ボタン

ボタンの色・サイズ、テキストの色、ボタンのデザインなども柔軟に変更可能です。

リンクの挿入は、文字を選択して「command+K」で挿入できます。

ちなみに、「新しいタブで開く」にチェックをいれることをオススメします。

なぜなら、読者が見ていたページの離脱率が上がってしまうからです。

2.カラム

オータニ オータニ オータニ オータニ

オータニ オータニ オータニ オータニ

オータニ オータニ オータニ オータニ

カラムには下記の種類があるので、好みに合わせて選択してください。

 

3.スペーサー

スペーサーを使うことで、ブロックとブロックの間に空白をいれることができます。

Gutenbergでは、編集画面でブロックとブロックの間を改行したとしても、実際に記事を公開するとブロックが詰まってしまいます。

編集画面では文字が薄くなってしまいます

なので、スペーサーを入れて空白を入れましょう。

これをするかしないかで読みやすさは大きく変わりますし、これによりユーザビリティが変わります。

スペーサーを使わないと…

オータニ

オータニ

スペーサーを使うと!

オータニ

オータニ

スペーサーの大きさは自分で決めることが可能です。

この記事のスペーサーは全て30です

ブロック>>ウィジェットを使いこなそう

では、ここからは記事の作成効率をあげるウィジェットを厳選して紹介します。

  1. 星評価
  2. ショートコード
  3. アーカイブ
  4. カテゴリー
  5. 最近の投稿
  6. ソーシャルアイコン

1.星評価

評価 :4/5。

星評価は、書籍やお店などの評価をする時に使いましょう。

そこまで使う頻度が高いウィジェットではありませんが、リッチなコンテンツ作る上では欠かせないですね。

ちなみに、星の数、星の色、星のデザインなどは、右メニューから簡単に選択できます。

2.ショートコード

内集団バイアスとは|信頼レベルを爆上げする心理学

ショートコードとは、プログラムコードを[××××××]という形で短くしたものです。

たとえば、上記の関連記事は、下記のようなショートコードによって呼び起こされています。

旧エディタを使っていた方は、ショートコードを多用していたでしょう。

なぜなら、Gutenbergのように、WordPress自体の機能が多くはなかったからです。

もしも、旧エディタで使っていたショートコードをGutenbergでも使いたい方は、こちらのウィジェットを使っていただければと思います。

3.アーカイブ

アーカイブでは、今まで書いた記事を年月ごとに呼び起こすことができます。

アーカイブは、記事の中で使うことはほとんどありません。

サイトのサイドメニューなどで使うことが多いですね。

オータニの記事のサイドメニューを見てみてください。
アーカイブが表示されているはずですよ?

4.カテゴリー

カテゴリーでは、サイト内のカテゴリーを全て呼び起こしてくれます。

カテゴリーも、アーカイブと一緒で記事内で使われることはそこまで多くありません。

5.最新の投稿

最近の投稿では、直近で書いた記事を呼び起こしてくれます。

ここでは、アイキャッチ画像、並び順(古い順)なども追加することができます。

6.ソーシャルアイコン

これにより、ソーシャルメディアのアクセスも増やすことができます。

他にも、様々なメディアをソーシャルアイコンとして使うことができます。

たとえば、Spotify、Pinterest、TikTokなど。

アイコンの設置方法については動画にしました。

ブロック>>埋め込みを使いこなそう

では、ここからは記事の作成効率をあげる埋め込みを厳選して紹介します。

  1. 関連記事
  2. SNS

1.関連記事

なぜかアイキャッチとタイトルのところにリストがついてしまいます

関連記事を使うことで、当該記事と同じカテゴリーの記事を呼び起こすことができます。

ちなみに、サムネイルを表示するか?日付を表示するか?投稿数なども一緒に設定できます。

2.SNS(Twitter)

SNSの投稿などを埋め込むことができます。

ちなみに、これはInstagram、YouTube、facebookなども全く同じです。

なので、あなたが運営しているソーシャルメディアに合わせて埋め込んでいただければと思います。

SNSの埋め込み方は、動画にしました。

パターンを使いこなそう

では、ここからは記事の作成効率をあげるパターンを厳選して紹介します。

  1. カバー
  2. 2カラム(テキスト)
  3. 3カラム
  4. メディアと文章
  5. 吹き出し
  6. CTAボタン
  7. 新着記事

1.カバー

カバーを使うことで、リッチなコンテンツを作ることができます。

もちろん、ヘッダー画像、テキストの色、ボタの大きさ・色、ボタン内のテキストの色など様々なことが編集可能です。

たとえば、公式LINE、メルマガ 、無料プレゼントなどにいいですね。

2.2カラム(テキスト)

2カラムを使うことで、テキストを二行に分けることができるようになります。

もちろん、背景色、テキストなども編集可能です。

3.3カラム

3カラムを使うことで、テキストを三行に分けることができるようになります。

もちろん、背景色、テキストなども編集可能です。

4.メディアと文章

メディアと文章では、お洒落な感じでカラムを分けることができます。

もちろん、背景色、テキストボタンなども編集可能です。

5.吹き出し

吹き出しを使うことで、会話形式でテキストを挿入することができます。

結果、これが読みやすさにつながり、ユーザビリティの向上につながります。

ちなみに、アイコンのデザイン・色、吹き出しの色・位置などは編集可能です。

一応、アバターの挿入の仕方だけ動画にしておきますね。

6.CTAボタン

CTAボタンを使うことで、お洒落なボタンを設置することができます。

もちろん、背景の色、ボタンの色、テキストの色などは編集可能です。

7.新着記事

新着記事を使うと、直近で書いた記事の一覧が8つ表示されます。

(記事数の変更はできないよう)

もちろん、テキストの色、背景の色などは編集可能です。

Gutenbergで使っておくべきプラグイン

結論、Advanced Editor Tools (previously TinyMCE Advanced)は必ずインストールしておくようにしましょう。

これは、ブロックエディター (Gutenberg) とクラシックエディター (TinyMCE) を拡張、強化してくれるプラグインです。

改行がスムーズに

たとえば、いちいちスペーサー(空白を作ってくれるブロック)を使うのは面倒ですよね?

しかし、ブロックの中の「クラシック版の段落」を使うことで、旧エディタのようにエンターで改行ができるようになります。

クラシック版の段落

旧エディタでテキストを入力する

このように、「オータニ」の間にスペーサーを入れなくても、実際の投稿では改行されています。

また、旧エディタで使われていたプラグインなども使うことができます。

たとえば、AddQuicktagはよく使っていた人も多いのでは?

ショートコードを一瞬で呼び起こす最強の時短ツール

AddQuicktagの使い方【→最強時短ツール】

なので、Gutenbergが使いにくいと感じている方は、Advanced Editor Tools (previously TinyMCE Advanced)をインストールしておくことをオススメします。

Gutenbergにオススメのテーマ

STORK(ストーク)19

結論、STORK(ストーク)19がオススメです。

なぜなら、STORK(ストーク)19は、Gutenbergで採用したブロックに対応したテーマだからです。

▼おすすめテーマ▼

リッチなブロックが揃っている

STORK(ストーク)19をインストールすると、上記のようなブロックが出現します。

どれもリッチなコンテンツを作る上で欠かせないブロックです。

もしも、STORK(ストーク)19で使えるブロックについて詳しく知りたい方は、

『有料ブログテーマ|STORK(ストーク)19をレビューしてみた』を参考にしてください。

有料ブログテーマ|STORK(ストーク)19をレビューしてみた

まとめ:Gutenbergの使い方

では最後にまとめましょう。

本日は、

本日のテーマ
  1. Gutenbergとは
  2. Gutenbergで記事を公開する方法
  3. ブロックの理解を深めよう
  4. パターンの理解を深めよう
  5. Gutenbergでインストールしておくべきプラグイン
  6. Gutenbergでオススメするブログテーマ

というテーマでブログを執筆しました。

もしかしたら、Gutenbergをまだ使いにくい…と感じている人も多いでしょう。

しかし、結論、慣れれば旧エディタの時よりも効率的に記事を執筆することができるようになります。

なので、これを機にぜひGutenbergをマスターするようにしましょう。

コメントを残す

メールアドレスが公開されることはありません。