テーマカラーに合わせて、吹き出しの色を変更してみました。
追加CSSに書き込んでいます。
ベースの四角、吹き出しの三角、それぞれ右と左、１色につき４つの指定が必要です。枠線も同様です。
550600投稿画面でプレビューされる表示色は、デフォルトのままで反映されません。混乱しないようにご注意ください。
目次
グリーンの吹き出し
/*吹き出し「green」色変更-背景*/
.balloon-left.balloon-bg-green .balloon-content, .balloon-left.has-d-1-f-8-c-2-bgballon .balloon-content {
background: #f3fbe9;
}
.balloon-right.balloon-bg-green .balloon-content, .balloon-right.has-d-1-f-8-c-2-bgballon .balloon-content {
background: #f3fbe9;
}
.balloon-left.balloon-bg-green .balloon-serif:before, .balloon-left.has-d-1-f-8-c-2-bgballon .balloon-serif:before {
border-color: transparent #f3fbe9 transparent transparent ; /* 左三角背景 */
}
.balloon-right.balloon-bg-green .balloon-serif:before, .balloon-right.has-d-1-f-8-c-2-bgballon .balloon-serif:before {
border-color: transparent transparent transparent #f3fbe9; /* 右三角背景 */
}
/*吹き出し「green」色変更-線*/
.balloon-left.balloon-green .balloon-content, .balloon-left.has-9-ddd-93-ballon .balloon-content {
border-color: #b2e878;
}
.balloon-right.balloon-green .balloon-content, .balloon-right.has-9-ddd-93-ballon .balloon-content {
border-color: #b2e878;
}
.balloon-left.balloon-green .balloon-serif:after, .balloon-left.has-9-ddd-93-ballon .balloon-serif:after {
border-color: transparent #b2e878 transparent transparent; /* 左三角線 */
}
.balloon-right.balloon-green .balloon-serif:after, .balloon-right.has-9-ddd-93-ballon .balloon-serif:after {
border-color: transparent transparent transparent #b2e878; /* 右三角線 */
}
イエローの吹き出し
/*吹き出し「yellow」色変更-背景*/
.balloon-left.balloon-bg-yellow .balloon-content, .balloon-left.has-fff-8-d-1-bgballon .balloon-content {
background: #ffffed;
}
.balloon-right.balloon-bg-yellow .balloon-content, .balloon-right.has-fff-8-d-1-bgballon .balloon-content {
background: #ffffed;
}
.balloon-left.balloon-bg-yellow .balloon-serif:before, .balloon-left.has-fff-8-d-1-bgballon .balloon-serif:before {
border-color: transparent #ffffed transparent transparent; /* 左三角背景 */
}
.balloon-right.balloon-bg-yellow .balloon-serif:before, .balloon-right.has-fff-8-d-1-bgballon .balloon-serif:before {
border-color: transparent transparent transparent #ffffed; /* 右三角背景 */
}
/*吹き出し「yellow」色変更-線*/
.balloon-left.balloon-yellow .balloon-content, .balloon-left.has-ffd-75-e-ballon .balloon-content {
border-color: #ffee56;
}
.balloon-right.balloon-yellow .balloon-content, .balloon-right.has-ffd-75-e-ballon .balloon-content {
border-color: #ffee56;
}
.balloon-left.balloon-yellow .balloon-serif:after, .balloon-left.has-ffd-75-e-ballon .balloon-serif:after {
border-color: transparent #ffee56 transparent transparent; /* 左三角線 */
}
.balloon-right.balloon-yellow .balloon-serif:after, .balloon-right.has-ffd-75-e-ballon .balloon-serif:after {
border-color: transparent transparent transparent #ffee56; /* 右三角線 */
}レッドの吹き出し
/*吹き出し「red」色変更-背景*/
.balloon-left.balloon-bg-red .balloon-content, .balloon-left.has-ffebeb-bgballon .balloon-content {
background: #fff6f3;
}
.balloon-right.balloon-bg-red .balloon-content, .balloon-right.has-ffebeb-bgballon .balloon-content {
background: #fff6f3;
}
.balloon-left.balloon-bg-red .balloon-serif:before, .balloon-left.has-ffebeb-bgballon .balloon-serif:before {
border-color: transparent #fff6f3 transparent transparent; /* 左三角背景 */
}
.balloon-right.balloon-bg-red .balloon-serif:before, .balloon-right.has-ffebeb-bgballon .balloon-serif:before {
border-color: transparent transparent transparent #fff6f3; /* 右三角背景 */
}
/*吹き出し「red」色変更-線*/
.balloon-left.balloon-red .balloon-content, .balloon-left.has-f-48789-ballon .balloon-content {
border-color: #ffcbb8;
}
.balloon-right.balloon-red .balloon-content, .balloon-right.has-f-48789-ballon .balloon-content {
border-color: #ffcbb8;
}
.balloon-left.balloon-red .balloon-serif:after, .balloon-left.has-f-48789-ballon .balloon-serif:after {
border-color: transparent #ffcbb8 transparent transparent; /* 左三角線 */
}
.balloon-right.balloon-red .balloon-serif:after, .balloon-right.has-f-48789-ballon .balloon-serif:after {
border-color: transparent transparent transparent #ffcbb8; /* 右三角線 */
}ブルー（ライラック）の吹き出し
/*吹き出し「blue」色変更-背景*/
.balloon-left.balloon-bg-blue .balloon-content, .balloon-left.has-e-2-f-6-ff-bgballon .balloon-content {
background: #f7f6ff; /* 左背景 */
}
.balloon-right.balloon-bg-blue .balloon-content, .balloon-right.has-e-2-f-6-ff-bgballon .balloon-content {
background: #f7f6ff; /* 右背景 */
}
.balloon-left.balloon-bg-blue .balloon-serif:before, .balloon-left.has-e-2-f-6-ff-bgballon .balloon-serif:before {
border-color: transparent #f7f6ff transparent transparent; /* 左三角背景 */
}
.balloon-right.balloon-bg-blue .balloon-serif:before, .balloon-right.has-e-2-f-6-ff-bgballon .balloon-serif:before {
border-color: transparent transparent transparent #f7f6ff; /* 右三角背景 */
}
/*吹き出し「blue」色変更-線*/
.balloon-left.balloon-blue .balloon-content, .balloon-left.has-93-d-2-f-0-ballon .balloon-content {
border-color: #ccccff; /* 左線 */
}
.balloon-right.balloon-blue .balloon-content, .balloon-right.has-93-d-2-f-0-ballon .balloon-content {
border-color: #ccccff; /* 右線 */
}
.balloon-left.balloon-blue .balloon-serif:after, .balloon-left.has-93-d-2-f-0-ballon .balloon-serif:after {
border-color: transparent #ccccff transparent transparent; /* 左三角線 */
}
.balloon-right.balloon-blue .balloon-serif:after, .balloon-right.has-93-d-2-f-0-ballon .balloon-serif:after {
border-color: transparent transparent transparent #ccccff; /* 右三角線 */
}