「ストーク」の吹き出しをカスタマイズする! 枠線カラーと画像の大きさを変える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

↓↓↓

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

 




Protect Characters―アザナカミ―|season1|目次

■第1話 謎の招待状
SCENE1:ざわつく心 / SCENE2:アクシデント / SCENE3:恐怖の始まり / SCENE4:出会い / SCENE5:飛行機ごっこ / SCENE6:記憶、力の暴発

■第2話 魄と朧と鬼と人形リーズ
SCENE7:意外な真実 / SCENE8:準備 / SCENE9:興味 / SCENE10:リーズという存在 / SCENE11:賭け / SCENE12:秘密

■第3話 鬼が消えた日
SCENE13:出発前 / SCENE14:出迎えた者は? / SCENE15:かわいい天使 / SCENE16:未知なる体験 / SCENE17:流天vs字守 / SCENE18:鬼の血



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

注意

特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。

この小説はリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。

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

2 件のコメント

  • はじめまして
    吹き出しの背景色を変える方法が分からず、ずいぶんと時間が掛かってしまいました。結局はダメでしたが・・・。
    ここにたどり着き、変える方法が分かりました。
    ありがとうございました。

  • コメントを残す

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

    ABOUTこの記事をかいた人

    役者経験を活かし、自分を見つめることで人生を豊かにさせる方法を伝えるヒューマンディレクター。 「生きる」と「愛」をテーマにした小説を書くインディーズ作家でもある。 webデザインで色んな人のビジネスに関わり、自分の世界観を広げ、子供たちが楽しくビジネスを学ぶ学校を作るのが夢。