子テーマにコードを打っても、日付が消えない

PR 2015/7/14

このトピックには4件の返信、2人の参加者があり、最後にHidekichiにより11年、 3ヶ月前に更新されました。

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

投稿者

投稿
- 2015年7月13日 4:21 PM #29277
  けっけ
  ゲスト
  全ページ更新日を消し、
  固定ページだけ日付を消すために、
  以下のコードを子テーマのスタイルシートに打ちました。
```
/*更新日を消す*/
.post-meta .post-update{
display:none;
}

/*固定ページIDが17のページの日付を消す*/
#post-17 .post-meta{
display:none;
}
```
  これでモバイルには思った様に反映されたのですが、パソコンで見た場合に反映されなかったので、親テーマのスタイルシートの最後に打ち込んだら、うまくいきました。子テーマで反映できないのは何か原因があるのでしょうか？親テーマに設定しておくと、更新のたびにメンテナンスしなければならないため不便です。アドバイスを宜しくお願いします。
- 2015年7月13日 5:02 PM #29283
  
  わいひら
  キーマスター
  
  親テーマで、うまく反映されたのであれば、通常なら子テーマでも反映されるはずです。
  
  おそらく、古いブラウザキャッシュなどが残っていたのではないかと思います。
  キャッシュを削除してみてください。
  キャッシュの削除方法は、以下に載っています。
  動作不良時のガイドライン
- 2015年7月13日 5:30 PM #29285
  Hidekichi
  ゲスト
  子テーマでメディアクエリを指定して、スタイルを行ったらどうでしょうか？
  
  どのような場合にどのようにしたいかを考えておく必要がありますが、PCに限らず(ブラウザの)画面幅が1024px以上である場合であれば
```
@media screen and(min-width: 1024px){
  //質問のcss
  .post-meta .post-update{
    display:none;
  }
}
```
  こう書くと、画面幅が1024px以上の場合のみ.post-meta等がdisplay:noneになります。
  
  個人的には、ユーティリティcssみたいのを作って、jQueryで付けたり消したりが簡単かと思うんですけれども、post-metaの場合、アクセスしてすぐの画面内に見える部分かと思うので、一瞬ちらつきがあったりする可能性があります。
  
  方法的には、子テーマjavascript.jsに、
```
(function($)){
  $(function(){
    $("目的のセレクタ").addClass("show"); //基本形

    /*画面サイズに対応させるためには以下のように画面幅を指定します
    //画面幅が1024px以上の時
    var w = window.innerWidth ? window.innerWidth : $(window).width();
    if ( w > 1024px ){
      $("目的のセレクタ").addClass("show");
    } else {
      $("目的のセレクタ").hasClass("show").removeClass("show");
    }

    */
  });
}(jQuery)
```
  cssは以下の感じ
  あらかじめ、目的のセレクタをcssで非表示にしておく
```
目的のセレクタ{
  display: none;
  /*
  あるいは、opacity: 0;
  この場合はshowの方もopacity: 1に変更
  */
}

.show {
  display:  block;
}
```
  消してあったセレクタは、表示する.showを付けられることでもちろん表示されるようになります。それを取れば元々は消してあったのですから非表示になります。
  
  こういう感じもイケるかも知れません。参考までに。
- 2015年7月13日 9:26 PM #29296
  
  けっけ
  ゲスト
  
  わいひらさん
  早速、ご回答いただきありがとうございます。キャッシュの削除でちゃんと反映されました。
  ありがとうございます！
  
  Hidekichiさん
  丁寧にご回答いただきありがとうございます。順番にキャッシュの段階で解決してしまったので、今回は事なきを得ましたが、また困った際には、いただいたアドバイスをもとに対処したいと思います。
  ありがとうございます！
- 2015年7月14日 7:24 AM #29309
  Hidekichi
  ゲスト
  ちなみに、元々消してある(display:none)のセレクタがdisplay:blockのクラスを付けると表示されるのはなぜかと言いますと、cssは後から書いたものが有効になるのです。
  
  例えば、
```
.test{
  font-size: 16px;
  font-size: 1rem;
}
```
  とあったとします。すると、remがわからない古いブラウザは16pxを認識してremを無視します。新しいブラウザはもちろんremがわかるので16pxを1remで上書きするのです。
  もし、同じセレクタに後から違う設定を書いた場合、
```
.test {
  position: absolute;
}

.xyz{
  display: block;
  border-radius: 5px;
}

.test {
  position: relative;
}
```
  このように何か書いている時に既に書いたのを忘れて、また新たに設定を書いてしまった場合、上記ならposition: relative; が有効になります。親テーマを子テーマが上書きすると言うような話は、cssをいつ読み込んでいるかがポイントになるんだろうと思います(見てないんで確証はありませんが多分そう)。
  
  headerでスタイルシートを読み込む時、
  親テーマ.css
  子テーマ.css
  モバイル.css
  と読み込むとすると、最優先されるのはモバイル.cssになります。なので、同じセレクタに設定を書く場合、子テーマを再優先にしたいのであれば、
  親テーマ.css
  モバイル.css
  子テーマ.css
  このように読み込ませる必要があるわけです。cssやらjavascript、phpもそうですが、基本書かれているのが上から下へと実行されるので、下に書いてあるのが最新情報と言うことで、同じ要素に設定がしてある場合、一番下に書いてあるのが最優先ということになります。
  
  たぶんね（笑）
  何かの参考までに。
投稿者

投稿