Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

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

自分で吹き出しを作ってみる


Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

PC表示

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

MOBILE表示

スマホ表示

 

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

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

吹き出しを自作する準備

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

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

参考 【SANGO】ボックスのショートコードを増やす方法!CSSサンプルも紹介バビ論

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

  
★文章★

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

★画像★
★文章★
MENくん
このコードをAddQuicktag(プラグイン)に登録しておけば、いつでも簡単に使えるようになります
くま3号
あとはCSSの方でデザインを整えてあげるだけやね

3つのコード追加方法

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

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加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;
}}

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

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

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

まとめ・雑談

SANGOで吹き出しボックスを作るまとめ

MENくん
このカスタマイズはサルワカさんのをパク…参考にしたんだよ
くま3号
パク…参考にしたんだねww
MENくん
やっぱり画像に吹き出しをつけるといい感じになるからさ
くま3号
わかりやすいし、見やすいよね