Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 子テーマのCSSが反映されないことがあります
- このトピックには4件の返信、2人の参加者があり、最後にかうたっくにより6年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
やのゲスト
こんにちは。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; }
いろいろ試してみたのですが解決せず、ご質問させていただきました。
お分かりになる方がいらっしゃいましたらご回答よろしくお願いいたします。 -
わいひらキーマスター
とりあえずは、以下の確認項目はすべて試してみられましたか?
[FAQ]WordPressテーマのカスタマイズで変更したCSSが反映されない上記記事の内容を全て確認して、それでも改善しないようであれば、実際のページのURLから、ソースコードをを見てみたいと、ちょっと原因はわからないかもしれません。
親テーマのCSSをみてみると「続きを読む」の箇所は下記のようになっており、いろんな要素のデザインを一括して指定しているように見受けられます。こちらとなにか関係があるのでしょうか。
これは、同じようなデザインを、一括で指定しているだけなので、特に関係はないと思います。
-
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; }
-
かうたっくゲスト
どこが反映していないですか?
朝に確認したところ、CSSはどちらもキチンと反映されているようです。上がカスタマイズされた様子。下がカスタマイズ前の純正。
http://netakiri.net/uploader/src/up0301.png続きを読むのリンクと、hoverのときの指定が同じになってます。同じ記載ならhover時のコードは不要です。変更したい場合に記入すれば良いかと思います❦
.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の優先度が強い状態。
って事で、何も問題ないです❦ カスタマイズしやすい仕様だと思います^^ -
かうたっくゲスト
『続きを読む』のテキストを右サイドにやりたかったんですか?
どこをどのようにしたいか、わからず見落としてました.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; }
などと指定すれば、キチンと反映するきがします。※朝現在のコード
何を悩まれているか伝え、それが回答者に伝わると解決が早いかもしれません。
-
-
投稿者投稿