ボックスにちょこんと画像をプラスするかわいいカスタマイズ

左に画像

ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。

右に画像

ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。

ココがポイント！

普通の吹き出しよりも見やすい
吹き出しよりもセリフを意識してみた
背景色のカラーを簡単に変更できる

使い勝手はすごく良いと思うよ

2カラムでも良い感じ！

Before

ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。

After

ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。

タイトルありでも！

Before

ぼくはこう思う！

ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。

After

くまはこう思う！

ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。

カスタマイズは自己責任でやろう

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

カスタマイズは自己責任。ぼくはこんな風に思っています。

見たい場所へジャンプ

1 カスタマイズするための準備
2 カスタマイズに必要なCSSコード
- 2.1 コメントありver
- 2.2 コメントなしver
3 うまくできたか確認
4 くまからのお礼

カスタマイズするための
準備

目次へ戻る

グーテンベルクでの準備

下のボタンからダウンロードして、再利用ブロックにインポートするだけです。

左下に画像がでるやつ

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

右下に画像がでるやつ

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

参考

jsonファイルの使い方

SANGOにもともとあるオリジナルボックスをカスタマイズしてます

クラシックエディタの場合

クラシックエディタの場合は、こちらのコードをアドクイックタグに登録してください。

<div class="left-bottom-img">
<div class="wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--no-border">
<div class="sgb-box-simple__body" style="background-color:#f3f3f3">
<p>★テキスト★</p>
</div></div></div>

</div></div></div>

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

ブログのカスタマイズを加速させる「追加CSS」の使い方

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«åã¯ kopinosikata.png ã§ã

コメントありver

/*--------------------------------------
  セリフボックス（下の左右用）
--------------------------------------*/
.left-bottom-img, .right-bottom-img {/*ボックス全体*/
    position: relative;/*基準に設定*/
}
.left-bottom-img .sgb-box-simple, .right-bottom-img .sgb-box-simple {/*SANGOのオリジナルボックス*/
    margin: 2em 0;/*外側上下の余白*/
}
.left-bottom-img .sgb-box-simple:after, .right-bottom-img .sgb-box-simple:after {/*画像部分*/
    content: "";/*お決まりの表現ですね*/
    position: absolute;/*基準を元に自由に動かせるように*/
    display: inline-block;/*高さと幅を設定できるように*/
    width: 50px;/*幅*/
    height: 50px;/*高さ*/
    border-radius: 50%;/*角丸*/
    background-size: contain;/*画像をぴったり表示*/
    bottom: -25px;/*下からの位置*/
    box-sizing: border-box;/*枠線の太さも含める*/
}
.left-bottom-img .sgb-box-simple:after {/*左下の画像*/
    left: -10px;/*左からの位置*/
    background-image: url(★左下の画像★);/*左下の画像*/
    transform: rotate(-10deg);/*画像を斜めに*/
    border: 2px solid #ccc;/*★★★枠線★★★*/
}
.right-bottom-img .sgb-box-simple:after {/*右下の画像*/
    right: -10px;/*右からの位置*/
    background-image: url(★右下の画像★);/*右下の画像*/
    transform: rotate(10deg);/*画像を斜めに*/
    border: 2px solid #b17f4a;/*★★★枠線★★★*/
}
.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {/*ボックスのテキスト部分*/
    padding: 1em 1.5em;/*内側の余白*/
}
@media only screen and (max-width: 500px){/*スマホ表示の設定*/
.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {/*ボックスのテキスト部分*/
    padding: 1em 1.1em;/*内側の余白*/
}}

/*--------------------------------------

セリフボックス（下の左右用）

--------------------------------------*/

.left-bottom-img, .right-bottom-img {/*ボックス全体*/

position: relative;/*基準に設定*/

}

.left-bottom-img .sgb-box-simple, .right-bottom-img .sgb-box-simple {/*SANGOのオリジナルボックス*/

margin: 2em 0;/*外側上下の余白*/

}

.left-bottom-img .sgb-box-simple:after, .right-bottom-img .sgb-box-simple:after {/*画像部分*/

content: "";/*お決まりの表現ですね*/

position: absolute;/*基準を元に自由に動かせるように*/

display: inline-block;/*高さと幅を設定できるように*/

width: 50px;/*幅*/

height: 50px;/*高さ*/

border-radius: 50%;/*角丸*/

background-size: contain;/*画像をぴったり表示*/

bottom: -25px;/*下からの位置*/

box-sizing: border-box;/*枠線の太さも含める*/

}

.left-bottom-img .sgb-box-simple:after {/*左下の画像*/

left: -10px;/*左からの位置*/

background-image: url(★左下の画像★);/*左下の画像*/

transform: rotate(-10deg);/*画像を斜めに*/

border: 2px solid #ccc;/*★★★枠線★★★*/

}

.right-bottom-img .sgb-box-simple:after {/*右下の画像*/

right: -10px;/*右からの位置*/

background-image: url(★右下の画像★);/*右下の画像*/

transform: rotate(10deg);/*画像を斜めに*/

border: 2px solid #b17f4a;/*★★★枠線★★★*/

}

.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {/*ボックスのテキスト部分*/

padding: 1em 1.5em;/*内側の余白*/

}

@media only screen and (max-width: 500px){/*スマホ表示の設定*/

.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {/*ボックスのテキスト部分*/

padding: 1em 1.1em;/*内側の余白*/

}}

コメントなしver

/*--------------------------------------
  セリフボックス（下の左右用）
--------------------------------------*/
.left-bottom-img, .right-bottom-img {
    position: relative;
}
.left-bottom-img .sgb-box-simple, .right-bottom-img .sgb-box-simple {
    margin: 2em 0;
}
.left-bottom-img .sgb-box-simple:after, .right-bottom-img .sgb-box-simple:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: contain;
    bottom: -25px;
    box-sizing: border-box;
}
.left-bottom-img .sgb-box-simple:after {
    left: -10px;
    background-image: url(https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png);
    transform: rotate(-10deg);
    border: 2px solid #ccc;
}
.right-bottom-img .sgb-box-simple:after {
    right: -10px;
    background-image: url(https://for-men.jp/wp-content/uploads/2018/08/huki-kuma1.png);
    transform: rotate(10deg);
    border: 2px solid #b17f4a;
}
.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {
    padding: 1em 1.5em;
}
@media only screen and (max-width: 500px){
.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {
    padding: 1em 1.1em;
}}

/*--------------------------------------

セリフボックス（下の左右用）

--------------------------------------*/

.left-bottom-img, .right-bottom-img {

position: relative;

}

.left-bottom-img .sgb-box-simple, .right-bottom-img .sgb-box-simple {

margin: 2em 0;

}

.left-bottom-img .sgb-box-simple:after, .right-bottom-img .sgb-box-simple:after {

content: "";

position: absolute;

display: inline-block;

width: 50px;

height: 50px;

border-radius: 50%;

background-size: contain;

bottom: -25px;

box-sizing: border-box;

}

.left-bottom-img .sgb-box-simple:after {

left: -10px;

background-image: url(https://for-men.jp/wp-content/uploads/2018/08/huki-kirakira.png);

transform: rotate(-10deg);

border: 2px solid #ccc;

}

.right-bottom-img .sgb-box-simple:after {

right: -10px;

background-image: url(https://for-men.jp/wp-content/uploads/2018/08/huki-kuma1.png);

transform: rotate(10deg);

border: 2px solid #b17f4a;

}

.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {

padding: 1em 1.5em;

}

@media only screen and (max-width: 500px){

.left-bottom-img .sgb-box-simple__body, .right-bottom-img .sgb-box-simple__body {

padding: 1em 1.1em;

}}

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください。

確認方法
「Ctrl」+「F5」（キャッシュ削除）

カスタマイズコードを追加CSS（またはテーマエディタ）に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

くまからのお礼

目次へ戻る

本ブログ（for men）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～

カスタマイズするための準備

グーテンベルクでの準備

クラシックエディタの場合

CSSコードの追加方法

カスタマイズに必要なCSSコード

コメントありver

コメントなしver

うまくできたか確認

くまからのお礼

コメントを残す コメントをキャンセル

カスタマイズするための
準備

カスタマイズに必要な
CSSコード

うまくできたか
確認

コメントを残すコメントをキャンセル