ワードプレス 記事内の段落デザイン変更のカスタムCSSについて

Question

各記事の段落のデザインを変更したくて、AddQuicktag　と　Simple Custom CSS　のプラグインを新規にダウンロード、有効にし始めました。

開始タグを　<h2 id="danraku2">　に設定し、カスタムCSS側もそのように h2#danraku2{ }して、サンプル等を{ }へ貼り付けました。（下記）
h2#danraku2{
margin: 0 0 1.5em;
padding: 0.8em;
border-left: 7px solid #2ab9af;
border-bottom: 1px dashed #777777;
font-size: 1.143em;
font-weight: bold;
}
このようなシンプルなデザインは反映するのですが、少し変わったデザインではどうすれば良いのでしょうか。

例えば下記のような場合、h2から始まる所が３ヶ所ありますが、全てを h2#danraku2{ や h2#danraku2:beforeと始めれば良いのでしょうか。いろいろ試しているのですが反映せずに困っています。宜しくお願い致します。

h2{
position: relative;
color: #111;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.7em;
border-bottom: 3px solid #B92A2C;
}

h2:before{
content: "";
position: absolute;
background: #d48789;
top: 0;
left: 0.4em;
height: 12px;
width: 12px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

h2:after{
content: "";
position: absolute;
background:#d26466;
top: 1.0em;
left: 0;
height: 8px;
width: 8px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}

アドバイス宜しくお願い致します。

Comments

[Lhankor_Mhy]

どうしたいのかがご提示いただいておりませんので、「このようにしたい」のように想定しているゴールをご提示ください。『反映せず』とは具体的には、h2 が color: #111; にならない、とかそういうことでしょうか？　また、『いろいろ試している』とのことですが、そのコードをご提示いただけますか？　それとも、現在ご提示いただいているコードが試されたコードでしょうか？

[maueda]

説明不足で申し訳ございません。実際にサンプル通りにはならず、デフォルトのままの表示になったままです。実際にやりました作業としましては、h2 と {　の間に　#danraku2　を各先頭の３ヶ所に加えてみましたが、そのやり方は違うのでしょうか。

[maueda]

追記：　h2:before{　や　h2:after{　の場合も　h2のあとに　#danraku2:before などで大丈夫なのでしょうか。それらも試してみたのですがデフォルトのままでした。

[Lhankor_Mhy]

『サンプル通りにはならず』とは具体的にはどういう現象ですか？ CSSファイルのテキストを編集しても保存ができない、という意味でしょうか？　それとも、HTMLの表示に変化が見られない、ということでしょうか？

[maueda]

カスタムCSS側にコード（質問へ提示済み）を貼り付け、h2の後ろに#danraku2を挿入(AddQuicktagにもその名で設定した為)。保存をしページを開いて確認するもデフォルトの「見出し２」と同じような太文字の表示になってしまいます。

Answer 1

CSSでのセレクタの指定方法によって、挙動が変わります。

例えば、
h2{}とするより、h2.harahetta{}とすると、後者が優先されます。

要素名だけだと、もともとあったCSSと喧嘩しちゃって反映されてないのでは？

反映される優先順位ですが
style="" > # > . > 要素名
だいたい、こんな感じです。　タグに直接書く、style=""最強ってところですね。

仮にもし、h2.harahetta{}として、喧嘩しちゃったらdiv h2.harahette{}などと足して行ってスタイルが適用されるようにパワーアップも可能です。

Comments

[maueda]

ありがとうございます。
h2 の箇所が、h2{ の他に　h2:before{ と h2:after{ があるのですが、３ヶ所とも同様に #danraku2 挿入するのでしょうか。

h2#danraku2{
margin: 0 0 1.5em;
padding: 0.8em;
border-left: 7px solid #2ab9af;
border-bottom: 1px dashed #777777;
font-size: 1.143em;
font-weight: bold;
}
上記のコードの段落は反映するのですが、長いコードになると太字になるのみでして。
説明が下手で申し訳ございません。