Still not Gutenberg?

SANGOのボックスをグーテンでも利用するおしゃれな方法

※この記事はグーテンベルクで書いています。

グーテンベルクにはSANGOのオリジナルボックスが追加されています。

SANGOカスタムブロック
https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

タイトル付ボックスと言うのがグーテンベルクで使うSANGOのオリジナルボックスですね

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/yohanesu2.png
ヨハネス・G

ヨホホ、実はクラシックエディタで使ってたSANGOのボックスも使えるんじゃよ

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-kirakira.png
menくん

なんやて!それはいいね!

SANGOの公式サイトで紹介してあるこんなボックスたちも簡単に利用できます。

SANGOのボックスたち

BOX2

BOX3

BOX4

BOX5

などなど、このボックスたちもグーテンで活躍できます!

SANGOのボックスって?

SANGOのボックスは30個以上種類があります。公式サイトで一覧になっているので、気に入ったボックスをグーテンでも使えるようにしておきましょう。ただし、タイトル付のボックスはどうやるのか分かりませんw

使い方は簡単、高度な設定でクラスを使い

流れとしてはこんな感じですね

以前のボックスを利用する流れ
ながれ
  1. まずは普通のブロックに文字を書く
  2. 高度な設定でクラス名を追加してあげる
  3. よく使うのは再利用ブロックに入れる
https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

クラス名はボックスの番号なのがほとんどです

ブロックに文字を書く

ブロックに文字を入力

普通に文字を書いていきます。

高度な設定でクラス名を追加

高度な設定

ブロックを選択している状態だと右のサイドバーの一番下に高度な設定という項目があります。

クラス名の記入例

ここにクラス名をぶちこむと、あら不思議、以前のBOXデザインに変更されます。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/yohanesu2.png
ヨハネス・G

隠し機能みたいでおもしろいじゃろ

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-talk.png
menくん

そだね。ただ、いつかは公式がなんらかの形で対応しそうだよね

よく使うボックスは再利用ブロックに登録

再利用ブロックはアドクイックタグみたいに利用できるやつです。

こちらの記事で詳しく書いています。

再利用ブロックはグーテンベルクがアップデートするたびに使いやすくなっていくと思います。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-niya.png
menくん

再利用ブロックはよく使うから絶対覚えてくれよな!

まとめ

今回は高度な設定を使ったSANGOのボックス利用を紹介しました。

ちなみに

この高度な設定を応用すれば、めちゃくちゃ簡単にカスタマイズをすることができます。

https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-kuma3.png
くまさん

その話は長くなりそうなので、また別の機会にやな

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です