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



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

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

それが・・・・・・

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

ってことなんです。

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

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

橘右近
うひゃほおおおおおおおおおおおおぉぉおおっい!!

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

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

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

 

イメージはこう↓↓↓

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

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

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

ファイルの変更などは自己責任でお願いします

 

吹き出しショートコード

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

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

「type=”l”」の部分を「type=”l ●●●”」というように、“l”または”r”の後ろに「半角スペースと名前」を入力

します。

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

 

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

超簡単です。

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

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

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

 

枠線の色を変える

1)アイコンの枠の色だけを変える

●くっきりアイコン枠

橘右近
濃い色の方が映えると思うよ!
 

●フラットなアイコン枠

橘右近
こっちは淡い色の方がいいかな?
 

2)セリフ部分(吹き出し)の枠色を変える

●くっきり枠

橘右近
グレーにしたらあまり変わらないよねw
 

●フラットな枠

橘右近
濃い色なら、文字色変えないとだね!
こんな感じです!

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

 

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

音子
や……やっとできた……私にも、私にもできたあああぁぁああぁあっぁああ!!!
橘右近
うんうん、よかったね
藤枝くん
う、うんこカブってる……
瀬戸
あはははは。趣味かな?

 

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

赤(くっきり×くっきり)

 

緑(フラット×フラット)

 

黄色(くっきり×フラット)

 

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

 

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

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

.voice.aka

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

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

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

橘右近
ハマると抜けられないカスタマイズw

↓↓↓

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

 




橘右近をシェアで応援!!

ご感想・コメント、ぜひお願いします!



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です