サポート » 使い方全般 » 子テーマをつかっていてCSSをカスタマイズしたいときは?

  • 解決済 31.com

    (@31com)


    子テーマをつくるときに子テーマのstyle.cssに
    @import url(‘../twentyten/style.css’);
    のようにする、とどこのサイトにも書いてますが、
    cssをカスタマイズ場合は、どこを編集するのが妥当なのでしょうか?

    子テーマのstyle.cssに上書きでしょうか?

    以上、よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • @import url('../twentyten/style.css');

    は、デフォルトテーマを前提にしていると考えたほうがいいです。

    テーマは、複数のスタイルシートを持っていることもあり、

    @import url('../hoge/style.css');
    @import url('../hoge/reset.css');
    ....

    すべてのスタイルシートを、インポートルールで書くことになりますが、

    この書き方だと、style.cssを読み終わってから、reset.cssを読み込むようになり、表示までに時間がかかるようになるため、

    インポートルールを記述しなくても、自動的にロードするようになっているものもあります。

    見分け方はないので、一旦インポートルールを書かないで、ソースで確認するとか、レイアウトの崩れで判断する事になるんじゃないかと思います。

    cssをカスタマイズ場合は、どこを編集するのが妥当なのでしょうか?

    親のスタイルと同じ詳細度で書くと、スタイルルールの位置関係から、上書きされますので、必要な部分だけ、上書きするのが一般的です。

    トピック投稿者 31.com

    (@31com)

    nobita様

    ありがとうございます。
    >親のスタイルと同じ詳細度で書くと、
    の「詳細度」というのはどういう意味でしょうか?

    それから、他の会社がtwentythirteenでつくった弊社のサイトがあるのですが、
    style.cssを直接編集してありました。
    そこで子テーマをつくり、そのstyle.cssに、親のstyle.cssをコピーしました。

    ですが、ここで、twentythirteenを1.1=>1.3にアップグレードしたらデザインがくずれて
    (cssがあたってない?)、ヘッダ画像がもとのもの(オレンジ色の)になり、[box]がベタで表示されてしまっています。

    バックアップから復元してみたもの、ヘッダ画像オレンジと独自のと両方表示されています。
    で、子テーマを無効にしたら、正常にもどりました
    (結局テーマの更新はできていませんが)

    こういう場合、どういう手順で行えばよいのでしょうか?

    よろしくお願いします。

    ざっくりとしたものは、

    https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

    specificity CSS 等で検索してみてください。

    それから、他の会社がtwentythirteenでつくった弊社のサイトがあるのですが、
    style.cssを直接編集してありました。

    商業的な話なので、簡単にいい悪いは言えませんが、

    WordPress本体にしろ、プラグインにしろ、テーマにしろ アップデートが必ずあります。

    テーマのアップデートに対応しない作り方が行われたという事です。

    子テーマをつくり、そのstyle.cssに、親のstyle.cssをコピーしました。

    全部コピーして貼り付けると、おかしくなることは十分考えられます。

    変更された部分だけを、チャイルドに書き足して、後は微調整を進めるといいと思います。

    テキストエディタなどで 差分を取って、異なる部分を追加する作業が必要ではないかと思います

    例えば、秀丸エディタ等だったら、ウィンドウメニューの中に「ほかの秀丸エディタと比較」というところで、差分を見ることが出来ます。

    トピック投稿者 31.com

    (@31com)

    nobita様

    丁寧にご回答ありがとうございます。
    正直むづかしいですが、1つ1つ、お教えいただいたことを確認していきたいと思います。
    ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「子テーマをつかっていてCSSをカスタマイズしたいときは?」には新たに返信することはできません。