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

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

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

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

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

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

menくん

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

くま

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

カスタマイズのやりかた

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

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

ヨハネス・G

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

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

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

I tried using !

２カラムブロックを追加

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

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

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

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

menくん

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

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

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

高度な設定を行う場所

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

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

クラス名を追加する

段落ブロック

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

右カラムのブロック

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

menくん

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

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

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

style.cssにコードを追加

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

.img-huki {
    display: flex;
    align-items: center;
    position: relative;
}
.img-huki-p {
    border: 3px solid #f4f4f5;
    padding: 1em!important;/*JINのみimportant必須*/
    border-radius: 8px;
    margin: 0;/*COCOONのみ必須*/
}
.img-huki:before, .img-huki:after {
    position: absolute;
    content: "";
    border-style: solid;
    border-width: 17px 20px 17px 0;
    top: calc(50% - 34px);
}
.img-huki:before {
    border-color: transparent #f4f4f5 transparent transparent;
    left: -20px;
}
.img-huki:after {
    border-color: transparent #fff transparent transparent;
    left: -15px;
}
@media (max-width: 767px) {
.img-huki {
    margin-top: -1em!important;/*THE THORのみimportant必須*/
}
.img-huki:before, .img-huki:after {
    border-width: 0 17px 20px 17px;
    left: calc(50% - 34px);
}
.img-huki:before {
    border-color: transparent transparent #f4f4f5 transparent;
    top: -20px;
}
.img-huki:after {
    border-color: transparent transparent #fff transparent;
    top: -15px;
}}

menくん

めっちゃ短いw

くま

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

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

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

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

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

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

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

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

/*
２列画像吹き出し
*/
.img-huki-p {
    border: 3px solid #f4f4f5;
    padding: 1em;
    border-radius: 8px;
}

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

まとめ

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

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

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

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

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

menくん

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