フォーラムをリニューアルしました！
今後は、新フォーラムをご利用ください。
子テーマの「スタイルシート（style.css）」とカスタマイザーの「追加CSS」の関係性について < SWELLに関する質問
通知
すべてクリア
Topic starter
デザインのカスタマイズをしようと思い、テーマエディターを使って子テーマの「スタイルシート（style.css）」に記述しているのですが、一部スタイルが適用されないという現象がありまして、調べてみると<style id="swell_custom_front_style">というスタイルで上書きされていることがわかりました。
!importantで対応しても良かったのですが、試しにカスタマイザーの「追加CSS」に記述してみると、<style id="swell_custom_front_style">のスタイルを更に上書きすることができました。
※ここまでの様子は添付の画像を参照ください。
ここでふと疑問に思ったのですが、子テーマの「スタイルシート（style.css）」とカスタマイザーの「追加CSS」はなぜこのような仕様になっているのでしょうか？？
子テーマの「スタイルシート（style.css）」は基本的に使わせたくない、カスタマイザーの「追加CSS」を使ってね
という意図があったりするのでしょうか？
投稿済 : 20/02/2021 2:08 pm
カスタマイザーの追加CSSが小テーマからの読み込みとかよりも後の方で出力されるのはWordPressの仕様ですね〜。
SWELLのカスタムスタイルはページ個別のカスタマイズようなので、全体に読み込まれる「追加CSS」よりも後にくるようになってます。（最近そのような順序にすべきだという声をいただき、変更しました）
投稿済 : 20/02/2021 2:12 pm
あ、すみません少し勘違いでした、カスタムフロントスタイルは、PHPから出力してるCSSですね。
これも標準的なWordPressのフックを使っていて、その順番通りになってます。
投稿済 : 20/02/2021 2:14 pm
ちなみに出力順がどうなっていようとCSSは詳細度を強くするだけで上書き可能なので、うまく調節していただければと思います。
また、子テーマを一応公式から配布はしていますがあれもあくまで雛形でしかなく、「追加CSS」よりあとでCSSファイルを読み込ませたりするということはちょっといじれば可能です。
独自テーマではなく販売されたり配布されているテーマを使う以上は、そのテーマごとにどういうタイミングでどういうCSSが当てられるかを踏まえた上で各自ユーザーさんで工夫してカスタマイズしていただく形になります。
投稿済 : 20/02/2021 2:17 pm
しらこ reacted
Topic starter
回答ありがとうございます。理解できました！
カスタマイザーの「追加CSS」の方がライブプレビューもできて便利ですし、そちらに記述するようにします。
ところで、「追加CSS」の入力欄の幅って自由に調整できるようにならないものでしょうか・・・？幅が狭くてすぐ折り返されてしまうので・・・
投稿済 : 20/02/2021 2:47 pm
了(開発者) reacted
「追加CSS」の入力欄の幅って自由に調整できるようにならないものでしょうか・・・？幅が狭くてすぐ折り返されてしまうので・・・
カスタマイザーのメニュー部分を広くするCSSをご自身で追加されれば、そう言ったことも可能です。（一応SWELLでもちょっとだけ広くしています）
おっしゃる通りお世辞にもCSSが書きやすいものではないので、がっつりCSSを書くのであれば子テーマからのCSSに全て書くのがいいと思います！
投稿済 : 21/02/2021 2:49 am
Topic starter
回答ありがとうございます。試してみます。
投稿済 : 21/02/2021 6:11 am