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

↓↓↓

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

 







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

おススメは「エックスサーバー

アクセスが早いので読者さんのストレスを軽減! 離脱を防げる!
安心のSSL化が無料
大量アクセスでもダウンしない! ちゃんと表示される!



ワードプレステーマなら「ストーク

初心者に優しい設定で、すぐに執筆にとりかかれる!
カスタマイズ方法がわからなくてもキレイなデザイン!
何もしなくても自動的にスマホ対応!!



3 件のコメント

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

    • はじめまして!
      お役に立てたようで、本当によかったです。
      調べても調べてもうまくいかないとへこみますよね……。私もそういう経験があるので、お気持ちがわかります。
      メッセージありがとうございます!
      私も励みになりました^^

  • コメントを残す

    ABOUTこの記事をかいた人

    「生きる」と「愛」をテーマにし、言葉で世界を変える小説家。 役者経験を活かし、自分を見つめることで人生を豊かにさせる方法を伝えるマインドコーディネイター。私には高学歴はありません。高校は定時制でほぼ中卒です。昼間は声優学校に通ったりバイトをしてました。 ですが、そのおかげで邪魔なプライドがなく何でも挑戦します。 私にあるのは、ハングリー精神と自分を信じる勇気と誇りです。 【得意】 演技・人間観察・雰囲気読む・感覚を落とし込む・小説書く・サプライズ考える・男性を理解し応援する・難しいことをわかりやすく説明する