ワードプレスの見出し装飾に以下の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の文字が縦書きになる
-
CSSでボックスのheightが0になる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSで3分割した背景画像を配置...
-
Media Queries 4 で 非推奨とな...
-
HTMLのiframeの入れ子について
-
中点「・」の改行について
-
div内に外部のurlを表示させたい
-
CSS上での計算を行うためのルー...
-
W3Cのソースコードの検証サービ...
-
画像リンクの下に文字を付けた...
-
border-style:solidで文字がずれる
-
テキストボックスの高さを可変...
-
CSSと<dl><dd>で間隔をあけて1...
-
<li>の黒い点を消したい。
-
【CSS】ヘッダーの高さが不明の...
-
CSSでborderの指定を解除する記...
-
CSSだけで、テーブルにスクロー...
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報