サポート » 使い方全般 » 子テーマでのレスポンシブデザインのカスタマイズ

  • 解決済 kanap

    (@kanap)


    子テーマを使ってCSSをカスタマイズしています。

    media screenの箇所で、親テーマで指定されているmax,minの数値を変更したいのですが、そのまま子テーマのCSSにコピペして数値を変えても、親テーマのほうも反映されてしまいます。

    例えば、min 600pxとなっているところを子テーマで700pxと上書きしても、700pxまでは子テーマの値が反映され、700~600pxまでは親テーマの値が使われてしまいます。

    子テーマで親テーマの値を変更するのはどうしたら良いのでしょうか?

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • CG

    (@du-bist-der-lenz)

    削っちゃうというか、親テーマ側のCSSを無効にして、全部子テーマに移してしまうのはどうかな。
    優先順をつけることは出来るだろうけど、一旦親テーマのCSS指定を読んだ後で、子テーマでやり直すのは遠回りなことしてると思います。

    スレッド開始 kanap

    (@kanap)

    親テーマは他のサイトでも参照しているので無効にはちょっとできないので、やはり子テーマ用に独自でCSSを作るしかないのですかね。

    子テーマを使う目的が、親テーマはそのままオリジナルの状態にしておき、変更箇所だけ修正して子テーマで適用させるものだと認識していましたので、子テーマでオリジナルのものを使っては子テーマを利用する意味がないと感じました。

    CG

    (@du-bist-der-lenz)

    説明が乱暴すぎましたね。子テーマ側から親テーマを参照しないようにすれば、親テーマはそのままオリジナルの状態で良いですよね。
    親テーマと子テーマを参照して、差分を算出しない分、要素の検証でもエラーが少なくなりコンパクトになると思います。子テーマ側のレイアウトが出来上がっている場合は、有効な方法だと思います。子テーマとして提供されているテーマは、子テーマ側で完結していると思いますよ。親テーマが同時にインストールされるのは、配布のルールだからですよね。

    こんにちは、

    子テーマを使う目的が、親テーマはそのままオリジナルの状態にしておき、変更箇所だけ修正して子テーマで適用させるものだと認識していました

    正しいと思います。

    styleの指定は、順序と詳細度で、上書きするという事しかできません。

    なので、レスポンシブ部分を変更する場合は、2重ブレースで囲まれた@media ルール全体を
    チャイルドテーマに、コピーして、それぞれの指定を上書きするしかない
    と思います。

    @media screen and (max-width: 800px) {
        body {
            background-color: lightblue;
        }
    }
    @media screen and (max-width: 800px) {
        body {
            background-color: green;
        }
    }

    importルールの変更は、メッチャ手間がかかると思います。

    私事ですが、自作のテーマでは、ブレークポイントを変更したいだとか、フルードレイアウトだけでいいとか、というカスタマイズを考慮すると、レスポンシブ設定の主要部分は、外部ファイル化して、スタイルのインポート自体を停止できるようにしています。

    (でも、完全には出来ないんです。私のテーマの例で行くとIE8は、レスポンシブを停止して、フルードだけで表示し、文書型もxhtmlにするとか、いろんなことをごにょごにょしているため、この変数値 falseにしたら、レスポンシブ停止!とか、かっこよいレベルまでいけない)

    どんなテーマをお使いなのか解からないので、断定的には言えませんが、もしかするとテーマのどこかに、そういったカスタマイズのための工夫が存在している可能性もあります。
    (あくまで、小さな希望ですが)

    スレッド開始 kanap

    (@kanap)

    すいません、こちらも説明を端折りすぎました。

    テーマはTwenty Twelveです。

    Twenty Twelveを親テーマとし、サイトA、サイトB、サイトCにそれぞれTwenty TwelveA、Twenty TwelveB、Twenty TwelveCと子テーマを作っています。

    【TwelveA】

    @media screen and (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }

    【Twenty TwelveB】

    @media screen and (max-width: 600px) {
        body {
            background-color: green;
        }
    }

    例えばこれでA,Bそれぞれに元のTwenty Twelveそのままで背景色のみ上書きすることができますが、変更したいのは「max-width」の数値です。

    Twenty TwelveAのみ600px⇒700pxにしたい場合、700pxで上書きしても、700pxまではそれが適用されますが、親テーマに600pxのコードがありますので、700~600まではその設定が適用されてしまいます。

    CSSについては親テーマを利用せずに独自で作れば解決できますが、それはスマートな方法であるのかを確認したかったのです。

    子テーマで変更箇所のみ上書きしていく方法は動きとして回りくどいかもしれませんが、親テーマのCSSはコードが長く複雑なので、最小限の変更のみ記載する方法は変更箇所が見やすく管理はしやすいと思いますし、テーマの更新でCSSが更新されることはまれかもしれませんが、その時も意識せずに更新できるというメリットがあると思います。

    @media screen and (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }

    を上書きするなら

    @media screen and (max-width: 600px) {
        body {
            background-color: red;
        }
    }
    
    @media screen and (max-width: 700px) {
        body {
            background-color: red;
        }
    }

    という意味で書いたのですが

    Twenty TwelveAのみ600px⇒700pxにしたい場合、700pxで上書きしても、700pxまではそれが適用されますが、親テーマに600pxのコードがありますので、700~600まではその設定が適用されてしまいます。

    @media screen and (max-width: 700px) {
    /*もろもろの設定*/
    }

    全体で一つの規則集合になるので、600pxのところで、上書きしないとどうにもならないとおもいますが

    スレッド開始 kanap

    (@kanap)

    ありがとうございます。カラム落ちの設定を変更したので苦戦しましたが解決しました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「子テーマでのレスポンシブデザインのカスタマイズ」には新たに返信することはできません。