小ネタ

【JIN】吹き出しの色や装飾をカスタマイズ【改造してみた】

奈古真奈
奈古真奈
デフォルトの緑色を変更したよ
助手
助手
新しい色を追加したり
奈古真奈
奈古真奈
スティッチをかけてみたりできるよ
助手
助手
皆もレッツトライ!

記載する場所

外観→カスタマイズ→追加CSSにコードをコピー&ペーストしてください。

吹き出しや枠の色を変更&追加

奈古真奈
奈古真奈
要素名を好きな名前に変更してね
サンプルではpurpleになっているところだよ
/*左枠色*/
.balloon-left.balloon-purple .balloon-serif:after {
  border-color: transparent #B694EF transparent transparent; }
.balloon-left.balloon-purple .balloon-content {
  border-color: #B694EF; }
/*右枠色*/
.balloon-right.balloon-purple .balloon-serif:after {
  border-color: transparent transparent transparent #B694EF; }
.balloon-right.balloon-purple .balloon-content {
  border-color: #B694EF; }

/*左吹き出し背景色*/
.balloon-left.balloon-bg-purple .balloon-serif:before {
  border-color: transparent #F5EFFB transparent transparent; }
.balloon-left.balloon-bg-purple .balloon-content {
  background: #F5EFFB; }
/*右吹き出し背景色*/
.balloon-right.balloon-bg-purple .balloon-serif:before {
  border-color: transparent transparent transparent #F5EFFB; }
.balloon-right.balloon-bg-purple .balloon-content {
  background: #F5EFFB; }

 

助手
助手
既存の吹き出しに適用したいならgrayやredやyellowやgreenに。新しく色を追加したいなら好きな名前でOK!
奈古真奈
奈古真奈
好きな名前とはいっても日本語はNG!必ずアルファベットで書いてね
助手
助手
新しい名前を追加した場合border=”” bg=””のところも同じ名前にすることも忘れずに
奈古真奈
奈古真奈
左向きと右向きでカラーコードの記載場所が違うところも注意だよ。自信がないときは名前とカラーコード以外弄らないでね。

吹き出しにスティッチをつける

奈古真奈
奈古真奈
基本的には上と内容は同じだよ。
ただしJINのアップデート次第によっては表示がバグる可能性があるので使用する場合は自己責任でお願いします。
/*左スティッチ枠の色*/
.balloon-left.balloon-stitch .balloon-content {
  border-color: #950042; }
.balloon-left.balloon-stitch .balloon-serif:after {
  border-color: transparent #950042 transparent transparent; }
/*左スティッチ背景色*/
.balloon-left.balloon-bg-stitch .balloon-serif:before {
  border-color: transparent #D71345 transparent transparent; }
.balloon-left.balloon-bg-stitch .balloon-content {
  background: #D71345; }
/*左スティッチの色*/
.balloon-left.balloon-bg-stitch .balloon-content:after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 3px dashed #fff;
  z-index: 10;
  border-radius: 5px;
  margin: auto; }

/*右スティッチ枠の色*/
.balloon-right.balloon-stitch .balloon-content {
  border-color: #999; }
.balloon-right.balloon-stitch .balloon-serif:after {
  border-color: transparent transparent transparent #999; }
/*右スティッチ背景色*/
.balloon-right.balloon-bg-stitch .balloon-serif:before {
  border-color: transparent transparent transparent #fff; }
.balloon-right.balloon-bg-stitch .balloon-content {
  background: #fff; }
/*右スティッチの色*/
.balloon-right.balloon-bg-stitch .balloon-content:after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 3px dashed #999;
  z-index: 10;
  border-radius: 5px;
  margin: auto; }

助手
助手
既存の吹き出しにスティッチを追加したいならこのコードを追加するだけでOK!

もちろん名前はgrayやredやyellowやgreenに変更してね!

/*左スティッチのみ追加*/
.balloon-left.balloon-bg-色 .balloon-content:after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 3px dashed #fff;
  z-index: 10;
  border-radius: 5px;
  margin: auto; }
/*右スティッチのみ追加*/
.balloon-right.balloon-bg-色 .balloon-content:after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 3px dashed #fff;
  z-index: 10;
  border-radius: 5px;
  margin: auto; }

 

奈古真奈
奈古真奈
スティッチ(ボーダー)の種類を変えたり他にも色んなカスタマイズ方法があったりするけど割愛するよ!グラデーションやストライプ等アレンジしたい人は各自調べてみてね!
助手
助手
スティッチを使う場合bg=”none”は使えないので注意!
白背景のときもカラーコードを指定してください。

まとめ

吹き出しを弄るだけでも大変なので皆JINを買おう!

ありがとうございました!

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!