JINの吹き出しの色を追加したよ~٩( ᐛ )و
くま1号
くまくまくまくまくーーーまーー
くま1号
くまくまくーくーまー
くま1号
くまくまくまくまくまくまくま
くま1号
kuma♪
追加したカラーはこっちら!
- PINK
- PURPLE
- INDIGO
- CYAN
- TEAL
- LIME
- ORANGE
- BROWN
- mycolor
9種類のカラーコードを作りました。
上の8つはマテリアルデザインのカラーを拝借しました。最後の1つは自分の好きなカラー用です。

ぼくの吹き出しはJIN純正の吹き出しでは無いので、ちょっとデザインが違います

大好き「吹き出しクリエイター」やでな
カスタマイズは自己責任でやろう!

カスタマイズは仮に同じテーマであっても、100%成功する補償はありません。
Contents
カスタマイズの準備
今回は、JIN吹き出し用のショートコードを使います。
★名前★
●TEXT●
こちらの☆色名☆にpinkやpurpleなどCSSで設定するカラー名を記入します。
カスタマイズコードを書く場所は主に2つあります。- 追加CSS(初心者向け)オススメ
- 外観>テーマエディタ>style.css(慣れた人向け)

どっちでも大丈夫です。ちょっとしたカスタマイズだけなら追加CSSでOKです。
カスタマイズのコード
PINK
kuma
●TEXT●
★名前★●TEXT●
/*--------------------------------------
PINK
--------------------------------------*/
.balloon-right.balloon-pink .balloon-serif:after {
border-color: transparent transparent transparent #f8cbd1;
}
.balloon-right.balloon-pink .balloon-content {
border-color: #f8cbd1;
}
.balloon-left.balloon-pink .balloon-serif:after {
border-color: transparent #f8cbd1 transparent transparent;
}
.balloon-left.balloon-pink .balloon-content {
border-color: #f8cbd1;
}
.balloon-right.balloon-bg-pink .balloon-serif:before {
border-color: transparent transparent transparent #fef6f7;
}
.balloon-right.balloon-bg-pink .balloon-content {
background: #fef6f7;
}
.balloon-left.balloon-bg-pink .balloon-serif:before {
border-color: transparent #fef6f7 transparent transparent;
}
.balloon-left.balloon-bg-pink .balloon-content {
background: #fef6f7;
}
.balloon-bg-pink .balloon-icon.maru, .balloon-pink .balloon-icon.maru{
border-color: #f8cbd1;
}
PURPLE
kuma
●TEXT●
★名前★
●TEXT●
/*--------------------------------------
Purple
--------------------------------------*/
.balloon-right.balloon-Purple .balloon-serif:after {
border-color: transparent transparent transparent #BA68C8;
}
.balloon-right.balloon-Purple .balloon-content {
border-color: #BA68C8;
}
.balloon-left.balloon-Purple .balloon-serif:after {
border-color: transparent #BA68C8 transparent transparent;
}
.balloon-left.balloon-Purple .balloon-content {
border-color: #BA68C8;
}
.balloon-right.balloon-bg-Purple .balloon-serif:before {
border-color: transparent transparent transparent #F3E5F5;
}
.balloon-right.balloon-bg-Purple .balloon-content {
background: #F3E5F5;
}
.balloon-left.balloon-bg-Purple .balloon-serif:before {
border-color: transparent #F3E5F5 transparent transparent;
}
.balloon-left.balloon-bg-Purple .balloon-content {
background: #F3E5F5;
}
.balloon-bg-Purple .balloon-icon.maru, .balloon-Purple .balloon-icon.maru{
border-color: #BA68C8;
}
INDIGO
kuma
●TEXT●
★名前★
●TEXT●
/*--------------------------------------
indigo
--------------------------------------*/
.balloon-right.balloon-indigo .balloon-serif:after {
border-color: transparent transparent transparent #9FA8DA;
}
.balloon-right.balloon-indigo .balloon-content {
border-color: #9FA8DA;
}
.balloon-left.balloon-indigo .balloon-serif:after {
border-color: transparent #9FA8DA transparent transparent;
}
.balloon-left.balloon-indigo .balloon-content {
border-color: #9FA8DA;
}
.balloon-right.balloon-bg-indigo .balloon-serif:before {
border-color: transparent transparent transparent #E8EAF6;
}
.balloon-right.balloon-bg-indigo .balloon-content {
background: #E8EAF6;
}
.balloon-left.balloon-bg-indigo .balloon-serif:before {
border-color: transparent #E8EAF6 transparent transparent;
}
.balloon-left.balloon-bg-indigo .balloon-content {
background: #E8EAF6;
}
.balloon-bg-indigo .balloon-icon.maru, .balloon-indigo .balloon-icon.maru{
border-color: #9FA8DA;
}
CYAN
kuma
●TEXT●
★名前★
●TEXT●
/*--------------------------------------
cyan
--------------------------------------*/
.balloon-right.balloon-cyan .balloon-serif:after {
border-color: transparent transparent transparent #80DEEA;
}
.balloon-right.balloon-cyan .balloon-content {
border-color: #80DEEA;
}
.balloon-left.balloon-cyan .balloon-serif:after {
border-color: transparent #80DEEA transparent transparent;
}
.balloon-left.balloon-cyan .balloon-content {
border-color: #80DEEA;
}
.balloon-right.balloon-bg-cyan .balloon-serif:before {
border-color: transparent transparent transparent #E0F7FA;
}
.balloon-right.balloon-bg-cyan .balloon-content {
background: #E0F7FA;
}
.balloon-left.balloon-bg-cyan .balloon-serif:before {
border-color: transparent #E0F7FA transparent transparent;
}
.balloon-left.balloon-bg-cyan .balloon-content {
background: #E0F7FA;
}
.balloon-bg-cyan .balloon-icon.maru, .balloon-cyan .balloon-icon.maru{
border-color: #80DEEA;
}
TEAL
kuma
●TEXT●
★名前★
●TEXT●
/*--------------------------------------
teal
--------------------------------------*/
.balloon-right.balloon-teal .balloon-serif:after {
border-color: transparent transparent transparent #80CBC4;
}
.balloon-right.balloon-teal .balloon-content {
border-color: #80CBC4;
}
.balloon-left.balloon-teal .balloon-serif:after {
border-color: transparent #80CBC4 transparent transparent;
}
.balloon-left.balloon-teal .balloon-content {
border-color: #80CBC4;
}
.balloon-right.balloon-bg-teal .balloon-serif:before {
border-color: transparent transparent transparent #E0F2F1;
}
.balloon-right.balloon-bg-teal .balloon-content {
background: #E0F2F1;
}
.balloon-left.balloon-bg-teal .balloon-serif:before {
border-color: transparent #E0F2F1 transparent transparent;
}
.balloon-left.balloon-bg-teal .balloon-content {
background: #E0F2F1;
}
.balloon-bg-teal .balloon-icon.maru, .balloon-teal .balloon-icon.maru{
border-color: #80CBC4;
}
LIME
kuma
●TEXT●
★名前★
●TEXT●
/*--------------------------------------
lime
--------------------------------------*/
.balloon-right.balloon-lime .balloon-serif:after {
border-color: transparent transparent transparent #E6EE9C;
}
.balloon-right.balloon-lime .balloon-content {
border-color: #E6EE9C;
}
.balloon-left.balloon-lime .balloon-serif:after {
border-color: transparent #E6EE9C transparent transparent;
}
.balloon-left.balloon-lime .balloon-content {
border-color: #E6EE9C;
}
.balloon-right.balloon-bg-lime .balloon-serif:before {
border-color: transparent transparent transparent #F9FBE7;
}
.balloon-right.balloon-bg-lime .balloon-content {
background: #F9FBE7;
}
.balloon-left.balloon-bg-lime .balloon-serif:before {
border-color: transparent #F9FBE7 transparent transparent;
}
.balloon-left.balloon-bg-lime .balloon-content {
background: #F9FBE7;
}
.balloon-bg-lime .balloon-icon.maru, .balloon-lime .balloon-icon.maru{
border-color: #E6EE9C;
}
ORANGE
kuma
●TEXT●
★名前★
●TEXT●
/*--------------------------------------
orange
--------------------------------------*/
.balloon-right.balloon-orange .balloon-serif:after {
border-color: transparent transparent transparent #FFB74D;
}
.balloon-right.balloon-orange .balloon-content {
border-color: #FFB74D;
}
.balloon-left.balloon-orange .balloon-serif:after {
border-color: transparent #FFB74D transparent transparent;
}
.balloon-left.balloon-orange .balloon-content {
border-color: #FFB74D;
}
.balloon-right.balloon-bg-orange .balloon-serif:before {
border-color: transparent transparent transparent #FFF3E0;
}
.balloon-right.balloon-bg-orange .balloon-content {
background: #FFF3E0;
}
.balloon-left.balloon-bg-orange .balloon-serif:before {
border-color: transparent #FFF3E0 transparent transparent;
}
.balloon-left.balloon-bg-orange .balloon-content {
background: #FFF3E0;
}
.balloon-bg-orange .balloon-icon.maru, .balloon-orange .balloon-icon.maru{
border-color: #FFB74D;
}
BROWN
kuma
●TEXT●
★名前★
●TEXT●
/*--------------------------------------
brown
--------------------------------------*/
.balloon-right.balloon-brown .balloon-serif:after {
border-color: transparent transparent transparent #BCAAA4;
}
.balloon-right.balloon-brown .balloon-content {
border-color: #BCAAA4;
}
.balloon-left.balloon-brown .balloon-serif:after {
border-color: transparent #BCAAA4 transparent transparent;
}
.balloon-left.balloon-brown .balloon-content {
border-color: #BCAAA4;
}
.balloon-right.balloon-bg-brown .balloon-serif:before {
border-color: transparent transparent transparent #EFEBE9;
}
.balloon-right.balloon-bg-brown .balloon-content {
background: #EFEBE9;
}
.balloon-left.balloon-bg-brown .balloon-serif:before {
border-color: transparent #EFEBE9 transparent transparent;
}
.balloon-left.balloon-bg-brown .balloon-content {
background: #EFEBE9;
}
.balloon-bg-brown .balloon-icon.maru, .balloon-brown .balloon-icon.maru{
border-color: #BCAAA4;
}
mycolor
★名前★
●TEXT●
/*--------------------------------------
mycolor
--------------------------------------*/
.balloon-right.balloon-mycolor .balloon-serif:after {
border-color: transparent transparent transparent ★線のカラーコード★;
}
.balloon-right.balloon-mycolor .balloon-content {
border-color: ★線のカラーコード★;
}
.balloon-left.balloon-mycolor .balloon-serif:after {
border-color: transparent ★線のカラーコード★ transparent transparent;
}
.balloon-left.balloon-mycolor .balloon-content {
border-color: ★線のカラーコード★;
}
.balloon-right.balloon-bg-mycolor .balloon-serif:before {
border-color: transparent transparent transparent ★背景のカラーコード★;
}
.balloon-right.balloon-bg-mycolor .balloon-content {
background: ★背景のカラーコード★;
}
.balloon-left.balloon-bg-mycolor .balloon-serif:before {
border-color: transparent ★背景のカラーコード★ transparent transparent;
}
.balloon-left.balloon-bg-mycolor .balloon-content {
background: ★背景のカラーコード★;
}
.balloon-bg-mycolor .balloon-icon.maru, .balloon-mycolor .balloon-icon.maru{
border-color: ★線のカラーコード★;
}
背景色と線の色のカラーコードを好きな色に置換してくださいね。
ちなみに、左でも右でもちゃんと表示されるようなCSSコードとなっています。
こちらをコピーして、追加CSSかstyle.cssに貼り付けてください。
カスタマイズの締め
カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません。
キャッシュ削除
簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。
ここにボックスタイトルを入力