コメントごとに背景色を変えたいです。
任意の2色を交互にコメントの背景色として表示することは可能でしょうか?
また、2色以上の候補からランダムに選択し背景色として表示出来たらさらに嬉しいです。
有識者の皆様お知恵を貸していただけないでしょうか
よろしくお願いいたします。
配信ソフト OBS
使用テンプレート basic slim
コメントごとに背景色を変えたいです。
任意の2色を交互にコメントの背景色として表示することは可能でしょうか?
また、2色以上の候補からランダムに選択し背景色として表示出来たらさらに嬉しいです。
有識者の皆様お知恵を貸していただけないでしょうか
よろしくお願いいたします。
配信ソフト OBS
使用テンプレート basic slim
とりあえず、2色交互にしてみました、左がslimで右がbasicに適用したスクショです。
.odd {background-color:lightpink;}
.even {background-color:lightgreen;}
lightpinkやlightgreenのところを変えると色が変わります。
また、OBSのカスタムCSSのみではランダムというのは多分(?)むずかしい気がする(自信ない)のですが、ランダムに見えるぐらいの数、色を並べることでランダムっぽくなるかもしれません。しかしなんか手元でうまく行かないのでとりあえず2色交互だけのcssと、参考資料のリンクだけ置いておきます。
もしかしたら役に立つかもしれない情報↓(見当違いの可能性もあり)
:nth-child() - CSS: カスケーディングスタイルシート | MDN
本当に見当違いでした(返信に追記)
hyk様
とても迅速に解決策ご返信いただきましてありがとうございます
無事反映出来ました。本当にありがとうございます
見当違いだったCSSの例もここに供養しておきます。
div.comment:nth-child(7n){background-color:red;}
div.comment:nth-child(7n+1){background-color:lightgreen;}
div.comment:nth-child(7n+2){background-color:lightblue;}
div.comment:nth-child(7n+3){background-color:snow;}
div.comment:nth-child(7n+4){background-color:lightgreen;}
div.comment:nth-child(7n+5){background-color:pink;}
div.comment:nth-child(7n+6){background-color:lightblue;}
右上が適用したものです。(imgur: https://imgur.com/kCoVkwd
)
場所が固定される形で、でもカラフルになってますね!!
すごいです!ありがとうございます!!