プロが教えるわが家の防犯対策術!

ワードプレスの見出し装飾に以下のcssを反映したいのですが、できないです

現在バックグラウンドのテーマ編集に以下のcssコードを入力し
ワードプレスの編集画面にて、
<h3 class="heading4">コンテンツ</h3>

と入力し反映されなかったです。

何が問題なのでしょう?

ちなみに、同様に以下のクラスは反映されました。

<h3 class="news_headline1">コンテンツ</h3>

以上よろしくお願いいたします。
━━━━━━━━━━━━━━━━━━━━━━━━━━
.heading4{
position:relative;
padding-left:30px;
border-bottom:2px solid #ccc;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}

.heading4:before{
content:'';
height:15px;
width:3px;
display:block;
background:#00A8FF;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
position:absolute;
top:-3px;
left:8px;
}

.heading4:after{
content:'';
height:3px;
width:13px;
display:block;
background:#00A8FF;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
position:absolute;
top:1px;
left:5px;


}
━━━━━━━━━━━━━━━━━━━━━━━━━━

A 回答 (1件)

CSSとは、カスケーディングスタイルシート(Cascading Style Sheets)の略です。

この名称にもなっているカスケーディングの仕組みは、CSSのもっとも重要な仕組みですが、それは理解されていますか??
.heading4{・・・プロパティ・・・}の{}内のプロパティなんかより、はるかに重要で基本ともなる部分です。いわゆる「セレクタ」「詳細度」「継承」などです。
 その要素を指定するセレクタをすべて読み取って、詳細度が高いもので上書きし、同じ詳細度なら後述な物で上書きする。さらに、優先順位--読者の最重要宣言>著者の最重要宣言>著者の宣言>読者の宣言--
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 これはCSS2.1ですが、セレクタが追加されただけで、CSS3も大差ありません。この二項目を、そんなプロパティなんて手を出す前に確実に身につけましょう。
 指定したスタイルが適用されないのは単純にこの問題じゃないかと。
★web開発でしたら開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の豊富なfirefoxお使いでしょうが、そのアドオンに Firebug( https://addons.mozilla.jp/firefox/details/1843 )があります。それでどのように継承されているかがわかるはずです。

 class="heading4",class="news_headline1"のようなクラス名はつけないほうが楽ですよ。単純に
div.section h3{}と、本文(section)中の見出し3要素h3はと指定するほうが楽ですし、HTML書きなおす必要もない。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!