みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

わかる方お願いします。

投稿日時 - 2011-11-06 21:51:32

QNo.7117673

暇なときに回答ください

質問者が選んだベストアンサー

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

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

投稿日時 - 2011-11-07 00:55:53

お礼

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

投稿日時 - 2011-11-14 00:46:12

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

上位セレクタや詳細度の問題です。
どう変更してるのかわかりませんので、
貴方の参考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を削除しなければいけませんが、その他の部分も適応されます・・・

投稿日時 - 2011-11-07 02:28:41

お礼

書いていただいたコードを適用しましたがうまくいきませんでした。
現在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;

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

投稿日時 - 2011-11-14 01:02:33

あなたにオススメの質問