「ストーク」の吹き出しをカスタマイズ！ 枠線カラーと画像の大きさを変えるcssコードを一挙大公開！！

WordPressテーマ「ストーク」・・・。

最高だけど、一つだけ「ふんぬおおおおおおおおおおおお！！」と叫びたくなることがありました。

それが・・・・・・

吹き出しアイコンが、スマホだと異常にちっさくなる！！！！！

ってことなんです。（2018/10/18時点）

今、「自分のサイトを上位表示させる方法」ってなシリーズを書いているのですが、この異常サイズのために吹き出しを使わずに会話風にしてみたんです。
まあ、それはそれでよかったんですけど、今度は改行が気に入らなくて、やっぱり吹き出しが使いたいなぁと。
しかも！　吹き出し枠線の色を変えている方がいらっしゃって、これはもうググるしかない！！と思い立ちました。

調べに調べ、心が折れそうになりながらもできた結果がこれ！！

うひゃほおおおおおおおおおおおおぉぉおおっい！！

はい。見事できました。
今、この画面をスマホで見ている方ならわかると思いますが、アイコン画像がちょうどいい感じになってませんか？
（直径5mmくらいの円の中に画像があったので、マジで直径3mmくらいしかなかったんです）

そのまま灰になるか、はげるかしそうだったので、私のように『ストーク』または『スワロー』を使っていて、吹き出しのアイコンが小さく表示されて困っている、または枠線の色を変えたい方に朗報です。

吹き出しをカスタマイズするcssコードを一挙大公開します！！
いよ！　太っ腹！！　誰がデブやねん！！

イメージはこう↓↓↓

1. テスト用に投稿に吹き出しショートコードを打ち込み、プレビュー
2. 上部にある「カスタマイズ」から「追加css」の項目を開く
3. コピーしてきたコードを貼り付ける
4. カラーコードや名前を変える
5. プレビューで確認しながら気に入るまで作業を続け、「保存」する

以上です！！　作業項目としてはこれくらいしかない！！

では、例を見ながらちゃっちゃか進めましょう。レッツラゴー。

吹き出しショートコード

[voice icon="画像のURL" name="名前" type="l"]ここにセリフ[/voice]

ここら辺の詳しくは割愛します。
「画像が小さく表示されて困っているor枠線を変えたい」ということは、ショートコードを使えているということなので。

あとでもまた説明しますが、

します。

ここを入力しないと、普通の吹き出しになります。

アイコン画像を大きくしたい

超簡単です。

/* --- 吹き出し画像サイズ--- */
.voice .icon img {
 width: 110px;
 }

を追加cssに入力するだけです。以上！　終わり！！

補足すると、この画像の幅がデフォルトで「％」で指定されているので（12%だったかな？）小さく表示されていました。
ですが、ピクセル（px）指定するとこの問題は解決されます。

私は「110px」としましたが、数字はお好みで変えてください！

枠線の色を変える

１）アイコンの枠の色だけを変える

くっきりアイコン枠

濃い色の方が映えますね^^

/* --- 吹き出しアイコン --- */
.voice.icondake .icon img { 
border-color: #f9ca5c; /* 好きなカラーコード */
 }

フラットなアイコン枠

こっちは淡い色の方がいいかな？

/* --- 吹き出しアイコン（フラット） --- */
.voice.icondake02 .icon img { 
background-color: #ece9e8; /* 好きなカラーコード */
border-color: #ece9e8; /* 好きなカラーコード */
 }

２）セリフ部分（吹き出し）の枠色を変える

くっきり枠

ストークの場合は吹き出し部分（三角）も色の指定をします！ スワローはナシで大丈夫です。
なお、STORK19も「before」「after」を指定しなくていいようになっています。

/* --- 吹き出し枠線 --- */
.voice.fukidasidake .voicecomment{ 
border-color: #f9ca5c; /* 好きなカラーコード */
 }
.voice.l.fukidasidake .voicecomment:before{ 
border-right-color: #f9ca5c; /* 好きなカラーコード-吹き出し三角部分- */
 }
.voice.r.fukidasidake .voicecomment:before{ 
border-left-color: #f9ca5c; /* 好きなカラーコード-吹き出し三角部分- */
 }

フラットな枠

濃い色なら、文字色変えないとですね！
投稿画面で変更するか、cssコードに「color: #ffffff;」とかいておいて下さい

/* --- 吹き出し枠線（フラット） --- */
.voice.fukidasidake02 .voicecomment{ 
background-color: #ece9e8; /* 好きなカラーコード。背景色 */
border-color: #ece9e8; /* 好きなカラーコード。枠線の色 */
 }
.voice.l.fukidasidake02 .voicecomment:before{ 
border-right-color: #ece9e8; /* 好きなカラーコード。枠線の色 */
 }
.voice.l.fukidasidake02 .voicecomment:after{ 
border-right-color: #ece9e8; /* 好きなカラーコード。背景色 */
 }
.voice.r.fukidasidake02 .voicecomment:before{ 
border-left-color: #ece9e8; /* 好きなカラーコード。枠線の色 */
 }
.voice.r.fukidasidake02 .voicecomment:after{ 
border-left-color: #ece9e8; /* 好きなカラーコード。背景色 */
 }

こんな感じです！

フラットにしたい時は、全て同じカラーコードにして下さいね

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

や……やっとできた……私にも、私にもできたあああぁぁああぁあっぁああ！！！

うんうん、よかったね

まあ、僕は秒で出来たけどね～

音子ちゃんにそんなこと言うなんて……お前、勇者だな

これらのcssコードをカラーコードもそのままで公開します！

くっきり×くっきり

/* --- 吹き出しくっきり（枠と背景色変更） --- */
.voice.kuku .icon img {
border-color: #f9ca5c;
background-color: #fff;
}
.voice.kuku .voicecomment{ 
background-color: #fff;
border-color: #f9ca5c;
 }
.voice.l.kuku .voicecomment:before{ 
border-right-color: #f9ca5c;
 }
.voice.l.kuku .voicecomment:after{ 
border-right-color: #f9ca5c; /* ここをコンテンツ背景と同じ色にするとただの枠になります。削除してもOKです */
 }
.voice.r.kuku .voicecomment:before{ 
border-left-color: #f9ca5c;
 }
.voice.r.kuku .voicecomment:after{ 
border-left-color: #f9ca5c;
 }

フラット×フラット

/* --- 吹き出しアイコンフラット --- */
.voice.fufu .icon img { 
background-color: #ece9e8;
border-color: #ece9e8;
 }
.voice.fufu .voicecomment{ 
background-color: #ece9e8;
border-color: #ece9e8;
 }
.voice.l.fufu .voicecomment:before{ 
border-right-color: #ece9e8;
 }
.voice.l.fufu .voicecomment:after{ 
border-right-color: #ece9e8;
 }
.voice.r.fufu .voicecomment:before{ 
border-left-color: #ece9e8;
 }
.voice.r.fufu .voicecomment:after{ 
border-left-color: #ece9e8;
 }

くっきり×フラット

/* --- 吹き出しアイコンくっきりフラット --- */
.voice.kufu .icon img { 
border-color: #5df5e5;
background-color: #fff;
}
.voice.kufu .voicecomment{ 
background-color: #e5fff9;
border-color: #5df5e5;
 }
.voice.l.kufu .voicecomment:before{ 
border-right-color: #5df5e5;
 }
.voice.l.kufu .voicecomment:after{ 
border-right-color: #5df5e5;
 }
.voice.r.kufu .voicecomment:before{ 
border-left-color: #5df5e5;
 }
.voice.r.kufu .voicecomment:after{ 
border-left-color: #5df5e5;
 }

フラット×くっきり(+フラット)

/* --- 吹き出しアイコンフラットくっきり --- */
.voice.fuku .icon img { 
background-color: #ece9e8;
border-color: #ece9e8;
 }
.voice.fuku .voicecomment{ 
background-color: #ece9e8;
border-color: #b8b5b4;
 }
.voice.l.fuku .voicecomment:before{ 
border-right-color: #b8b5b4;
 }
.voice.l.fuku .voicecomment:after{ 
border-right-color: #b8b5b4;
 }
.voice.r.fuku .voicecomment:before{ 
border-left-color: #b8b5b4;
 }
.voice.r.fuku .voicecomment:after{ 
border-left-color: #b8b5b4;
 }

ショートコードはこう入力する！

全ての「voice」コードには、名前（クラス分け）があります。
「くっきり×くっきり」の吹き出しでは、

となっています。
この「.kuku」の部分が名前です。

なので、自分色の吹き出しでは、この「kuku」の部分を任意で修正してください。
「橘右近」アイコンでは「ucon」とつけています。キャラクター名で分けてもいいですね。

ちなみに、右近の吹き出しではこのように入力しています。

ハマると抜けられないカスタマイズｗ

↓↓↓

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

ではでは、お疲れさまでした！