完全レスポンシブデザイン時のnarrow.css カスタマイズについて

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 完全レスポンシブデザイン時のnarrow.css カスタマイズについて

5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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を直接カスタマイズしていますが、何か方法がございましたらご教授いただけると幸いです。

      日々精力的にご活躍のご様子、脊損でいろいろ大変かとお察ししますが、お体をじゅうぶんご自愛くださいませ。

    • #20601
      アバター画像わいひら
      キーマスター

      不具合などがあって、修正しないといけない時に、1箇所を修正すれば良いよう、まとめて書けるように、あえてそのようにした記憶があります。
      子テーマに!importantルールを使用して、スタイルを設定しても適用されませんか?

    • #20608
      matu
      ゲスト

      わいひら様、早速のご返信ありがとうございます。

      skin-template/style.cssで !importantを使用することで解決できました。

      欠点は、モバイルでは違う表示を行いたくてもできないケースが出てきますが、
      narrow.cssは本来、モバイルで使うのが主で、今回のようなPCでも使用するのはレアケースかもしれませんね。
      臨機応変に対応していきたいと思います。
      今後ともよろしくお願いいたします。

    • #20614
      アバター画像わいひら
      キーマスター

      欠点は、モバイルでは違う表示を行いたくてもできないケースが出てきますが、

      子テーマのmobile.cssは、確か最後に呼ぶはずだったので、モバイルでimportant指定すれば、そこでさらに上書きできたと思います。
      あと、たとえもしそれがだめだったとしても、CSSセレクタを長めに設定すれば、詳しく指定されてる方が優先されます。

    • #20619
      matu
      ゲスト

      失礼しました。
      importantを多用する習慣がなかったもので。

      おっしゃるとおり、skin-template/mobile.cssでも importantを指定することで、PC/モバイルそれぞれの表示ができるようになりました。

      お忙しい中、ありがとうございました!

    • #20627
      アバター画像わいひら
      キーマスター

      僕も出来れば、importantを使いたくなかったのですが、つい開発を楽にしたくて使ってしまいました;
      important指定や、ましてや多重指定は実際にあまり良い作法ではないと思います。
      いずれ直せればと思います。

5件の返信スレッドを表示中
  • トピック「完全レスポンシブデザイン時のnarrow.css カスタマイズについて」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)