コーポレートサイトにおすすめのWordPressテーマ!!詳細はこちら▶▶

Gutenbergエディターの使い方【GIF動画つき】

WordPress 5.0から標準エディターに採用された「Gutenberg」(ブロックエディター)。やはり新しいものへの抵抗は強いようで、あまり評判はよくないですね。

特に今まで旧エディターで慣れてガンガン記事を書いてきた人ほど抵抗感が強いようです。旧エディターもClassic Editorプラグインを入れれば問題なく使えます。ただClassic Editorのサポートが2021年末までらしいので出来たらGutenbergにも早めに慣れておいた方が良いと思います。
Classic Editorのサポートは2021年末まで -Capital P


今後でてくる有料テーマもGutenberg対応は必須になりますし、便利なプラグインも増えて旧エディターより使いやすくなると予想されます。
何より慣れてしまえば旧エディターに戻りたいとは思えなくなります

最初だけちょっと戸惑いがありますが、食わず嫌いせず一度Gutenbergを使ってみて欲しいと、GIF動画付きの解説記事を書いてみました。

Gutenbergエディターの基本的な使い方

Gutenbergエディターはブロックエディターと言われるように、「ブロック」単位で構成されています。まず+ボタンからブロックを追加すればOKです。

一つのブロックの編集を終えたら「Enter」を押して改行して下さい。次のブロックが追加できます。

記事タイトルの付け方

まずは普通に投稿を新規追加して下さい。

「タイトルを追加」で記事タイトルを入力しEnterを押せばOK。

段落・文章の書き方

タイトルを書いてEnterを押したら、自動的に段落(pタグに囲まれる)が書ける状態になるので、文章を書きます。

+ボタンで「段落ブロック」を追加することでも文章が書けます。

Enterで改行と書きましたが、正確には改段落です。

  • [Enter]:改段落
  • [Shift]+[Enter]:同じ段落内での改行

見出しの挿入

画像の挿入

画像もブロックで追加します。+ボタン>一般ブロック>「画像」ブロックをクリックします。

後は画像をアップロードするか既にアップされたメディアライブラリから選択して画像を挿入します。

リンクの貼り方

リンクはリンクテキストを選択して「リンクアイコン」をクリックし、URLをペーストすればOKです。

表(テーブル)を挿入

Gutenbergなら表(テーブル)もHTMLをいじることなく直感的な操作で簡単に挿入できます。

ブロックの追加>フォーマットから「テーブル」ブロックを追加します。行数と列数を指定すればOKです。

リスト・引用ブロックの挿入

リストや引用ブロックも同様に+ボタンから挿入できます。

カスタムブロック用のプラグインを利用する

SANGO GutenbergSnow Monkey BlocksなどのGutenberg用の便利なカスタムブロックを使えるプラグインを利用すれば、記事執筆に便利なボックス挿入が簡単にできます。

これらのプラグインの詳しい使い方は下記記事もご参照下さい。

「SANGO Gutenberg」プラグインがリリース SANGOでの記事執筆がますます便利に
Snow Monkey BlocksをSANGOで使ってみた

クラシックブロックでAddQuicktagを使う

Gutenbergにはクラシックブロックという旧エディターの仕様に近いブロックが用意されています。クラシックブロックを使えばAddQuickプラグインに入れた有料テーマの装飾が簡単に使えます。

ここではSANGOの装飾「注意書き」を使ってみます。

アフィリエイトコードを入れる

アフィリエイト広告のコードなど記事中にHTMLを挿入したいときは「カスタムHTML」ブロックが使えます。

ブロックをHTMLとして編集

ブロックを選択して右上のメニューボタン(縦に3点並んでるの)をクリックすると「HTMLとして編集」という項目があります。ブロック単位で「ビジュアル編集」と「HTML編集」が切り替えられます。

記事全体をHTMLとして編集

記事全体をHTMLとして編集したい場合はエディター右上のメニューボタン(縦3点)をクリックしてコードエディターに切り替えることできます。

私は記事内の複数のアフィリエイトコードを書き換えたいときはコードエディターを使っています。

ブロックの背景に色を付ける

ブロックを選択した状態で右メニューの「ブロック」>「色設定」という項目でブロックの背景に色を付けたり文字色を変更したりできます。

また高度な設定では追加のCSSクラスを付与することができ、様々な装飾がブロック単位でできます。

ブロックの順番を入れ替える/削除する

ブロックは上下に移動して順番を入れ替えたり、削除や複製することができます。

文書の概要で全体の構成を把握する

Gutenbergエディターの好きなところです。左上のiアイコンをクリックすると文書の概要で全体の見出しの構成が一目で把握することができます。

便利なGutenberg用プラグイン(公式)

SANGO Gutenbergなどのプラグインの他にもGutenberg用に便利な機能やカスタムブロックを追加できるプラグインをまとめて紹介します。

記事執筆に便利な装飾ブロックが追加できる「Snow Monkey Blocks 」

吹き出しで会話ができる 「LIQUID SPEECH BALLOON 」

簡単なカスタムブロックを作成できるBlock Lab

Amazon・楽天・yahooのアフィリエイト商品リンクを簡単に挿入できる「WP Associate Post R2」

WP Associate Post R2はブロックとして商品リンクが簡単に挿入できるので重宝しています。WordPress.org公式のプラグインではないですが豊富なカスタマイズができる「Rinker」もGutenberg対応されています。

以上Gutenbergエディターの基本的な使い方をまとめてみました。もっと効率よく書ける方法があるかと思います。実際にGutenbergエディターを触って最適な使い方を見つけるのも面白いですね。