
ワードプレスの見出し装飾に以下の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件)
- 最新から表示
- 回答順に表示
No.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書きなおす必要もない。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
IEの表示だけおかしい
-
HTMLのタグでスクロールバーを...
-
float横並びにしたブロックの中...
-
画像イメージの上下左右、欲し...
-
ウインドウを小さくするとbody...
-
背景が下まで表示されないんです。
-
form input テキストを上下中央...
-
余分な縦スクロールバーが出て...
-
CSS3で角丸写真にシャドーを付...
-
Tableレイアウトで寸分の狂い無...
-
css初心者 フレックスボックス...
-
CSSで角丸テーブル
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
トップに戻るボタン、スマホだ...
-
floatすると一部、段になってし...
-
iframe 内の画像を自動縮小させ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
余分な縦スクロールバーが出て...
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
div内に外部のurlを表示させたい
-
画像イメージの上下左右、欲し...
-
table周辺の隙間をなくしたい。
-
divで囲まれたpaddingの指定を...
-
CSSで背景画像を一番下にもって...
-
HTMLのiframeの入れ子について
-
footer を横幅いっぱいに広げる...
-
CSSでボックスのheightが0になる
-
テーブル内の画像をマウスオー...
-
スクロールボックスを中央に配...
おすすめ情報