SANGOのカスタマイズサイト
JIN

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

 

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

くま1号
くま1号
くまくまくまくまくーーーまーー
くま1号
くま1号
くまくまくーくーまー
くま1号
くま1号
くまくまくまくまくまくまくま
くま1号
くま1号
kuma♪

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

  • PINK
  • PURPLE
  • INDIGO
  • CYAN
  • TEAL
  • LIME
  • ORANGE
  • BROWN
  • mycolor

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

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

メンくん
ぼくの吹き出しはJIN純正の吹き出しでは無いので、ちょっとデザインが違います
くま
大好き「吹き出しクリエイター」やでな

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちらを読んでくださいね。
for men
カスタマイズは自己責任。ぼくはこんな風に思っています。
くま
カスタマイズは仮に同じテーマであっても、100％成功する補償はありません。
Contents
  1. カスタマイズの準備
  2. カスタマイズのコード
  3. カスタマイズの締め

カスタマイズの準備

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

 

	
★名前★

	
★名前★

	
●TEXT●

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

カスタマイズコードを書く場所は主に2つあります。
  • 追加CSS（初心者向け）オススメ
  • 外観＞テーマエディタ＞style.css（慣れた人向け）
はじめての方は追加CSSがおすすめです。使い方はこちらを参考にしてください。
for men
ブログのカスタマイズを加速させる「追加CSS」の使い方
メンくん
どっちでも大丈夫です。ちょっとしたカスタマイズだけなら追加CSSでOKです。

カスタマイズのコード

PINK

kuma
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
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
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
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
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
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
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
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を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。

ここにボックスタイトルを入力

JINのカスタマイズまとめページ

 

for men
for men｜やってみるをサポート
吹き出し
関連記事