Still not Gutenberg?

(アルさん用)SANGO専用!画像に吹き出しを追加する方法

こんな感じの画像プラス吹き出し!

ここに文字


今回のカスタマイズは、jsonファイルを使うよ

jsonファイルがわけ解んない人は、この記事を読んでね。

速攻でカスタマイズを終わらせるJSONインポート法!

jsonファイルをダウンロード

CSSのカスタマイズコード

.wp-block-column .wp-block-image {
    margin: 0;
}
.wp-block-column .sgb-box-simple {
    position: relative;
}
.wp-block-column .sgb-box-simple:before {
    position: absolute;
    content: "";
    border-style: solid;
    border-width: 13px 15px 13px 0;
    top: calc(50% - 13px);
    border-color: transparent #b2ebf2 transparent transparent;
    left: -13px;
}
.wp-block-column .sgb-box-simple:after {
    position: absolute;
    content: "";
    border-style: solid;
    border-width: 13px 15px 13px 0;
    top: calc(50% - 13px);
    border-color: transparent #fff transparent transparent;
    left: -10px;
}
@media (max-width: 767px) {
.wp-block-column .sgb-box-simple:before, .wp-block-column .sgb-box-simple:after {
    border-width: 0 17px 20px 17px;
    left: calc(50% - 17px);
}
.wp-block-column .sgb-box-simple:before {
    border-color: transparent transparent #b2ebf2 transparent;
    top: -18px;
}
.wp-block-column .sgb-box-simple:after {
    border-color: transparent transparent #fff transparent;
    top: -15px;
}}

コメントを残す

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