大人が読めるおすすめ漫画40選

敬遠してたGutenberg(グーテンベルク)実は爽快なライティングエディタだった件 【WordPress】

もっとも強い者が生き残るのではなく、もっとも賢い者が生き延びるのではない。

唯一生き残るのは、変化できる者である。

ダーヴィン ※諸説あります
https://oldno07.com/wp-content/uploads/2018/06/asset.jpg
マサオカ

ふむふむ。さて、みなさんは変化してますか?

アフィリエイター・ブロガーの皆さんこんにちは、マサオカです。

WordPressの新エディタGutenberg(グーテンベルク)について、あなたはどんな印象を持っていますか?

「エディタ、使いづらいんでしょ?」

周りからそう聞いて、旧エディタ(クラシックエディタ)を使っているのではないでしょうか。

使ってみたら全然そんなことありませんでした!
ぜひ使うべきエディタだから紹介させてください!!

ヨメ
今回はそんな記事です

「使いづらい」と感じるのは初めて使うから。旧エディタに慣れているからです。

自転車って、乗れるようになるまで大変でしたよね。
一度乗り方覚えたら、チャリ漕ぎまくってましたよね。

同じようなイメージです。基本の使い方を覚えてしまえば、自転車に乗ったように爽快なライティングができるエディタ。それがグーテンベルク です。

Gutenberg快適なテキストエディタ
自転車メーカーにありそうな名前、それがGutenberg。

乗り心地に少し不満があったので、しっかりチューニングしました。今回は私が行なったグーテンベルク カスタマイズの中身もご紹介します。なんと無料です。

あなたがグーテンベルク を使うきっかけになればと思います。それではご覧ください。

Gutenbergとは

WordpressGutenbergとは

Gutenberg(グーテンベルク )はWordpressVer5.0から実装された投稿エディタです。段落ごとの「ブロック」を使って記事をデザインします。

グーテンベルグ ブロックとは
段落は全てブロックです。

グーテンベルクの開発思想は「ライティングをシンプルに、視覚的にわかりやすく」すること。直感的な操作が本当に楽なんです。

切り替えがストレスだった「ビジュアルモード/テキストモード」が統合され、編集画面と公開記事のデザインがほぼ同じになりました。頻繁なプレビューがなくなり、リビジョン数が減るので表示スピードも上がります。

旧エディタのテキストモード(HTML)って、修正したいコードを見つけるのも一苦労なんですよね。

wordpressグーテンベルグ クラシックエディタのデメリット
大量のコードから編集したい部分を探すのが大変でした。

グーテンベルクでアフィリエイトタグなど直接HTMLで書きたいときには、「カスタムHTMLブロック」を使って差し込みます。

ASPが用意したHTMLタグを修正したい時でも、すぐ見つかるので快適です。

グーテンベルグ カスタムHTMLブロック
サッと目を通すだけで修正箇所が見つかります。
Gutenbergをまとめると

「ライティングをシンプルに、視覚的にわかりやすく」するエディタ

  • 直感的なライティングに特化
  • プレビュー不要のデザイン
  • 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ブロック」を使えばテーブルセルを結合できます。

公式Advanced Gutenberg

グーテンベルクの注意ポイント
  • ブロックを編集するイメージを理解する
  • 過去記事の編集前にブロックを変換する
  • 結合テーブルはプラグインを使う

Gutenbergの魅力は直感的で疾走感のある筆記体験

Gutenberg快適なテキストエディタ
マサオカ
とにかく疾い、直感的ライティング!これに尽きる!

コードやタグに囚われず直感的に記事を作っていけるのが、とても心地よいです。玄人向けだったWordpressが、誰でも書けるブログエディタに生まれ変わりました。

公開した記事を、そのまま編集しているような感覚。

サクサク記事が作られていくので、私のように感情で書き上げるエモーショナルライターにピッタリです。

記事のプレビューしなくていい

WordPressグーテンベルグ はプレビューしなくていいエディタ
注:これは記事ではなくエディタ画面です。

編集画面が投稿画面とほぼ同じデザインになるので、プレビューする必要がありません。

元々記事のリビジョンが多く、記事作成中に50〜100回プレビュー画面を見ていました。この時間すごく無駄ですよね。100回プレビューをロードする時間がかかっています。

プレビューのロードと確認作業で10秒×100回、16分を無駄に消費していることになります。

よく使うワードセットを登録して呼び出しできる

グーテンベルクのブロックは、スマホのユーザー辞書のように登録できます。これを「再利用ブロック」と呼びます。

いつも使う文句は使い回して、ラクしましょう。

Wordpressグーテンベルグ 再利用ブロックの使い方
ワンクリックで簡単に呼び出せます。

同じ再利用ブロックを一箇所編集すると、全ての再利用ブロックの内容が書き換わります。

Wordpressグーテンベルグ の再利用ブロックの使い方
下2つの再利用ブロックの文字も書き換わります。

アフィリエイトタグやテーブルを「再利用ブロック」として登録して置くだけで、何記事にも渡る記事の修正が一瞬で終わるんです。

商品の価格変更、提携ASPのタグ張り替えに便利な機能です。

ヨメ
アフィリエイトタグを登録しておこう!

Gutenbergのイマイチな部分をカスタマイズしよう

Wordpressグーテンベルグ のカスタマイズ
マサオカ
標準の機能だけじゃ物足りない。そんな時は新しい使い方を考えてみましょう。

「なんか物足りない。」私も思いました。ここからは「これは必要だろう」という機能を紹介し、あなたのグーテンベルク に追加する方法を紹介します。

マーカーや文字装飾の機能がない

AddQuickTagを使っている人にはお馴染み、太字・マーカー・文字着色の機能がありません

クラシックエディターで使えていた機能は使いたいですよね。そこで使うのがプラグイン「Add RichText Toolber Button」です。

ヨメ
ツールバーに「文字装飾機能」を追加するプラグイン。

エディタ上で赤文字、マーカー、文字サイズの変更、オリジナルの装飾の追加ができます。

マーカーや文字装飾もワンクリック。

このプラグインの有無でグーテンベルクの使い勝手は天と地ほど差が出ます。絶対に入れておくべきプラグインです。

このプラグインのすごいところ
  • 文字に色をつけられる
  • マーカーを引ける
  • 文字サイズを変更できる
  • カスタムデザインを追加できる

公式Add RichText Toolbar Button

追加CSSがグーテンベルクエディタに反映されない

style.cssに追加したデザインは、エディタに反映されません。カスタマイズしてもっと使いやすくしましょう。

ヨメ
カスタマイズレシピはこちら!
  1. functions.phpに以下コードを追記
  2. style.cssと同じ階層にeditor-style.cssを作成
  3. editor-style.cssにCSSを書くと反映

ちょっと解りづらかったので、もう少し解説します。

functions.phpに以下の文を追記
WordpressGutenbergに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の修正は慎重に行ってください。

editor-style.cssをstyle.cssと同じ階層に作成
グーテンベルグ エディタにCSSを反映する

Rootwp-contentthemesテーマ名editor-style.css

FTPソフトや、サーバー管理画面にあるファイルマネージャーから編集できます。Wordpressの管理画面からは追加できません。

テキストを開いて、ファイル名をeditor-style.cssとしてください。テーマによって最初から用意されている場合もあります。

当ブログは、無料FTPソフト「FileZilla」を利用しています。使い方はこちらのサイトが参考になります。

参考【FileZillaの使い方】WordPressでFTPソフトを使おう|サルワカ

editor-style.cssにstyle.cssの装飾用cssをコピー
グーテンベルグ に追加CSSを表示

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

このプラグインでは、「吹き出し」「見出しデザイン」「ボックスデザイン」「タイムライン」4つの専用ブロックが使えるんです。ショートコードよりも感覚的な操作なので、慣れてしまうとクラシックエディタに戻れません。

グーテンベルグ のカスタムブロック
クリックだけでタイムラインが作成できる

AddQuickTagが呼び出せない

マサオカ
クラシックボックスを使いましょう。

現在、AddQuickTagはグーテンベルクに対応していません。

少し手間ですが、ボックス「クラシック」を使うとクラシックエディタで利用していたボタンが表示されます。

グーテンベルグ のクラシックブロックでAddQuickTagを使う
クラシックからAddQuickTagを呼び出す

プラグイン「AddQuickTag」がグーテンベルク に対応してくれるまでは、この方法を使いましょう。

まとめGutenbergを使って気持ちよく記事を書こう!

Wordpressグーテンベルグ の使い方メリットデメリット

直感的な操作がウリの爽快エディタ「Gutenberg(グーテンベルク )」の紹介でした。一度使いこなせば、クラシックエディタに戻る理由がありません。

とても感動したので、私がリリースするSANGO子テーマ「PORIPU」もグーテンベルクに対応することにしました。後日、専用プラグインを無償配布します。(配布方法など決まったらお知らせします)

初めて使うものってハードルが高いですよね。

でも、グーテンベルクは今後のWordPress標準となるエディタ。WindowsXPのように、クラシックエディタもあと数年でサポートが終了します。

ギリギリまで粘ってバタバタと変更するのではなく、今から新しい流れに乗ってはいかがでしょう。

グーテンベルクは今も発展途上です。たくさんの利用者が増え、開発サイドに良い変化を与えられたらと思い、この記事を書きました。

ユーザーが増えればそれだけプラグインも対応せざるを得ませんよね。グーテンベルク自体もユーザーの声で改善が進む、なんてことも願っています。

おすすめのエディタ「Gutenberg(グーテンベルク )」の紹介でした。試しに使ってみて損はしませんよ。

最後までお読みいただきありがとうございました。マサオカ(@iMassa07)でした。

https://oldno07.com/wp-content/uploads/2018/06/asset.jpg
マサオカ

変化しますか?

グーテンベルクの為に入れたプラグイン

コメントを残す