左に画像
ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。
右に画像
ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。
- 普通の吹き出しよりも見やすい
- 吹き出しよりもセリフを意識してみた
- 背景色のカラーを簡単に変更できる
使い勝手はすごく良いと思うよ
2カラムでも良い感じ！
Before
ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。
After
ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。
タイトルありでも！
Before
ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。
After
ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。ここにテキストを入力するよ。
カスタマイズは自己責任でやろう
自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。
見たい場所へジャンプ
カスタマイズするための
準備
グーテンベルクでの準備
下のボタンからダウンロードして、再利用ブロックにインポートするだけです。
左下に画像がでるやつ
右下に画像がでるやつ
参考
SANGOにもともとあるオリジナルボックスをカスタマイズしてます
クラシックエディタの場合
クラシックエディタの場合は、こちらのコードをアドクイックタグに登録してください。
|
1 2 3 4 5 |
<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> |
CSSコードの追加方法
おすすめは追加CSSからコードを追加する方法です。
はじめてカスタマイズする方は、こちらの記事を読んでくださいね。
| 追加方法 | 難しさ |
|---|---|
| 追加CSS | |
| テーマエディター | |
| FTPソフト |
複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。
カスタマイズに必要な
CSSコード
コメントありver
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/*-------------------------------------- セリフボックス（下の左右用） --------------------------------------*/ .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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/*-------------------------------------- セリフボックス（下の左右用） --------------------------------------*/ .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）では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。（決して自己満足ではありません）
もっとカスタマイズしたい人はこちらの記事を見てください。
