子テーマのスタイルシートcssが反映されない

PR 2016/11/5

このトピックには4件の返信、1人の参加者があり、最後にかいだにより7年、 5ヶ月前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2016年11月5日 12:34 AM #47082
  かいだ
  ゲスト
  はじめまして、かいだともうします。
  先日、Simplicity2を使ってみたいと思い、
  
  ・親テーマSimplicity2
  ・子テーマ2インストールしました。
```
#main {
    border-style: none;
    padding: 0;
}

#sidebar h3 {
font-size: 20px;
border-bottom: 5px solid #f7f7f7;
padding: 10px 0;
}
```
  現在上述のコードを子テーマstyle.cssに記載していますが、cssがうまく反映されません。
  解決策をご教授いただければと思います。
  
  動作不良時のガイドラインやgoogleで検索をかけ調査、以前の回答を調べるなどできることを全てためしましたがだめでした。
  ・ワードプレスのバージョンはバージョン 4.6.1
  ・グーグルクロム
  ・サイト： http://hoochan-life.com/
  
  ・ブラウザキャッシュを削除→試しました
  ・ファイルキャッシュプラグインを使用していたら停止してみる→自分のには入れていないです。
  ・エックスサーバーのmod_pagespeedをオフ
  ・プラグインをすべて停止しても同様の不具合が起きるか確認してみる→全て停止してみましたが変わらないです。
  ・テーマを一旦削除して再アップロードしてみる→試してみましたが変わらずです。
  
  宜しくお願い致します。
- 2016年11月5日 2:30 AM #47083
  
  Hidekichi
  ゲスト
  
  子テーマstyle.cssが読み込まれていないようなので、子テーマを有効にされていないのではなかろうかと思うんですが、どうでしょうか？
- 2016年11月5日 9:46 AM #47084
  
  かいだ
  ゲスト
  
  Hidekichiさん
  
  ご連絡ありがとうございます。
  そのようでした。ありがとうございます。
  昨日うまく反映されてなかったような…
  アドバイス本当にありがとうございます。
  
  もう一点ものすごくしょぼ的な質問かもしれませんが、
  Simplicity2の親テーマを利用し、
  Simplicity2の小テーマのstyle.cssに対して編集を加えている場合、
  
  “Simplicity2 child”を常に有効化して運用するという認識でよろしいでしょうか？
  
  ウィジェット編集や記事の投稿などをする際、
  Simplicity2の親テーマとSimplicity2の小テーマどちらを有効化したまま編集をすればよろしいのでしょうか？
  
  これらの使い分けに関して、
  うまく理解できていなくて…
  ご教授いただければと思います。
  
  宜しくお願い致します。
- 2016年11月5日 11:39 AM #47086
  Hidekichi
  ゲスト
  > “Simplicity2 child”を常に有効化して
  > 運用するという認識でよろしいでしょうか？
  
  その通りです。親テーマはあるだけで良いという事です。
  親テーマは信長の野望本体で、子テーマは信長の野望拡張パックです。
  
  親テーマを有効にした場合は、いわば信長の野望本体が動作するだけで、拡張パックは動きません。両方共入っている状態で拡張パックを起動させてはじめて拡張パックが動作するのと同じように、子テーマは親テーマの機能を利用して「本体を拡張している別テーマ」と考えるのが良いだろうと思います。
  
  例えばcssで言うと、
  1)親テーマの各々のcssが読み込まれます。
  ここで親テーマのcss全部が利用できます。
  
  2)その後子テーマが読み込まれます。
  子テーマでは、カスタマイズで必要なスタイルが親テーマの同セレクタ、同プロパティを上書きします。子テーマが後から読み込まれるためです・
  子テーマstyle.cssは最初何も書かれていません。が親テーマのセレクタ、プロパティを上書きすることで最終出力が子テーマのものとなって表示されるというわけです。
  
  親テーマの#main
  子テーマの#main
  
  このように読み込まれますのでPC上のcssは1枚のスタイルシートに、
```
#main { /*親テーマ記述*/
  font-size: 16px;
}

/*....中略....*/

#main { /*子テーマ記述*/
  font-size: 18px;
}
```
  このように複数書かれているのと同じことです。cssは同じセレクタプロパティなら後のほうが優先されますので、上記は、
```
#main {
  font-size: 16px;
  font-size: 18px;
}
```
  これと同義で、この#mainのfont-sizeは18pxで出力されます。
  
  親テーマのアップデートでこのプロパティを変えられたとしても子テーマの方が後から読み込まれるため、子テーマのスタイルが出力されます。
  ただし、親テーマのプロパティに例外的に!importantがつけられたとか、要素+class等でスタイルされたという場合は、子テーマ側では上書きできない場合があるので、それらの場合は、子テーマ側の記述が親テーマのスタイルを上書きできるように書き直ししないといけないのが注意点です。
- 2016年11月5日 4:12 PM #47091
  
  かいだ
  ゲスト
  
  Hidekichiさん
  
  詳しい解説本当にありがとうございます。
  無事cssの反映を行うことができました。
  また、親テーマと小テーマについて詳しく知ることができました。
  
  昨晩までわからなかったことが今日はスッキリしております。
  また分からない点がでてきましたら、質問させていただきますね。
  
  ありがとうございました！
投稿者

投稿