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

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

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

それが・・・・・・

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

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

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

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

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

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

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

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

イメージはこう↓↓↓

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

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

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

吹き出しショートコード

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

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

します。

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

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

超簡単です。

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

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

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

枠線の色を変える

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

くっきりアイコン枠

濃い色の方が映えると思うよ！

フラットなアイコン枠

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

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

くっきり枠

ストークの場合は吹き出し部分（三角）も色の指定をします！ スワローはナシで大丈夫です

フラットな枠

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

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

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

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

うんうん、よかったね

う、うんこカブってる……

あはははは。趣味かな？

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

赤（くっきり×くっきり）

緑（フラット×フラット）

黄色（くっきり×フラット+くっきり）

青（フラット+くっきり枠×くっきり）

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

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

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

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

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

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

↓↓↓