子テーマのCSSが反映されないことがあります

PR 2017/8/16

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

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

投稿者

投稿
- 2017年8月16日 5:18 PM #55045
  やの
  ゲスト
  こんにちは。3日ほど前にテーマをインストールさせていただきました。ありがとうございます。
  
  現在デザインのカスタマイズを行っているのですが、子テーマのCSSの変更が反映されないことがあります。
  
  なお、キャッシュの削除は試しました。子テーマも有効にしていて、プラグインはまだ何も使用していません。
  
  今「続きを読む」をボタン風にしようと思いスタイルシート(style.css)へ下記のコードを書き込んでいますが、更新しても反映されません。
  
  ※参考サイト
  http://besak.net/entryread
```
.entry-read a{
color:#fff;
text-decoration:none;
font-size:14px;
background-color:#8ea679;
border:1px solid #8ea679;
border-radius:2px;
padding:3px 10px 3px 5px;
text-align:right;
}

.entry-read a:hover{
color:#fff;
text-decoration:none;
background-color:##8ea679;
border:1px solid ##8ea679;
}
```
  親テーマのCSSをみてみると「続きを読む」の箇所は下記のようになっており、いろんな要素のデザインを一括して指定しているように見受けられます。こちらとなにか関係があるのでしょうか。
  
  ↓親テーマの「続きを読む」箇所のCSS（？）
```
.hover-card .entry-read, .hover-card .category, .hover-card .related-entry-read, .hover-card .blog-card-title, .hover-card .admin-pv {
    color: #111;
    text-decoration: underline;
}
```
  いろいろ試してみたのですが解決せず、ご質問させていただきました。
  お分かりになる方がいらっしゃいましたらご回答よろしくお願いいたします。
- 2017年8月16日 7:22 PM #55046
  
  わいひら
  キーマスター
  
  とりあえずは、以下の確認項目はすべて試してみられましたか？
  [FAQ]WordPressテーマのカスタマイズで変更したCSSが反映されない
  
  上記記事の内容を全て確認して、それでも改善しないようであれば、実際のページのURLから、ソースコードをを見てみたいと、ちょっと原因はわからないかもしれません。
  
  親テーマのCSSをみてみると「続きを読む」の箇所は下記のようになっており、いろんな要素のデザインを一括して指定しているように見受けられます。こちらとなにか関係があるのでしょうか。
  
  これは、同じようなデザインを、一括で指定しているだけなので、特に関係はないと思います。
- 2017年8月16日 9:14 PM #55049
  Akira
  ゲスト
  テーマの設定で、「エントリーカード全体をリンク化」を有効にされていないでしょうか？
  
  ご指摘されている親テーマの「続きを読む」箇所のCSSは、「エントリーカード全体をリンク化」を有効にしないと指定されません。
  
  しかし、参考サイトの.entry-read aは、「エントリーカード全体をリンク化」が無効の場合の「続きを読む」の要素名です。
  「エントリーカード全体をリンク化」を有効にすると、「続きを読む」の要素名は.entry-readに変化します。
  
  もし「エントリーカード全体をリンク化」を有効にしていらっしゃるのなら、下記のようにCSSの優先順位まで考慮し要素名を変更しないといけません。
```
.hover-card .entry-read{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  background-color:#8ea679;
  border:1px solid #8ea679;
  border-radius:2px;
  padding:3px 10px 3px 5px;
  text-align:right;
}

.hover-card .entry-read:hover{
  color:#fff;
  text-decoration:none;
  background-color:##8ea679;
  border:1px solid ##8ea679;
}
```
- 2017年8月17日 7:19 AM #55052
  かうたっく
  ゲスト
  どこが反映していないですか？
  朝に確認したところ、CSSはどちらもキチンと反映されているようです。
  
  上がカスタマイズされた様子。下がカスタマイズ前の純正。
  http://netakiri.net/uploader/src/up0301.png
  
  続きを読むのリンクと、hoverのときの指定が同じになってます。同じ記載ならhover時のコードは不要です。変更したい場合に記入すれば良いかと思います❦
  
  #55045
```
.entry-read a{
color:#fff;
text-decoration:none;
background-color:#8ea679;
border:1px solid #8ea679;
}

.entry-read a:hover{
color:#fff;
text-decoration:none;
background-color:##8ea679;
border:1px solid ##8ea679;
}
```
  親テーマの記載
```
.hover-card .entry-read, .hover-card .category, .hover-card .related-entry-read, .hover-card .blog-card-title, .hover-card .admin-pv {
    color: #111;
    text-decoration: underline;
}
```
  .entry-readの指定ですが、すでにcolor・text-decorationの部分は子テーマで上書きしている。※CSSの優先順位が子テーマと同じであれば上書きされる。さらに現状子テーマでは.entry-read aとなって親テーマよりCSSの優先度が強い状態。
  って事で、何も問題ないです❦　カスタマイズしやすい仕様だと思います＾＾
- 2017年8月18日 7:40 AM #55058
  かうたっく
  ゲスト
  『続きを読む』のテキストを右サイドにやりたかったんですか？
  どこをどのようにしたいか、わからず見落としてました
```
.entry-card-content .entry-read {
  text-align: right;
}
```
  で効くようです。
  
  あと背景とborderは色を微妙に変えたり、hoverしたときの色を背景と逆するなどするとCSSの指定。例えば
```
.entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#66CDAA;
 border:1px solid #00ae73;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
}
 
.entry-read a:hover{
 color:#66CDAA;
 background-color:#fff;
}
```
  などと指定すれば、キチンと反映するきがします。※朝現在のコード
  
  何を悩まれているか伝え、それが回答者に伝わると解決が早いかもしれません。
投稿者

投稿