MENU
ファンレターを書いてみませんか?

当サイトの作品を読んで、「なんかちょっと心がソワソワしたぞ」「うるっとしちゃった」「単純に文章が好き!」という方は、私にファンレターを送って下さい。

応援されることは嬉しい。
応援する方は2倍嬉しい。

あなたのお気持ち待ってます。

ばなやん(一ツ屋有美子)にファンレターを贈る

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

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

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

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

それが・・・・・・

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

ってことなんです。(2018/10/18時点)

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

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

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

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

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

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

 

イメージはこう↓↓↓

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

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

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

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

 

目次

吹き出しショートコード

名前
ここにセリフ

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

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

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

します。

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

 

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

超簡単です。

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

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

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

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

 

枠線の色を変える

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

くっきりアイコン枠

橘右近
濃い色の方が映えると思うよ!
/* --- 吹き出しアイコン --- */
.voice.icondake .icon img { 
border-color: #915da3; /* 好きなカラーコード */
 }

 

フラットなアイコン枠

橘右近
こっちは淡い色の方がいいかな?
/* --- 吹き出しアイコン(フラット) --- */
.voice.icondake02 .icon img { 
background-color: #e8c59c; /* 好きなカラーコード */
border-color: #e8c59c; /* 好きなカラーコード */
 }

 

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

くっきり枠

橘右近
ストークの場合は吹き出し部分(三角)も色の指定をします! スワローはナシで大丈夫です
/* --- 吹き出し枠線 --- */
.voice.fukidasidake .voicecomment{ 
border-color: #00afcc; /* 好きなカラーコード */
 }
.voice.l.fukidasidake .voicecomment:before{ 
border-right-color:#00afcc; /* 好きなカラーコード-吹き出し三角部分- */
 }
.voice.r.fukidasidake .voicecomment:before{ 
border-left-color:#00afcc; /* 好きなカラーコード-吹き出し三角部分- */
 }

 

フラットな枠

橘右近
濃い色なら、文字色変えないとだね! 投稿画面で変更するか、cssコードに「color: #ffffff;」とかいておいて下さい!
/* --- 吹き出し枠線(フラット) --- */
.voice.fukidasidake02 .voicecomment{ 
background-color: #ec6d71; /* 好きなカラーコード。背景色 */
border-color: #ec6d71; /* 好きなカラーコード。枠線の色 */
 }
.voice.l.fukidasidake02 .voicecomment:before{ 
border-right-color: #ec6d71; /* 好きなカラーコード。枠線の色 */
 }
.voice.l.fukidasidake02 .voicecomment:after{ 
border-right-color: #ec6d71; /* 好きなカラーコード。背景色 */
 }
.voice.r.fukidasidake02 .voicecomment:before{ 
border-left-color: #ec6d71; /* 好きなカラーコード。枠線の色 */
 }
.voice.r.fukidasidake02 .voicecomment:after{ 
border-left-color: #ec6d71; /* 好きなカラーコード。背景色 */
 }

こんな感じです!

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

 

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

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

 

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

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

/* --- 吹き出し赤(枠と背景色変更) --- */
.voice.aka .icon img {
border-color: #ec6d71;
background-color: #fff;
}
.voice.aka .voicecomment{ 
background-color: #fff;
border-color: #ec6d71;
 }
.voice.l.aka .voicecomment:before{ 
border-right-color: #ec6d71;
 }
.voice.l.aka .voicecomment:after{ 
border-right-color: #fff;
 }
.voice.r.aka .voicecomment:before{ 
border-left-color: #ec6d71;
 }
.voice.r.aka .voicecomment:after{ 
border-left-color: #fff;
 }

 

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

/* --- 吹き出しアイコン緑 --- */
.voice.midori .icon img { 
background-color: #edfbd6;
border-color: #edfbd6;
 }
.voice.midori .voicecomment{ 
background-color: #edfbd6;
border-color: #edfbd6;
 }
.voice.l.midori .voicecomment:before{ 
border-right-color: #edfbd6;
 }
.voice.l.midori .voicecomment:after{ 
border-right-color: #edfbd6;
 }
.voice.r.midori .voicecomment:before{ 
border-left-color: #edfbd6;
 }
.voice.r.midori .voicecomment:after{ 
border-left-color: #edfbd6;
 }

 

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

/* --- 吹き出しアイコン黄色 --- */
.voice.ki .icon img { 
border-color: #fcc800;
 }
.voice.ki .voicecomment{ 
background-color: #fff799;
border-color: #fff799;
 }
.voice.l.ki .voicecomment:before{ 
border-right-color: #fff799;
 }
.voice.l.ki .voicecomment:after{ 
border-right-color: #fff799;
 }
.voice.r.ki .voicecomment:before{ 
border-left-color: #fff799;
 }
.voice.r.ki .voicecomment:after{ 
border-left-color: #fff799;
 }

 

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

/* --- 吹き出しアイコン青 --- */
.voice.ao .icon img { 
background-color: #cdf2ff;
border-color: #cdf2ff;
 }
.voice.ao .voicecomment{ 
background-color: #fff;
border-color: #00afcc;
 }
.voice.l.ao .voicecomment:before{ 
border-right-color: #00afcc;
 }
.voice.l.ao .voicecomment:after{ 
border-right-color: #fff;
 }
.voice.r.ao .voicecomment:before{ 
border-left-color: #00afcc;
 }
.voice.r.ao .voicecomment:after{ 
border-left-color: #fff;
 }

 

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

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

.voice.aka

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

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

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

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

↓↓↓

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

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

一ツ屋有美子@声優小説家
ここまでお読み下さり、ありがとうございます!!

ブログランキングに参加してます!

次のリンクをクリックして応援してもらえると嬉しいです。
よろしくお願いします(@゚∀`@)ノ

 



この記事が気に入ったら
いいね または フォローしてね!

注意

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

コメント

コメント一覧 (3件)

  • 恕衛門 より:

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

    • Yumiko Tukise より:

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

  • […] そっちを優先しようよ。頑張ってね。 恕衛門ところで、この吹き出しは背景色も変わり、格好いいでしょう。これは「ストーク」の吹き出しをカスタマイズする!を参考にしました。 […]

コメントする

目次
閉じる