JIN

JINのボックスにアイコンをプラスするカスタマイズ【グーテンベルク】

グーテンベルクで書いています。

この記事から、記事内で使用するカスタマイズはすべてグーテンベルクでカスタマイズしていきます。

menくん

これからはグーテンでやっていくね

ずっと先までカスタマイズを使って欲しいので、クラシックエディタでのカスタマイズではなく、グーテンベルクでカスタマイズしていきます。

セリフボックスはこちら

左下にアイコンがでるよ

右下にもアイコンが出るよ

ボックスの下にアイコンがちょこんとプラスするカスタマイズです。

グーテンベルクならこんなカスタマイズがめちゃ簡単にできちゃいます。

menくん

グーテンならめっちゃ簡単だよ

jsonファイルをインポートしてね

下のjsonファイルをダウンロードして、再利用ブロックにインポートしてください。(所要時間:3分)

クリックするとjsonファイルのダウンロードがはじまります。zipファイルでダウンロードしますので、解凍してからインポートしてくださいね。

え?なにjsonファイルって?って言う方はこちらの記事を読んでくださいね。jsonファイルについて

あとはCSSを追加するだけ

こちらのコードを追加CSSか子テーマのstyle.cssにぶち込んでください。(所要時間:30秒)

ただし、画像URLの部分には自分の画像のURLを入れてくださいね。

.s-box, .s-box-right {
    position: relative;
}
.s-box:after, .s-box-right:after {
    content: "";
    position: absolute;
    display: inline-block;
    height: 50px;
    width: 50px;
    background-size: contain;
    border-radius: 50%;
    bottom: -25px;
    box-shadow: 0px 1px 3px rgba(0,0,0,.18);
}
.s-box:after {
    background-image: url(★画像URL★);
    left: -10px;
    transform: rotate(-10deg);
}
.s-box-right:after {
    background-image: url(★画像URL★);
    right: -10px;
    transform: rotate(10deg);
}
menくん

短すぎワロタ

ちなみに

グーテンベルクにはJINのオリジナルボックスがあります。

その中であれば、ほとんどセリフボックスが適用できちゃうので、応用が効きますね。

細枠背景色ボックスもいけちゃう!

太枠背景色ボックスでもいけちゃう!

できないボックスもありますが、シンプルなボックスならほぼほぼいけちゃいます。

おわりに

グーテンベルクではじめてJINのカスタマイズをしました。

やっぱり、グーテンだとカスタマイズが簡単ですね。

さらに再利用ブロックを利用すれば、カスタマイズを使いまわしできるので最高ですね。

menくん

正直、今までのカスタマイズとはちょっと違う部分があるので、わからなかったら頑張りましょう。

関連記事