画像に吹き出しを追加するカスタマイズ！レスポンシブ対応

PC表示

わたしの顔はこんなにも爽やかではありません。
※ 吹き出しの内容に意味はありません。

MOBILE表示

吹き出しを自作する準備

BOXのショートコードを追加

こちらのバビさんの追加方法を参考に吹き出し用のボックスを作成します。

今回使う、吹き出し用（オリジナル）のショートコードはこちらです。

  
★文章★

上のショートコードを更に2列用のショートコードと合体させます。

★画像★
  
★文章★

このコードをAddQuicktag（プラグイン）に登録しておけば、いつでも簡単に使えるようになります

あとはCSSの方でデザインを整えてあげるだけやね

３つのコード追加方法

カスタマイズのコード

コメントあり

.hukibox {/*オリジナルボックスの設定*/
    padding: 1em;/*内部の余白　上下左右*/
    position: relative;/*このボックスを基準点にする*/
    border: solid 3px #eee;/*枠線*/
    border-radius: 9px;/*角丸*/
}
.hukibox:before , .hukibox:after {/*疑似要素の共通部分*/
    content: '';/*おきまりの表現*/
    position: absolute;/*自由に動けるように*/
    top: 32%;/*上からの位置*/
    border: 18px solid transparent;/*枠線の設定*/
}
.hukibox:before {/*疑似要素（前）*/
    left: -39px;/*左からの位置*/
    border-right: 20px solid #eee;/*枠線（右）*/
}
.hukibox:after {/*疑似要素（後）*/
    left: -34px;/*左からの位置*/
    border-right: 20px solid #fff;/*枠線（右）*/
}
@media screen and (max-width: 480px){/*最大480pxまで（スマホ表示）*/
.hukibox:before , .hukibox:after {/*疑似要素共通部分*/
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    left: 40%;
}
.hukibox:before {
    border-bottom: 20px solid #eee;
    top: -40px;
}
.hukibox:after {
    border-bottom: 20px solid white;
    top: -36px;
}}
@media only screen and (min-width: 481px){/*最小481pxまで（PC表示）*/
.shtb2.tbrsp .cell:last-of-type {/*2列用の最後のセル*/
    vertical-align: middle;/*縦方向の位置を中心にする*/
}}

コメントなし

.hukibox {
    padding: 1em;
    position: relative;
    border: solid 3px #eee;
    border-radius: 9px;
}
.hukibox:before , .hukibox:after {
    content: '';
    position: absolute;
    top: 32%;
    border: 18px solid transparent;
}
.hukibox:before {
    left: -39px;
    border-right: 20px solid #eee;
}
.hukibox:after {
    left: -34px;
    border-right: 20px solid #fff;
}
@media screen and (max-width: 480px){
.hukibox:before , .hukibox:after {
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    left: 40%;
}
.hukibox:before {
    border-bottom: 20px solid #eee;
    top: -40px;
}
.hukibox:after {
    border-bottom: 20px solid white;
    top: -36px;
}}
@media only screen and (min-width: 481px){
.shtb2.tbrsp .cell:last-of-type {
    vertical-align: middle;
}}

カスタマイズがうまくいったか確認

まとめ・雑談

このカスタマイズはサルワカさんのをパク…参考にしたんだよ

パク…参考にしたんだねｗｗ

やっぱり画像に吹き出しをつけるといい感じになるからさ

わかりやすいし、見やすいよね