吹き出しの色の変更



  • JINではキャラ+吹き出しが以下で簡単に表示させることが出来ます。
    [chat face="aaaaa.png" name="bbbbb" align="left" border="gray" bg="gray" style="maru"]cccccc[/chat]

    今までずっとこの吹き出しを使ってきましたが、色がカラフル過ぎるので、もう少し薄い色にしたいと思います。
    これから記事を書く分については色を設定良いのですが、問題は今までの記事です。
    過去の記事の吹き出しの色を変えようとすると、数千の吹き出しを直接変更する必要があります。

    そこでcssなどで、gray⇒#000000といった感じで、サイトの記事全ての色を変更することは出来るでしょうか?


    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • @mbpyd325 さん

    こんにちは!

    できるかもしれませんね...
    実際のサイトのURLをご共有いただけますか??

    お手数おかけしますが、よろしくお願いいたします!



  • https://poikatsu-walker.com/
    になります。
    キャラが2人おり、グレーと緑を使っていますが、色をどちらも薄くしたいです。



  • @mbpyd325 さん

    イメージとしては以下のようなコードになると思います!

    .balloon-left.balloon-bg-gray .balloon-content, .balloon-left.has-efefef-bgballon .balloon-content {
    	background: #fff;
    }
    .balloon-left.balloon-bg-gray .balloon-serif:before, .balloon-left.has-efefef-bgballon .balloon-serif:before {
    	border-color: transparent #fff transparent transparent;
    }
    .balloon-left.balloon-gray .balloon-content, .balloon-left.has-ccc-ballon .balloon-content {
    	border-color: #000;
    }
    .balloon-left.balloon-gray .balloon-serif:after, .balloon-left.has-ccc-ballon .balloon-serif:after {
        border-color: transparent #000 transparent transparent;
    }
    
    .balloon-right.balloon-bg-green .balloon-content, .balloon-right.has-d-1-f-8-c-2-bgballon .balloon-content {
        background: #fff;
    }
    .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 #fff;
    }
    .balloon-right.balloon-green .balloon-serif:after, .balloon-right.has-9-ddd-93-ballon .balloon-serif:after {
    	border-color: transparent transparent transparent #000;
    }
    .balloon-right.balloon-green .balloon-content, .balloon-right.has-9-ddd-93-ballon .balloon-content {
    	border-color: #000;
    }
    

    上4つが左の吹き出し、下4つが右の吹き出しです。
    #fff や #000 の部分を変更してみてください...!

    参考になりましたら幸いです!



  • 回答ありがとうございます。
    こちらのコードは、カスタマイズ⇒追加CSSか
    またはjin-child: スタイルシート (style.css)にコピペで良かったでしょうか?
    どちらも試したのですが、吹き出しの色は変わらなかったので・・。



  • @mbpyd325 さん

    ご確認ありがとうございます!

    追加CSSで大丈夫です!
    こちらでも確認したいので、追加CSSに書いた状態にしていただけますか...??



  • すいません、追加CSSはサブのドメインで試してダメだったのですが、
    https://poikatsu-walker.com/
    に貼り付けたら、なぜかこちらは色が反映されました!

    ただしキャラから出た吹き出しの、三角部分のみ太く表示されているのですが、他の枠の部分と同じ太さにすることは出来ないものでしょうか?
    (追加で質問すいません)



  • ただしキャラから出た吹き出しの、三角部分のみ太く表示されているのですが、他の枠の部分と同じ太さにすることは出来ないものでしょうか?
    (追加で質問すいません)
    ⇒色々コードを変えてみたら目立たなくなったので大丈夫でした。
     回答ありがとうございました。



  • @mbpyd325 さん

    ご報告ありがとうございます。
    ご返信が遅くなってしまい申し訳ありませんでした...!

    引き続きよろしくお願いいたします!
    (ご確認いただければ、ご返信には及びません)