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

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

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

セリフボックスはこちら

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

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

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

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

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

あとは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);
}

ちなみに

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

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

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

おわりに

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

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

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