Still not Gutenberg?

2列で画像に吹き出しをプラスするカスタマイズをグーテンベルクでも使う方法(テーマ問わず)

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

今回はカスタマイズ記事です。カスタマイズは自己責任で行いましょう。

さてさて、こんな感じの画像+吹き出しを使いたくないですか?

PC表示
モバイル表示

実物はこちら

画像の説明なんかを書いたりするよね。いい感じに吹き出しがつくとおしゃれ。

このカスタマイズはグーテンベルクでも使うことができます。

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

くっっっっっっそ簡単にできます

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

SANGO・JIN・THE THOR・COCOONでも同じ方法でできたよ

カスタマイズのやりかた

クラシックエディタ

  • 既存のボックスを変更
  • HTMLを書く

グーテンベルク

  • 高度な設定
  • エディタの装飾も変更

今までの方法では、既存のボックスをカスタマイズしたり、HTMLを直接書いたりする必要がありました。

そんなめんどくさい事はグーテンベルクでは必要ありません!

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

高度な設定で「クラス名」をぶち込んでしまえばええんじゃよ!

何言ってるのかちんぷんかんぷんな方も、手順に沿ってやれば簡単にできます。

グーテンでカスタマイズするメリット
  1. 高度な設定からクラス名を簡単に追加できる
  2. 元のコードがキレイだからカスタマイズコードも短い
  3. HTMLコードを使わなくて済む
  4. 他のテーマでもほぼ同じカスタマイズが使える
  5. エディタ上の装飾も簡単に変更できる

こんな感じで、グーテンでカスタマイズするのはメリットだらけ!

I tried using !

2カラムブロックを追加

2カラムのブロックを追加

ブロックの追加からレイアウト要素カラムを選択します。

挿入されたブロックはデフォルトで2カラムになってますので、そのまま使用すればOKです。

左に画像、右に文字を追加

画像とテキストを追加

上の動画のように、左に画像、右にテキストを入れておきます。

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

ここまではいたって普通のやり方ですね

右のカラムと段落ブロックに高度な設定

はい、ここで高度な設定をしていきます。

高度な設定って?

高度な設定では「クラス名」を追加できます。クラス名とは、そのブロックの名前みたいなものです。ブロックに名前を付けておくことで、名指しでカスタマイズすることができちゃいます。

高度な設定を行う場所

高度な設定の場所

ブロックを選択している状態だと、左メニュー一番下に「高度な設定」が表示されます。

高度な設定を開いたら出てくる部分

クリックして開くと、クラス名を入力できる部分がでてきます。

クラス名を追加する

段落ブロック

段落ブロックのクラス名

文字を入力した段落ブロックには「img-huki-p」とクラス名を追加します。

右カラムのブロック

右カラムのブロックのクラス名

右カラムのブロックには「img-huki」とクラス名を追加します。

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

この右カラムのブロックを選択するのはちょっとテクニックがいるから、動画で見てみてね

右カラムブロックを選択する

右カラムをいきなり選択しようとすると、どこにあるのかわかりにくいです。

そこで、右カラムに入っている段落ブロックを選択したあとに「↑」を押すことで、カラムブロックを選択することができます。

style.cssにコードを追加

style.cssでも追加CSSでもどちらでも構いませんが、下記のコードを追加します。

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

めっちゃ短いw

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

テーマでちょっと違う部分もあるから、コメントを参考にしてください

よく使う場合は再利用ブロックに追加

再利用ブロックに追加しておけば、毎回、高度な設定をしなくても簡単に呼び出すことができます。

再利用ブロックに追加

こんな感じでカラムごと再利用ブロックに追加しておきましょう。

再利用ブロックの使い方はこちらで詳しく説明しています。

グーテンベルクのエディタ画面もカスタマイズ

エディタ画面

ぼくは、エディタ画面にもわかりやすく、同じ色の枠を追加しました。

グーテンベルクと紐付けしたeditor-style.cssに以下のコードを追加します。

これだけで、エディタ画面でもわかりやすくなります。

まとめ

なかなか書く機会が無くて言えませんでしたが、カスタマイズするならグーテンベルクは最高です。

高度な設定からの再利用ブロックの組み合わせは今までにない便利な方法です。

HTMLのコードも書かなくていいですし、カスタマイズのコードは短い。

しかも、エディタ画面を装飾できるのでプレビューも少なくなります。

最初らへんに出てきた比較ボックスも、エディタ上ではこんな感じです。

比較ボックスのエディタ画面
https://for-men.jp/Johannes-Gutenberg/wp-content/uploads/2019/06/huki-wa-i.png
menくん

エディタ上にコードが無いってのは想像以上に気持ちいですよ

コメントを残す

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