Gutenbergエディタをカスタマイズして使いやすくするために行った6つのこと

まいど!もはやGutenbergエディタにどハマり中の けいしゅけ(@keisyukeblog)です☆

Gutenbergエディタって使いにくいんでしょう?

エディタを使い易くするためにカスタマイズする必要があるのは確かです。
しかし、最も大事な作業はたったの3つ。
①使えるプラグインを入れること・要らないプラグインを消すこと
②AddQuickタグに登録している定型文を再利用可能ブロックに置き換えること
③Gutenbergエディタ内で見出しデザインCSSを反映させること
これらを行えば、ほぼクラシックエディタに劣らぬ使い勝手の良さを体感できるでしょう!!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

本記事では、最も大事な作業3つを含めて、僕がGutenbergエディタええやん!
と感じるまでに行った6つのことを順番にまとめて紹介していきますわ☆

とはいえ、『Classicエディタでええやん』って声は多いと思います。そして、その意見は合ってます。

別にGutenbergに変えたから言うてSEO的に良い影響が出るワケちゃいますし。(クラシックエディタだからと言って悪影響が出ることもない)

じゃ、なんでけいしゅけはGutenbergに変えたのか?

自己満足

そうです、自己満足のためでありますっ!!

そうは言っても使ってみりゃ Gutenbergエディタ ってかなり良いところがあるんですっ!それは公開状態の記事と同じ表現が記事作成中に表示されていることでしょう。

記事作成画面とプレビュー画面を行ったり来たりしなくていいので、効率よく記事が書けます。

それでも多くの人は言うでしょう、『でもさ、Gutenbergエディタにしたら表示がシンプル過ぎて使いにくいし、何といってもAddQuickタグ使えへんのがイタイやんっ!!ぜったい記事書きにくなるって!!』と。

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

Gutenbergエディタに変更直後であれば、答えはYESです。

そやけど、記事本文で紹介する6つのカスタマイズというか調整をしたところ、クラシックエディタと同等以上の使いやすさを実現することに成功しました!!

下に比較を示しますので見比べてみてください!

Before

Gutenbergエディタ表示

プレビュー画面

After

Gutenbergエディタ表示

プレビュー画面

Gutenbergエディタ

エエやんっ!!

見比べると明らかなんやけど、Gutenbergエディタをカスタマイズすればホンマに記事公開時の表示と同じイメージを見ながら執筆することができるのがお分かりいただけると思います☆

とは言え、その方法を教えてくださいよ!って思いますよね?

なので、Before から After に至るまでの6つのステップを公開します!!SANGOユーザーであれば、特に再現性は高いものですのでチャレンジしてみる価値があるかも知れませんよ☆

Gutenbergエディタを使い易くするために行った6つのコト

やったことリスト

  1. プラグインを有効化した(絶対入れるべき3つのプラグインを教えます)
  2. プラグインを停止・削除した(Gutenbergエディタと相性が悪いのがあるねん)
  3. AddQuickタグに変わる『再利用ブロック』を最大限使い倒した
  4. Gutenbergエディタの幅を広げた(デフォルトやと狭い)
  5. 吹き出しのイラスト部分を大きくするカスタマイズを施した
  6. 見出しのデザインをカスタマイズしたCSSがエディタ内で表示されるようにした

1. たった3つのプラグインをインストール&有効化するだけで使い易くなる

3 plugins

ホントかよ!?って思うでしょうが、ホンマじゃ!!

これから紹介する3つのプラグインをインストール&有効化するだけでGutenbergエディタは劇的に使い易いエディタに化けるねんで~

このプラグインが必要やっ!!

 

  • 『TinyMCE Advanced』の設定をGutenbergエディタ用に変更 ➤ クラシックエディタに近づく
  • 『Marker Animation』をインストール&有効化 ➤ アンダーラインを引けるようにする
  • 『SANGO Gutenberg』をインストール&有効化 ➤ 独自ブロックや表示文字が変わる

 

1-1. TinyMCE Advanced を有効化して、Gutenbergエディタ仕様に設定する

TinyMCE Advanced

クラシックエディタを使っている方でも入れているプラグインやと思います。

TinyMCE Advanced のGutenbergエディタ向け設定画面をいじればエエのんです!!

Before 設定を触っていない場合

TinyMCE Advancedの設定画面

エディタで表示されるものが少ない…。

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/12/takotyukegimon-e1514038058602.jpg
タコちゅけ

なんだか、エディタで文字装飾をするボタンが少ない気がしまちゅね…。

クラシックエディタに慣れてたら『あのボタンがないっ!!』となりそうでしゅ💦

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

そのとおりやねん。そやけど、もちろん設定を変えればクリアできるから安心してほしい。

After 設定を触ったあと

TinyMCE Advanced の設定画面

Gutenbergエディタでもボタンが増えた!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

すっかりいつも通りのボタンたちが並ぶようになったわ☆

アンダーラインも引けるし

文章に上付きの文字1)だって書けるし、

下付きの文字もかける2)

引用文献に番号を振るときに使うから必需品や。

CO

みたいに化学式を書く時にも下付き数字は重宝するから、何気ないけど大事な設定やね☆

エディタ画面の

ツールバーが

リッチになった!

1-2. Marker Animation をインストール&有効化してGutenbergエディタのデフォルト状態では存在しないアンダーラインを引けるボタンを導入する!

Marker Animation

Gutenbergエディタを使うのに、TinyMCE Advancedの設定変更までは割とすぐにたどり着けるかも知れませんが、いざ記事を書こうとすると蛍光ペンでアンダーラインを引くボタンがありませんよね?

Before Marker Animationを導入してない場合

Marker Animationを導入してない場合のGutenbergエディタ表示は…。

見ての通り、マーカーを引くボタンがありません。背景色を黄色にするボタンのみがある状態です。

Marker Animation をインストール&有効化すると…。

『マーカーアニメーション』と書かれたボタンが出てきました。

これでアンダーラインが引ける!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/12/takotyukegimon-e1514038058602.jpg
タコちゅけ

この動いてるアンダーラインってプラグインを使ってたんでちゅね?

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

そやで☆

無料やし、記事をスクロールして戻った時にもう一回マーカーが引き直される動きがすんごい気に入ってるねん☆

蛍光ペンの色は登録できる数がたくさんある。

僕の場合はひとまずこれら4種類くらいに留めてるわ。使い分けのルールが明確になってないとガチャガチャして読みにくい記事になっちゃうからね。

ちなみに、このブログで使っているアンダーラインの設定は以下の通りです。

Marker Animation設定の解説

 

  • 有効かどうか ➤ 『有効』・・・これでマーカーボタンが使えるようになる
  • マーカーの色 ➤ カラーピッカーで選ぶことができます。僕が使っている色は『#ffbd84』です。
  • マーカーの太さ ➤ 太いと文字が塗られるようになります。僕はアンダーラインにしたかったので細い線になるよう設定しています。
  • 塗る時間 ➤ この数字が小さいと、マーカーがシュッ!と素早く塗られます。
  • 遅れ時間 ➤ この数字が大きいほど、マーカーの引かれる部分が表示されてから塗られ始めが遅くなります。
  • 塗り方 ➤ 「開始と終わりを滑らかに」「一定」「ゆっくり始まる」「ゆっくり終わる」「ゆっくり始まりゆっくり終わる」の中から好きなものを選びます。
  • 太文字にするか ➤ マーカーが引かれる部分のテキスト部分が太文字になるようにする設定です。僕は太文字にして強調したいのでチェックを入れてます。
  • ストライプデザインかどうか ➤ 引かれるマーカーがストライプ柄になる設定。僕は好みでないのでチェックを入れていません。
  • 繰り返すかどうか ➤ マーカーが引かれる部分が表示から一度消えてから、またその場所にスクロールして戻った場合に、改めてマーカーが引かれます。これがMarker Animationの素晴らしい部分で、競合のZEBLINEにない機能です。
  • マーカー位置の調整 ➤ これによって、マーカーが文字に被るように引かれるか?下半分だけに引かれるか?アンダーラインのようにするのか?を指定できます。僕は.99emとすることでアンダーラーン風に設定しました。

 

注意やっ!

ちなみに、クラシックエディタでは今のバージョンのMarker Animationが使えません。

ただし、旧バージョン(ver. 1.7.6)をダウンロードすれば色は1色しか指定できませんが利用可能です。

手順としては、ダウンロードページへ行く ➤ ダウンロード ボタンのリンクをコピーして、バージョン部分を1.7.6とします。

つまり、URLを https://downloads.wordpress.org/plugin/marker-animation.1.7.6.zip とすればOKということです。

動くマーカーが実装出来ちゃった!!

1-3. SANGO Gutenberg をインストール&有効化してGutenbergエディタで表示される字のフォントなどSANGOに合わせる & SANGOカスタムブロック実装

SANGO Gutenberg

あとはカンタンです。プラグインをインストールし、WordPressにアップロードしましょう。

参考 SANGO GutenbergSANGOカスタマイズガイド

主な手順等はリンク先ページで解説されていますのでそちらに譲ることにします。さて、SANGO Gutenbergあプラグインをインストール&有効化すると表示はどうなるでしょうか?

Before ➤ After を画像で比較してみてみましょう。

Before

After

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2018/01/takotyukeodoroki-e1516437595427.png
タコちゅけ

文字フォントが変わるだけでこんなにイメージが違うんでちゅね!!!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

そやで!そして、SANGOカスタムブロックが使えるようになることで吹き出しも一気に使い易くなるねん!!

見出しも簡単に装飾付きのものが作れる。僕の場合はH2,H3,H4タグは決まったデザインしか使わず、それ以外の部分で見出しデザインを取り入れたい部分に利用してるわ。

お疲れさまでした!

プラグインの導入はこれで終わりです☆

2. Gutenbergエディタと相性が悪い プラグインを停止・削除しよう

プラグインを停止せよ!

それでは、次にクラシックエディタでは使っていたけどGutenbergエディタではつかわなくなるプラグインがあるので紹介します。

たった2個だけです!

このプラグインを停止せよ!!

 

  • 『Classic Editor』を停止しよう ➤ Gutenbergエディタを使うために絶対必要や
  • 『All ShortCode of SANGO』を停止しよう ➤ Gutenbergエディタ内のクラシックブロックでも動作しないし、エディタ内の挙動が少しだけおかしくなります。

 

2-1. Classic Editor に別れを告げる

Good Bye

Classic Editor

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

ダッシュボード ➤ プラグイン ➤ インストール済みプラグイン

と画面を進め、Classic Editor を停止しよう。

停止に伴って何かしらの不具合が生じることはありません☆

MEMO
Classic Editorで書いていた記事はどうなるの?

Gutenbergエディタでは、旧エディタで書いた記事はすべてクラシックブロックに格納された形で保存されます。

もしもrewriteする場合はどうしたら良いか手順を説明しますね。

2-1-1. Classicブロックに入っている記事を『ブロックへ変換』でブロック変換する

2-1-2. ブロック変換された記事をrewriteする

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

見ての通り、記事に何の影響もないままブロックへ変換されていることがわかると思います。

ただし、ショートコードとなっている部分がありますね。

吹き出しなど、ショートコードで記述していた部分がこのように表記されてしまうようです。

そのままでも記事画面ではちゃんと表現されるので一気に手直しする必要はありませんが、仮にセリフ部分を書き直す際にはSANGOカスタムブロックの吹き出しを使う事で、記事作成画面に吹き出しのイラストも表示させた状態でのライティングが可能になります!!

なので、Classic Editorで書いていた記事のrewriteについてはじっくり取り組むのが良いと思います🎵

2-2. All ShortCode of SANGO を停止する

Good Bye

All ShortCode of SANGO

All ShortCode of SANGOは現在は配布が終了している無料プラグインです。

クラシックエディタでは、SANGOで使えるショートコード全てを呼び出せるという神ツールでした。

しかし、サポートは終了してしまっているようですし、アップデートもされておらず残念ながらGutenbergエディタでは使えなくなってしまいました。クラシックブロックでなら使えるかも!?と期待したのですが、そちらでも動作は確認できませんでした。

また、Gutenbergエディタのプログラムと干渉する部分があるのかエディタの動きにエラーが生じやすくなってしまうようです。

ですので、Gutenbergエディタを使うならばAll ShortCode of SANGOプラグインは停止してください。

プラグインのGutenberg対応

これにて終了!!

3. AddQuickタグに変わる『再利用ブロック』を登録しまくる!

\使いこなしましょう/

再利用ブロックが

AddQuickタグに代わる

次世代のエース機能や!

Gutenbergエディタで登場した再利用ブロックというものがあります。

これは、ショートコードや定型文ブロックを記録し、何度も利用するための機能です。

再利用ブロックに登録すると便利やで!

 

  • 記事全体のテンプレート
  • ショートコードで挟んで表現するもの(Box や リストアップ、カスタマイズショートコードなど)
  • クラシックブロックでしたCSSデザインが反映できないもの
  • 吹き出し(吹き出しの囲いやセリフ囲い、セリフ背景色をGutenbergエディタで指定しておく)

 

3-1. 記事全体のテンプレートを再利用ブロックに登録しておこう

記事テンプレートを再利用

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

AddQuickタグでもこうして記事のテンプレートを作っていた方も多いのではないでしょうか?

GutenbergエディタになってAddQuickタグは使えませんが、再利用ブロックは複数ブロックを1つの大きな塊として再利用ブロックにすることだってできるんです!

これを使えば、記事完成イメージを見ながらライティングできるGutenbergエディタで記事を作成するのが効率的っぽいことがわかってくるのではないでしょうか?

3-2. ショートコードを使って表現する汎用ブロック

ショートコードを再利用

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

写真のように、WordPressテーマによってリスト表示をショートコードで挟むことで装飾ができることも多いと思います。

そして、たいていの場合使うショートコードってある程度候補が絞られてますよね?

記事作成でしょっちゅう使うショートコードを組み合わせて表現するものがあるとするならば、再利用ブロックにしておくと執筆効率が上がります☆

3-3. クラシックブロックでしかCSSデザインを反映させられない

クラシックブロックを再利用

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

WordPressを使ってブログを書く醍醐味は、カスタマイズによる表現の拡張性にあると思います。

検索エンジンで探せば必ずといって良いほど表現拡張カスタマイズ記事に出会います。

しかし、せっかくカスタマイズしたデザインがGutenbergエディタの通常ブロックでは反映されないことがあるんです。

そんな場合はクラシックブロックで試してみます。もしもうまくデザインが反映されたものが表示されたならば、それを再利用ブロックに登録すると毎回マウスとキーボードで操作する手間が省けます。

3-4. 吹き出し

吹き出しを表情ごとに

再利用ブロック登録しよう!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/08/takosyuke_magao-e1502630233775.jpg
けいしゅけ

もはや吹き出しでセリフをしゃべらせないWordPressブログってあんまりないですよね?

みなさん、愛着を持った吹き出しキャラクターをお持ちでしょう。

先ほどから繰り返しているので耳タコでしょうけれども、SANGO Gutenbergプラグインでは吹き出しブロックがエディタ内で表現することが可能になりました。キャラクターと吹き出しがそのままエディタ内で表示されるわけです。

ちなみに、Classic Editorでは不可能でしたから、多くの方がAddQuickタグ他何かしらプラグインを使ってショートコードを呼び出してライティングされていたことでしょう。

せっかくGutenbergエディタで吹き出しキャラとセリフを見ながらライティングできるのですから、吹き出しキャラを囲む枠線の色とセリフを囲む線の色、セリフの背景色を定めて再利用ブロックに登録しましょう!

ブロガーよ、

再利用ブロックを使いこなすのだ

ムーッチャ便利やで!!

4. Gutenbergエディタの幅を公開記事に合わせる

エディタの横幅を広げる

参考 グーテンベルクのエディタ画面 書きやすくしよう① | Gutenbergを使ってみたGutenbergを使ってみた

もはや、僕はSANGOユーザーとして、くまさんに足を向けて寝れません。

Gutenbergエディタの横幅は、リンクを貼った記事で紹介されていたものをそのまま実行しました。

子テーマのeditor-style.cssにコピペ

.wp-block {/*文字が書ける幅を広げる*/
    max-width: 780px;
}
div.editor-styles-wrapper p {/*文字のサイズを調整*/
    font-size: 107%;
}
https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2018/06/Takotyuke_Magao.png
タコちゅけ

すごいでちゅ!!

エディタの横幅が記事と同じになるだけで、より一層記事を書きながら公開イメージを掴みやすくなりましゅ☆

くまさん、本当に有難うございまちゅ☆

5. 吹き出しのイラスト部分を大きくするカスタマイズをしよう

Gutenbergエディタ、

吹き出しイラストが小さくね?

子テーマのeditor-style.cssにコピペ

/*--------------------------------------
 Gutenbergエディタ吹き出しサイズを大きく
 あと、位置調整とセリフ色指定
--------------------------------------*/
@media only screen and (min-width: 481px) {
  .sgb-block-say-avatar {
    width: 110px;
  }
  .sgb-block-say-text {
padding-left: 130px;
  }
}
.sgb-block-say {
    position: relative;
    width: 100%;
margin-bottom: 3.5em;
 top: 0px;
    min-height: 90px;
}
.has-sango-black-color {
    color: #333;
}
https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

やっぱり吹き出しのキャラクターが100px × 100px くらいの大きさで表示される方がしっくりくるわぁ~☆

6. 見出しデザインCSSがGutenbergエディタに反映されるようにした

見出しデザインは

必ず記事エディタ画面に

反映させよう!

コチラは前回の記事ですべての手順を書いていますので是非ともご覧ください☆

Gutenbergエディタの見出しをカスタマイズしよう!

【SANGO】Gutenbergエディタ記事作成画面で見出しデザインCSSを反映させる方法
https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

お疲れさまでした!!

以上ですべての作業は終了です!!

Gutenbergエディタの使い心地はデフォルトの状態から比べ物にならないほど向上していると思います!!

楽しくブログ記事を書き続けるためにも、少しだけ時間がかかる処理になりますがチャレンジしてみてくださいね🎵

最後に、Before ➤ After 画像でお別れです☆メッチャ変わったなぁ~

Gutenbergエディタをカスタマイズ

今回の記事はここまでや☆

最後まで読んでくださってホンマおおきにっ!!お時間を使って読んでくださったことに心から感謝申し上げます!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

この記事の感想をコメントしていただけるとメッチャうれしいです!!

ご意見&ご質問も遠慮なく書いてください☆皆さんとの対話を楽しみにしています☆

下のボタンを押すとコメント記入欄へジャンプできますよ~!!

ひとこと言うて行ったってや~

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2018/01/56896228914645f98625e06064579f7b.jpg
タコちゅけ

もしよければ、下のボタンを押してけいしゅけをフォローして欲しいでちゅ🍀

よろしくお願い致しましゅ~☆

Twitterでけいしゅけをフォロー

けいしゅけFacebookにいいね!

↓↓ひとこと書く↓↓|けいしゅけに記事の感想を教えてください☆