初心者がSANGOでGutenberg(新エディタ)を使うのに必要なプラグインまとめ

SANGOでGutenberg使ってみた

初めてのWordPress、SANGOを使って約3ヶ月経ちました、すずです。

始めたばかりの頃の私は、SANGOの素敵な機能を一つも使いこなすことができず、悩んでいました。

https://mimosa38.info/wp-content/uploads/2019/03/namida.jpg
2ヶ月前のすず

デザインが気に入って選んだSANGO。

操作も簡単って聞いたのに、どうして〜〜??

全ての原因はGutenbergと呼ばれる新エディタを使っているのに、必要なプラグインが一つも入っていないことでした!!!

悩みに悩んでいたことが、プラグインによって一気に解決!

WordPressを始めたばかりの方、SANGOを導入したばかりの方、新しいエディタに慣れておいて損はありませんよ!

このプラグインを入れて一緒に解決しましょう!

SANGOでGutenberg(新エディタ)を使うために必要なプラグインは4つ

初めてSANGOを使う方、初心者の方がSANGOの魅力を最大に引き出しつつ、新しいエディタGutenberg(グーテンベルグ)を快適に使うために必要なプラグインは全部で4つ!

  • 入れないと話にならない『SANGO Gutenberg』
  • SANGOの魅力の一つ!簡単装飾『Add Quick Tag』
  • マーカーが手軽にひける『Maker animation』
  • 目次を入れるの忘れないでね『Table of contents Plus』

この4つです!

もともとSANGOを使っていて、Gutenbergを試してみたい人は、次で説明するSANGO Gutenbergとマーカーアニメーションはチェックです!

聞いたことのないプラグインがあった方は、ぜひ参考にしていってね。

入れ忘れ注意!! SANGO Gutenberg

SANGO Gutenbergは絶対に忘れてはいけないプラグインです。

これを入れないと、SANGOでGutenbergは使えても、全くSANGOの魅力を引き出せません。

これを入れると、Gutenbergの編集画面に下の画像のものが表示できるようになります。

SANGO Gutenbergを導入すると、追加できるブロックが増える
SANGO Gutenbergを導入すると表示されるカスタムブロック

これを導入する意味を、真ん中の見出しを例に、画像で説明していきますね。

導入する前の追加できるブロックエディタはこんな感じです。

初期の状態のブロックエディタ

初期状態のブロックエディタ上部

初期の状態のブロックエディタの下部

初期の状態のブロックエディタの下部

初期状態ではみんなこの画面です。

そして、編集画面もプラグイン導入前はこんな感じです。

初期状態のGutenberg編集中の画面
初期状態のGutenberg編集中の画面

これが、SANGO Gutenbergを導入すると、こんな画面に変わります。

SANGO Gutenbergを入れた編集画面
SANGO Gutenbergを入れた編集画面

SANGOならではのフォントやデザインが反映されます。

https://mimosa38.info/wp-content/uploads/2019/03/niko.jpg
すず

SANGOのデザインや雰囲気が気に入って導入したから、編集画面からSANGOの魅力が反映されて、テンション上がったよ〜♪

さらに、SANGOのカスタムブロックも出現、それ以外にもボタンなど、SANGOの装飾が反映されているそうです。

見出しのスタイルが5種類から選べる
見出しのスタイルは5種類から選べて、色変更も簡単!

また、見出しのスタイルをこれ以外のスタイルに変えることも可能です。

▶︎SANGO Gutenbergで見出しやボタンを使う方法

全てはSANGO Gutenbergのおかげです!

興味が出てきたら、一度導入をオススメします。

プラグインなので、クラシックエディタに戻すことも難しくありません。

https://mimosa38.info/wp-content/uploads/2019/03/hohoemi.jpg
すず

これを機会に、新しいエディタに慣れるチャンスだよ!

AddQuicktagはGutenbergになっても使える

SANGOの魅力の一つといえば、数々のショートコードによる装飾ですよね!

https://mimosa38.info/wp-content/uploads/2019/03/niko.jpg
すず

これだけ選びたい放題で便利な装飾を、こんなに簡単に使えるなんて!

こんな風にできたらな、があっという間に叶う!

それがSANGOの魅力でもあります。

そして、その数々の便利なショートコードを活用するのに必要になってくるのがAddQuickTagです。

AddQuicktagのプラグインでの表示画像

これ、Gutenbergのブロックとしては出てこないのですが、使う方法はあります!

Gutenbergのブロックの一つにクラシックエディタを出せる
ブロック→フォーマット→クラシック

こうすると、新エディタGutenbergを使いながら、旧エディタ(クラシックエディタ)を使うことができます。

クラシックのボタンをポチッと押すと、こんなブロックが追加されます。

クラシックエディタがブロックとして追加される
真ん中の四角い枠で囲まれているのが、クラシックエディタのブロック

そして、左側のQuicktagsというところをクリックすると、たくさんのショートコードが!!

Quicktagsを開くとたくさんのショートコードが表示される。
SANGOの魅力!簡単に記事を装飾できる
https://mimosa38.info/wp-content/uploads/2019/03/hohoemi.jpg
すず

ショートコードって言うのは、いろんな枠やリンクボタンを表示させるのに難しいコード(CSS)を入力しなくても、呼び出して使える便利な機能だよ!

https://mimosa38.info/wp-content/uploads/2019/03/niko.jpg
すず

これだけたくさんのショートコードがあれば、初心者には十分!
SANGOのイメージともあってるから、安心して使えるね♪

SANGOでGutenbergにしたらマーカーが使えない!?そんなことはありません。

Gutenbergにすると、マーカーの機能がどこかへ行ってしまいます。

本当に。

悩みに悩んで、他のSANGOユーザーに相談しました。

https://mimosa38.info/wp-content/uploads/2019/03/Akohatena.jpg
A子

えぇ〜?
最初から表示されてるよ?(クラシックエディタだから

https://mimosa38.info/wp-content/uploads/2019/03/namida.jpg
すず

な、なんで私だけ表示されないんだろ〜(Gutenbergだから

も、もしかして見逃してるのかなぁ?

初期状態のGutenbergでの段落編集画面には太字や色を変える機能はあっても蛍光ペンはない
何度にらめっこしても出てこないマーカ装飾…

同じ時期にブログを始めたのに、すでに色々な機能を使いこなしている人たちを見ながら、呆然としたものです。

で、どうやってマーカー出すの???

そんなことでつまずいて悩み通した私も、今ではマーカー引きたい放題やり放題!

多くの方は上で説明しているAddQuickTagの方法と同じやり方で、旧エディタ(クラシックエディタ)ブロックを利用しているようです。

でも、それだとせっかく Gutenbergにしたのに、いつまでたってもクラシックエディタが付きまといます。

編集画面がスッキリ綺麗、入力して表示されたものが、ほとんどそのままブログでの表示画面になる。

それがGutenbergの素晴らしいところです!

Gutenbergのブロックエディタのままでも、スムーズにマーカを引けるプラグイン……あります!!!

そう、それが『Marker Animation』なのです!!!

Marker Animationのプラグインでの表示イメージ
思うままに蛍光ペンを引こう!

これを有効化すると……はい! この通り!

ブロック上部に出る装飾の中に、マーカーの表示が出る
マーカーアニメーションが出現!!
https://mimosa38.info/wp-content/uploads/2019/03/hohoemi.jpg
すず

これで、文章で注目してほしいところを簡単に蛍光ペンで目立たせることができるね

https://mimosa38.info/wp-content/uploads/2019/01/risu.jpg
りすず

詳しい設定の方法は、また別の記事で紹介するから待っててね!

Gutenbergにしても、目次のことは忘れないでね

他の人のブログを読んでいて、導入文の後に綺麗な見出しが挿入されているところ、見たことありませんか?

目次のプラグインを入れて、表示された時の画面
この記事でも、こんな目次が付いてますよね

SANGOでは、『Table of contents Plus』というプラグインを入れると、デフォルトで華やかに見えるようなスタイルを指定してくれています。

▶︎目次プラグイン「TOC+」の設定方法

これを入れれば、面倒に手打ちをしたりしなくても大丈夫!

しかも、SANGOの雰囲気にあったデザインで表示されるのでウキウキです。

編集中は表示されませんが、公開後には反映されているので、安心してくださいね♪

https://mimosa38.info/wp-content/uploads/2019/01/risu.jpg
りすず

ウィジェットの設定を使って、サイドバーに固定表示させることも可能だよ!

SANGOでGutenbergを使うのに最低限必要なプラグインは4つ

SANGOで Gutenberg(グーテンベルク)を使うために必要なプラグインを紹介してきました。

特にSANGO Gutenbergは、導入しないとSANGOの良さを引き出せないので、必須のプラグインです。

WordPressを始めたばかりの人は、臆せずぜひGutenbergにチャレンジしてみてください!

Gutenberg(新エディタ)に切り替わったばかりなので、不具合もありますが、これらのプラグインを入れさえすれば、初心者でも直感的に操作ができる、素晴らしいエディタです。

新しい機能に、慣れておいて損はないはず!

https://mimosa38.info/wp-content/uploads/2019/03/niko.jpg
すず

これを機会に、ぜひチャレンジしてみてね!

2 COMMENTS

orange-mama

はじめまして!ブログ始めようと、思考錯誤しているところです。
まさに、この問題に突き当たりました。参考にしてるブログと投稿画面違う!なぜー!?!?新エディタ!!!

返信する
すずんぬ

orange-mamaさんはじめまして。読んでいただきありがとうございます!
2018年の12月頃に、新しい編集画面である【Gutenberg】がリリース?され、多くのテーマが公式な対応しておらず、またユーザーも今まで使っていた旧エディタ(クラシックエディタ)の方が使いやすい・今までのノウハウが活かせるとして、新しいエディタを勧める人はまだまだ少ないのです。。
どちらを使うかは、orange-mamaさんの好みにもよりますが、私はこれから始める人には【Gutenberg】を勧めちゃいます!特にSANGOは公式でサルワカさんが対応してくださっているので、とてもいいですよ〜!

返信する

すずんぬ へ返信する コメントをキャンセル

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください