Q&A
ありがとうございます。
自分がフロント側なのでついついそちらをメインに考えていましたが、
ご回答いただいたCSSファイルを書き出す方法も良いですね！
（今、管理者が編集したHTML/CSSをファイルに書き出す仕組み自体はあるので、機能を修正すれば実現できそうです）
前提・実現したいこと
jQuery、SCSS、Python、Djangoを利用しています。
管理者だけが操作できる管理画面と、一般ユーザーが見る画面のあるWebサービスがあり、
管理画面で管理者がボタンの色に「#f00」を登録したら、ユーザー画面全体のボタンの色が「#f00」に変わるような仕組みを作りたい
そもそもどうやって実装したら良いか、取っ掛かりもなく行き詰まっている状態です。。。
検索のキーワードもわからず、良い参考記事も見つけられないでいます。
jQuery、SCSS、Python、Django以外でも、実現に必要な技術があれば取り入れたいと思っています。
試したこと
Djangoテンプレートに、
tpl
1<input type="hidden" data-service-color="{{service_color}}">
のような形で利用する色を表示しておき、
jQueryでdata-service-colorの値を読み取って、
tpl
1<button class="js_change_color">登録する</button>
jQuery
1$(".js_change_color").css("background-color", service_color);
のような形で指定する
ただし、この場合
・JavaScriptを使うため、色の変更が完了するまで少し時間がかかる
・色を変更したい対象が様々なため、buttonだったらbackground-color、○○○だったらborder-color。。。とUIごとにプロパティのパターンをたくさん記述しないといけなくなる
といった問題があります
なにか良い方法はないかと思い質問させていただきました。
回答2件
0
ベストアンサー
こんにちは。
CSS変数を使えばいいのではないかな、と思いました。
html
1<body style="--service_color: {{service_color}}">
CSS
1.js_change_color .hoge{ 2 background-color: var(--service_color); 3} 4.js_change_color .fuga{ 5 border-color: var(--service_color); 6}
js
1$('body')[0].style.setProperty(`--service_color`, service_color);
投稿2021/04/23 00:58
編集2021/04/23 05:21
総合スコア36960
0
標準デザインの CSS は用意されているのだと思います。
あらかじめ、カスタマイズ可能な全ての箇所に ID か Class を記載しておいて、管理画面で id や class に対応する CSS を編集するのが比較的簡単ではないでしょうか。
管理画面で編集した内容は、CSS ファイルとして書き出して HTML でデフォルトのCSS と一緒に読み込むか、HTML の先頭で Style タグで埋め込むことが実装面では楽な気がします。
投稿2021/04/22 22:06
総合スコア25218
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/26 07:44