WordPressテーマ「ストーク」・・・。
最高だけど、一つだけ「ふんぬおおおおおおおおおおおお!!」と叫びたくなることがありました。
それが・・・・・・
吹き出しアイコンが、スマホだと異常にちっさくなる!!!!!
ってことなんです。(2018/10/18時点)
今、「自分のサイトを上位表示させる方法」ってなシリーズを書いているのですが、この異常サイズのために吹き出しを使わずに会話風にしてみたんです。
まあ、それはそれでよかったんですけど、今度は改行が気に入らなくて、やっぱり吹き出しが使いたいなぁと。
しかも! 吹き出し枠線の色を変えている方がいらっしゃって、これはもうググるしかない!!と思い立ちました。
調べに調べ、心が折れそうになりながらもできた結果がこれ!!

はい。見事できました。
今、この画面をスマホで見ている方ならわかると思いますが、アイコン画像がちょうどいい感じになってませんか?
(直径5mmくらいの円の中に画像があったので、マジで直径3mmくらいしかなかったんです)
そのまま灰になるか、はげるかしそうだったので、私のように『ストーク』または『スワロー』を使っていて、吹き出しのアイコンが小さく表示されて困っている、または枠線の色を変えたい方に朗報です。
吹き出しをカスタマイズするcssコードを一挙大公開します!!
いよ! 太っ腹!! 誰がデブやねん!!
イメージはこう↓↓↓

- テスト用に投稿に吹き出しショートコードを打ち込み、プレビュー
- 上部にある「カスタマイズ」から「追加css」の項目を開く
- コピーしてきたコードを貼り付ける
- カラーコードや名前を変える
- プレビューで確認しながら気に入るまで作業を続け、「保存」する
以上です!! 作業項目としてはこれくらいしかない!!
では、例を見ながらちゃっちゃか進めましょう。レッツラゴー。
目次
吹き出しショートコード
1 |
[voice icon="画像のURL" name="名前" type="l"]ここにセリフ[/voice] |
ここら辺の詳しくは割愛します。
「画像が小さく表示されて困っているor枠線を変えたい」ということは、ショートコードを使えているということなので。
あとでもまた説明しますが、
「type=”l”」の部分を「type=”l ucon”」というように、“l”または”r”の後ろに「半角スペースとクラス名」を入力
します。
ここを入力しないと、普通の吹き出しになります。
アイコン画像を大きくしたい
超簡単です。
1 2 3 4 |
/* --- 吹き出し画像サイズ--- */ .voice .icon img { width: 110px; } |
を追加cssに入力するだけです。以上! 終わり!!
補足すると、この画像の幅がデフォルトで「%」で指定されているので(12%だったかな?)小さく表示されていました。
ですが、ピクセル(px)指定するとこの問題は解決されます。

枠線の色を変える
1)アイコンの枠の色だけを変える
くっきりアイコン枠

1 2 3 4 |
/* --- 吹き出しアイコン --- */ .voice.icondake .icon img { border-color: #915da3; /* 好きなカラーコード */ } |
フラットなアイコン枠

1 2 3 4 5 |
/* --- 吹き出しアイコン(フラット) --- */ .voice.icondake02 .icon img { background-color: #e8c59c; /* 好きなカラーコード */ border-color: #e8c59c; /* 好きなカラーコード */ } |
2)セリフ部分(吹き出し)の枠色を変える
くっきり枠

1 2 3 4 5 6 7 8 9 10 |
/* --- 吹き出し枠線 --- */ .voice.fukidasidake .voicecomment{ border-color: #00afcc; /* 好きなカラーコード */ } .voice.l.fukidasidake .voicecomment:before{ border-right-color:#00afcc; /* 好きなカラーコード-吹き出し三角部分- */ } .voice.r.fukidasidake .voicecomment:before{ border-left-color:#00afcc; /* 好きなカラーコード-吹き出し三角部分- */ } |
フラットな枠

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* --- 吹き出し枠線(フラット) --- */ .voice.fukidasidake02 .voicecomment{ background-color: #ec6d71; /* 好きなカラーコード。背景色 */ border-color: #ec6d71; /* 好きなカラーコード。枠線の色 */ } .voice.l.fukidasidake02 .voicecomment:before{ border-right-color: #ec6d71; /* 好きなカラーコード。枠線の色 */ } .voice.l.fukidasidake02 .voicecomment:after{ border-right-color: #ec6d71; /* 好きなカラーコード。背景色 */ } .voice.r.fukidasidake02 .voicecomment:before{ border-left-color: #ec6d71; /* 好きなカラーコード。枠線の色 */ } .voice.r.fukidasidake02 .voicecomment:after{ border-left-color: #ec6d71; /* 好きなカラーコード。背景色 */ } |

これらを組み合わせれば、こんなことができる!




これらのcssコードをカラーコードもそのままで公開します!
赤(くっきり×くっきり)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* --- 吹き出し赤(枠と背景色変更) --- */ .voice.aka .icon img { border-color: #e73562; background-color: #fff; } .voice.aka .voicecomment{ background-color: #fff; border-color: #e73562; } .voice.l.aka .voicecomment:before{ border-right-color: #e73562; } .voice.l.aka .voicecomment:after{ border-right-color: #fff; } .voice.r.aka .voicecomment:before{ border-left-color: #e73562; } .voice.r.aka .voicecomment:after{ border-left-color: #fff; } |
緑(フラット×フラット)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* --- 吹き出しアイコン緑 --- */ .voice.midori .icon img { background-color: #edfbd6; border-color: #edfbd6; } .voice.midori .voicecomment{ background-color: #edfbd6; border-color: #edfbd6; } .voice.l.midori .voicecomment:before{ border-right-color: #edfbd6; } .voice.l.midori .voicecomment:after{ border-right-color: #edfbd6; } .voice.r.midori .voicecomment:before{ border-left-color: #edfbd6; } .voice.r.midori .voicecomment:after{ border-left-color: #edfbd6; } |
黄色(くっきり×フラット+くっきり)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.voice.ki .icon img { border-color: #fcc800; background-color: #fff; } .voice.ki .voicecomment{ background-color: #fff799; border-color: #fcc800; } .voice.l.ao .voicecomment:before{ border-right-color: #fcc800; } .voice.l.ao .voicecomment:after{ border-right-color: #fff799; } .voice.r.ao .voicecomment:before{ border-left-color: #fcc800; } .voice.r.ao .voicecomment:after{ border-left-color: #fff799; } |
青(フラット+くっきり枠×くっきり)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* --- 吹き出しアイコン青 --- */ .voice.ao .icon img { background-color: #cdf2ff; border-color: #a0d8ef; } .voice.ao .voicecomment{ background-color: #fff; border-color: #a0d8ef; } .voice.l.ao .voicecomment:before{ border-right-color: #a0d8ef; } .voice.l.ao .voicecomment:after{ border-right-color: #fff; } .voice.r.ao .voicecomment:before{ border-left-color: #a0d8ef; } .voice.r.ao .voicecomment:after{ border-left-color: #fff; } |
ショートコードはこう入力する!
全ての「voice」コードには、名前(クラス分け)があります。
赤(くっきり×くっきり)の吹き出しでは、
となっています。
この「.aka」の部分が名前です。
なので、自分色の吹き出しでは、この「aka」の部分を任意で修正してください。
「橘右近」アイコンでは「ucon」とつけています。キャラクター名で分けてもいいですね。
ちなみに、右近の吹き出しではこのように入力しています。

↓↓↓
1 |
[voice icon="画像URL" name="橘右近" type="l ucon"]ハマると抜けられないカスタマイズw[/voice] |