JINカスタマイズ｜吹き出しのカラーを色々と変更する

JINの吹き出しの色を追加したよ～٩( ᐛ )و

くま1号

くまくまくまくまくーーーまーー

くま1号

くまくまくーくーまー

くま1号

くまくまくまくまくまくまくま

くま1号

kuma♪

追加したカラーはこっちら！

PINK
PURPLE
INDIGO
CYAN
TEAL
LIME
ORANGE
BROWN
mycolor

9種類のカラーコードを作りました。

上の8つはマテリアルデザインのカラーを拝借しました。最後の1つは自分の好きなカラー用です。

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

大好き「吹き出しクリエイター」やでな

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。

for men

カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズは仮に同じテーマであっても、100％成功する補償はありません。

カスタマイズの準備
カスタマイズのコード
カスタマイズの締め

カスタマイズの準備

今回は、JIN吹き出し用のショートコードを使います。

 [chat face="★画像の名前★" name="★名前★" align="left" border="☆色名☆" bg="☆色名☆" style="maru"]●TEXT●[/chat]

1	[chat face="★画像の名前★" name="★名前★" align="left" border="☆色名☆" bg="☆色名☆" style="maru"]●TEXT●[/chat]

こちらの☆色名☆にpinkやpurpleなどCSSで設定するカラー名を記入します。

カスタマイズコードを書く場所は主に2つあります。

追加CSS（初心者向け）オススメ
外観＞テーマエディタ＞style.css（慣れた人向け）

はじめての方は追加CSSがおすすめです。使い方はこちらを参考にしてください。

for men

ブログのカスタマイズを加速させる「追加CSS」の使い方

どっちでも大丈夫です。ちょっとしたカスタマイズだけなら追加CSSでOKです。

カスタマイズのコード

PINK

kuma

●TEXT●

[chat face="★画像名★" name="★名前★" align="left" border="pink" bg="pink" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="pink" bg="pink" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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●

[chat face="★画像名★" name="★名前★" align="left" border="Purple" bg="Purple" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="Purple" bg="Purple" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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●

[chat face="★画像名★" name="★名前★" align="left" border="indigo" bg="indigo" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="indigo" bg="indigo" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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●

[chat face="★画像名★" name="★名前★" align="left" border="cyan" bg="cyan" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="cyan" bg="cyan" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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●

[chat face="★画像名★" name="★名前★" align="left" border="teal" bg="teal" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="teal" bg="teal" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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●

[chat face="★画像名★" name="★名前★" align="left" border="lime" bg="lime" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="lime" bg="lime" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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●

[chat face="★画像名★" name="★名前★" align="left" border="orange" bg="orange" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="orange" bg="orange" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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●

[chat face="★画像名★" name="★名前★" align="left" border="brown" bg="brown" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="brown" bg="brown" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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;
}

/*--------------------------------------

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

[chat face="★画像名★" name="★名前★" align="left" border="mycolor" bg="mycolor" style="maru"]●TEXT●[/chat]

1	[chat face="★画像名★" name="★名前★" align="left" border="mycolor" bg="mycolor" style="maru"]●TEXT●[/chat]

/*--------------------------------------
  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: ★線のカラーコード★;
}