WordPressにおけるCSSの適用について

質問

WordPressを勉強中です。
コメント欄のユーザー名にCSSをきかせられずどうしても斜体になってしまいます。
クラスのciteタグでfnのクラスがついていますが、どちらにもtext-decoration:none;が効きません。
colorやunderlineの指定は成功します。
その他の外のタグやIDやクラスに指定しても同様です。

これは私の環境だけでしょうか。
そうである場合の解決法はあるのか。
そうでない場合の解決法はあるのか。

わかる方お願いします。

回答No.1

tracer · ベストアンサー

WordPressに限ったことではないですが、既存のページを編集するのにスタイルがどの用に継承されているかを確認するのは重要です。
たとえば、例に上がったciteタグについてのclassはどこに記述されているのか。そういったことが分かれば、該当する箇所を直接編集するか、あるいはスタイルを上書きする記述を行えばいいということが分かります。この方法は、WordPressの範疇を超えて、汎用的に編集ができます。

CSSカスケードの状態を確認するのに、FirefoxのFirebugというアドオンを使う人が多いかもしれません。
また、ChromeやSafri、Operaにもブラウザデフォルトの機能で、CSSを追いかける機能があります。
一度試してみてください。

お礼

ありがとうございます。
現在はChromeの要素の検証の見方に苦労しており、解決には時間がかかりそうです。

回答No.2

naokita

上位セレクタや詳細度の問題です。
どう変更してるのかわかりませんので、
貴方の参考URLやソース提示が無ければ誰も何も出来ませんよ・・・

<div id="comments">
ですか？それなら

#comments cite.fn{
font-style:normal !important;
text-decoration:none !important;
}

リンクアンカーなら
#comments cite.fn a{
font-style:normal !important;
text-decoration:none !important;
}
です。

!importantは、元指定や詳細度が不明な為の優先処置なので、
削除しても問題なければ削除。

<div id="comments">でなければ、
#commentsを削除しなければいけませんが、その他の部分も適応されます・・・

お礼

書いていただいたコードを適用しましたがうまくいきませんでした。
現在Chromeで要素を検証していますが、見るとMatched CSS Rulesには

i, cite, em, var, address, dfn {
font-style: italic;
}

などとあるので

i, cite, em, var, address, dfn {
font-style:normal !important;
text-decoration:none !important;
}

としましたが効きませんでした。
Inherited fromの内容も引用して

font-style:normal !important;
text-decoration:none !important;

を適用しているのですがやはりこれもうまくいきません。
まあ、のんびりいきます。ありがとうございました。