Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 完全レスポンシブデザイン時のnarrow.css カスタマイズについて
-
投稿者投稿
-
-
2015年2月13日 4:40 PM #20596
matu
ゲストSimplicityテーマ、ほんとにすばらしいです! いつもありがとうございます。
現在、ローカル環境で、
「完全レスポンシブデザイン」がオン、かつ、子テーマを使って構築しているところです。narrow.cssをカスタマイズしたいのですが、表示されたWebページのソースを見てみますと linkタグ(CSSファイル読み込み)の順番が
/themes/simplicity-child/skins/skin-template/style.css
/themes/simplicity/responsive.css
のため、どうしても親テーマのnarrow.cssで上書きされてしまいます。
なお、モバイルモードの時は、
/themes/simplicity-child/skins/skin-template/style.css
/themes/simplicity/responsive.css
/themes/simplicity-child/skins/skin-template/mobile.css
なので、skin-template/mobile.cssを編集することによりOKです。問題は、PCモードで(視覚障がい者のため)解像度が低いとき用のCSSカスタマイズが子テーマだけでは難しいようです。
PHPでlinkタグを書き換えようかと思案しているところです。
とりあえず今は、親テーマのnarrow.cssを直接カスタマイズしていますが、何か方法がございましたらご教授いただけると幸いです。日々精力的にご活躍のご様子、脊損でいろいろ大変かとお察ししますが、お体をじゅうぶんご自愛くださいませ。
-
2015年2月13日 5:09 PM #20601
わいひらキーマスター不具合などがあって、修正しないといけない時に、1箇所を修正すれば良いよう、まとめて書けるように、あえてそのようにした記憶があります。
子テーマに!importantルールを使用して、スタイルを設定しても適用されませんか? -
2015年2月13日 6:00 PM #20608
matu
ゲストわいひら様、早速のご返信ありがとうございます。
skin-template/style.cssで !importantを使用することで解決できました。
欠点は、モバイルでは違う表示を行いたくてもできないケースが出てきますが、
narrow.cssは本来、モバイルで使うのが主で、今回のようなPCでも使用するのはレアケースかもしれませんね。
臨機応変に対応していきたいと思います。
今後ともよろしくお願いいたします。 -
2015年2月13日 6:15 PM #20614
わいひらキーマスター欠点は、モバイルでは違う表示を行いたくてもできないケースが出てきますが、
子テーマのmobile.cssは、確か最後に呼ぶはずだったので、モバイルでimportant指定すれば、そこでさらに上書きできたと思います。
あと、たとえもしそれがだめだったとしても、CSSセレクタを長めに設定すれば、詳しく指定されてる方が優先されます。 -
2015年2月13日 6:33 PM #20619
matu
ゲスト失礼しました。
importantを多用する習慣がなかったもので。おっしゃるとおり、skin-template/mobile.cssでも importantを指定することで、PC/モバイルそれぞれの表示ができるようになりました。
お忙しい中、ありがとうございました!
-
2015年2月13日 7:08 PM #20627
わいひらキーマスター僕も出来れば、importantを使いたくなかったのですが、つい開発を楽にしたくて使ってしまいました;
important指定や、ましてや多重指定は実際にあまり良い作法ではないと思います。
いずれ直せればと思います。
-
-
投稿者投稿
- トピック「完全レスポンシブデザイン時のnarrow.css カスタマイズについて」には新しい返信をつけることはできません。