もっとも強い者が生き残るのではなく、もっとも賢い者が生き延びるのではない。
唯一生き残るのは、変化できる者である。
ダーヴィン ※諸説あります
ふむふむ。さて、みなさんは変化してますか？
アフィリエイター・ブロガーの皆さんこんにちは、マサオカです。
WordPressの新エディタGutenberg（グーテンベルク）について、あなたはどんな印象を持っていますか？
「エディタ、使いづらいんでしょ？」
周りからそう聞いて、旧エディタ（クラシックエディタ）を使っているのではないでしょうか。
使ってみたら全然そんなことありませんでした！
ぜひ使うべきエディタだから紹介させてください！！
ヨメ「使いづらい」と感じるのは初めて使うから。旧エディタに慣れているからです。
自転車って、乗れるようになるまで大変でしたよね。
一度乗り方覚えたら、チャリ漕ぎまくってましたよね。
同じようなイメージです。基本の使い方を覚えてしまえば、自転車に乗ったように爽快なライティングができるエディタ。それがグーテンベルク です。
乗り心地に少し不満があったので、しっかりチューニングしました。今回は私が行なったグーテンベルク カスタマイズの中身もご紹介します。なんと無料です。
あなたがグーテンベルク を使うきっかけになればと思います。それではご覧ください。
この記事のもくじ
Gutenbergとは
Gutenberg（グーテンベルク ）はWordpressVer5.0から実装された投稿エディタです。段落ごとの「ブロック」を使って記事をデザインします。
グーテンベルクの開発思想は「ライティングをシンプルに、視覚的にわかりやすく」すること。直感的な操作が本当に楽なんです。
切り替えがストレスだった「ビジュアルモード/テキストモード」が統合され、編集画面と公開記事のデザインがほぼ同じになりました。頻繁なプレビューがなくなり、リビジョン数が減るので表示スピードも上がります。
旧エディタのテキストモード（HTML）って、修正したいコードを見つけるのも一苦労なんですよね。
グーテンベルクでアフィリエイトタグなど直接HTMLで書きたいときには、「カスタムHTMLブロック」を使って差し込みます。
ASPが用意したHTMLタグを修正したい時でも、すぐ見つかるので快適です。
「ライティングをシンプルに、視覚的にわかりやすく」するエディタ
- 直感的なライティングに特化
- プレビュー不要のデザイン
- HTML文は専用ブロックを使う
- 専門的なタグは考えなくてOK
Gutenbergのインストール方法
グーテンベルクを使う方法は簡単。WordPressを5.0以上にバージョンアップするだけです。
ところでWordPress5.0でも「クラシックエディタ」を使いたい人向けに「クラシックエディタプラグイン」が公開されています。この記事に興味を持ったあなたは、クラシックエディタプラグイン、入れてますよね。
「クラシックエディタプラグイン」のサポートは2022年に終了します。グーテンベルクを使う日は必ず来るので、今から慣れておく方がいいですよ。
Classic Editor is an official WordPress plugin, and will be fully supported and maintained until at least 2022, or as long as is necessary.
訳：Classic EditorはWordPress公式プラグインであり、少なくとも2022年まで、または必要な限り完全にサポートされ、維持されます。
Classic Editor
「クラシックエディタプラグイン」のサポートは2022年で終了します。
Gutenbergを使い始める時の注意点
ヨメ「ブロック」に慣れよう
グーテンベルクでは、記事をブロック（段落）単位で分けて考えます。新しい考え方なので違和感を感じます。私もそうでした。
「見出し」「段落」「画像」「リスト」など色々なブロックが用意されていて、そのブロックを選んで記事を作ります。
ブロックの種類さえ覚えれば、クリックして選ぶだけで思った通りのデザインがサクサク作れます。
リライトは「クラシックブロック」を変換してから
グーテンベルクをオンにすると、過去記事は「クラシック」という1つの大きなブロックに保存されます。
クラシックブロックのままでも編集できますが、専用のブロックに変換しないとグーテンベルクの機能を活かせません。
ブロック右上詳細設定＞ブロックへ変換をクリックして変換します。
テーブルのセル統合はできない
| テーブルセルは | 結合できません |
| プラグインを使えば | 可能です |
テーブル同士を結合する「rowspan」「colspan」は使えません。今まで使っていたテーブルは、結合が解除されてしまうので注意しましょう。
プラグイン「Advanced Gutenberg」の「Advanced Tableブロック」を使えばテーブルセルを結合できます。
- ブロックを編集するイメージを理解する
- 過去記事の編集前にブロックを変換する
- 結合テーブルはプラグインを使う
Gutenbergの魅力は直感的で疾走感のある筆記体験
マサオカコードやタグに囚われず直感的に記事を作っていけるのが、とても心地よいです。玄人向けだったWordpressが、誰でも書けるブログエディタに生まれ変わりました。
公開した記事を、そのまま編集しているような感覚。
サクサク記事が作られていくので、私のように感情で書き上げるエモーショナルライターにピッタリです。
記事のプレビューしなくていい
編集画面が投稿画面とほぼ同じデザインになるので、プレビューする必要がありません。
元々記事のリビジョンが多く、記事作成中に50〜100回プレビュー画面を見ていました。この時間すごく無駄ですよね。100回プレビューをロードする時間がかかっています。
プレビューのロードと確認作業で10秒×100回、16分を無駄に消費していることになります。
よく使うワードセットを登録して呼び出しできる
グーテンベルクのブロックは、スマホのユーザー辞書のように登録できます。これを「再利用ブロック」と呼びます。
いつも使う文句は使い回して、ラクしましょう。
同じ再利用ブロックを一箇所編集すると、全ての再利用ブロックの内容が書き換わります。
アフィリエイトタグやテーブルを「再利用ブロック」として登録して置くだけで、何記事にも渡る記事の修正が一瞬で終わるんです。
商品の価格変更、提携ASPのタグ張り替えに便利な機能です。
ヨメGutenbergのイマイチな部分をカスタマイズしよう
マサオカ「なんか物足りない。」私も思いました。ここからは「これは必要だろう」という機能を紹介し、あなたのグーテンベルク に追加する方法を紹介します。
マーカーや文字装飾の機能がない
AddQuickTagを使っている人にはお馴染み、太字・マーカー・文字着色の機能がありません。
クラシックエディターで使えていた機能は使いたいですよね。そこで使うのがプラグイン「Add RichText Toolber Button」です。
ヨメエディタ上で赤文字、マーカー、文字サイズの変更、オリジナルの装飾の追加ができます。
このプラグインの有無でグーテンベルクの使い勝手は天と地ほど差が出ます。絶対に入れておくべきプラグインです。
- 文字に色をつけられる
- マーカーを引ける
- 文字サイズを変更できる
- カスタムデザインを追加できる
追加CSSがグーテンベルクエディタに反映されない
style.cssに追加したデザインは、エディタに反映されません。カスタマイズしてもっと使いやすくしましょう。
ヨメ- functions.phpに以下コードを追記
- style.cssと同じ階層にeditor-style.cssを作成
- editor-style.cssにCSSを書くと反映
ちょっと解りづらかったので、もう少し解説します。
外観＞テーマエディター＞functions.php
/************************
editor-style.cssをグーテンベルクで表示
*************************/
function gutenberg_editor_css() {
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'gutenberg_editor_css' );WordPressから編集できます。
functions.phpの修正は慎重に行ってください。
Root＞wp-content＞themes＞テーマ名＞editor-style.css
FTPソフトや、サーバー管理画面にあるファイルマネージャーから編集できます。Wordpressの管理画面からは追加できません。
テキストを開いて、ファイル名をeditor-style.cssとしてください。テーマによって最初から用意されている場合もあります。
当ブログは、無料FTPソフト「FileZilla」を利用しています。使い方はこちらのサイトが参考になります。
WordPressから編集できます。
文字装飾用にstyle.cssへ追記したCSSを、editor-style.cssにコピペしてください。見出し（h2）のCSSも入れておくと良いでしょう。
エディタ上で追記したCSSが見えるようになりました。
上記デザインを挿入しているツールバーは、プラグイン「Add RichText Toolber Button」の機能を利用しています。
※Add RichText Toolber Button内で追加したCSSの変更については反映されますが、念の為editor-style.cssにも入れておくと良いでしょう。
エディタ画面を更に公開記事デザインに近づける
エディタの表示画面を、更に公開記事の状態に近づけるデザインカスタマイズが公開されていたので紹介します。
CSSカスタマイズサイト「for men」に公開されているCSSを追記するだけで、グーテンベルク エディタが更に使いやすくなります。ぜひ使わせていただきましょう。
参考グーテンベルクのエディタ画面 書きやすくしよう①｜for-men.jp
ショートコードがプレビュー表示されない
マサオカグーテンベルクでも「ショートコード」はテキストのまま表示されます。
ショートコードの代わりに専用ブロックを使えば、記事と同じデザインを編集画面へ表示できます。（テーマが対応している必要があります。）
例えばこのブログで使っているテーマ「SANGO」には、グーテンベルクの専用プラグインが用意されています。
公式「SANGO Gutenberg」
このプラグインでは、「吹き出し」「見出しデザイン」「ボックスデザイン」「タイムライン」４つの専用ブロックが使えるんです。ショートコードよりも感覚的な操作なので、慣れてしまうとクラシックエディタに戻れません。
AddQuickTagが呼び出せない
マサオカ現在、AddQuickTagはグーテンベルクに対応していません。
少し手間ですが、ボックス「クラシック」を使うとクラシックエディタで利用していたボタンが表示されます。
プラグイン「AddQuickTag」がグーテンベルク に対応してくれるまでは、この方法を使いましょう。
まとめGutenbergを使って気持ちよく記事を書こう！
直感的な操作がウリの爽快エディタ「Gutenberg（グーテンベルク ）」の紹介でした。一度使いこなせば、クラシックエディタに戻る理由がありません。
とても感動したので、私がリリースするSANGO公認の子テーマ「PORIPU」もグーテンベルクに対応することにしました。専用プラグインを無償配布しますので、ご利用ください。
初めて使うものってハードルが高いですよね。
でも、グーテンベルクは今後のWordPress標準となるエディタ。WindowsXPのように、クラシックエディタもあと数年でサポートが終了します。
ギリギリまで粘ってバタバタと変更するのではなく、今から新しい流れに乗ってはいかがでしょう。
グーテンベルクは今も発展途上です。たくさんの利用者が増え、開発サイドに良い変化を与えられたらと思い、この記事を書きました。
ユーザーが増えればそれだけプラグインも対応せざるを得ませんよね。グーテンベルク自体もユーザーの声で改善が進む、なんてことも願っています。
おすすめのエディタ「Gutenberg（グーテンベルク ）」の紹介でした。試しに使ってみて損はしませんよ。
最後までお読みいただきありがとうございました。マサオカ（@iMassa07）でした。
変化しますか？
