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純正の吹き出しでは無いので、ちょっとデザインが違います

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

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

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

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

カスタマイズの準備

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

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

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

  • 追加CSS(初心者向け)オススメ
  • 外観>テーマエディタ>style.css(慣れた人向け)

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

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

カスタマイズのコード

PINK

kuma
kuma
●TEXT●

PURPLE

kuma
kuma
●TEXT●

INDIGO

kuma
kuma
●TEXT●

CYAN

kuma
kuma
●TEXT●

TEAL

kuma
kuma
●TEXT●

LIME

kuma
kuma
●TEXT●

ORANGE

kuma
kuma
●TEXT●

BROWN

kuma
kuma
●TEXT●

mycolor

背景色と線の色のカラーコードを好きな色に置換してくださいね。

ちなみに、左でも右でもちゃんと表示されるようなCSSコードとなっています。


こちらをコピーして、追加CSSかstyle.cssに貼り付けてください。

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。

これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません。

キャッシュ削除
簡単な方法は Ctrl + F5 を押す方法です。またはF12を押した後に更新マークを右クリックして「キャッシュの消去とハード再読込」をクリックします。