h2タグを赤くして目立たせてみました。(WordPressで本文のみにh2を適用させる方法)

WordPressのCSSいじるのって大変。

h2を赤くする

h2をCSSで赤くするのって、Wordpressの外観→CSS編集からいじることが出来るんだけれど、h2だけを指定してしまうと、トップページのh2タグが付いているところも全部反映されちゃいました。

h2タグを今のように薄い赤にしたかったんだけれど、ただCSSにh2{ color: #赤 ・・・って設定するとTopページのh2も全部赤になってしまって少し困った。

 

そこで、外観→テーマ編集から個別ページに割り当てられているclassを探してみると、.entry-innerがそれに該当した。

その時のCSSはこのような感じ。

.entry-inner h2 {
margin: 2em 0 1em 0;
padding: 10px 20px;
background: #FF4141;
font-size: 150%;
font-weight: bold;
color: #FFF;
text-align:center;
}

 

大半が誰かが作ってくれたCSSをコピーしたいじっただけなので、うろ覚えだったけれどなんとか編集できた。

少しだけ賢くなった気がする。

そして、CSS HTMLの本を1年前に買って未だにこなせていないという現実。

何度もやろうとは思っているんだけれど、なかなかやれない。

やったほうがブログのデザインをよりいじれるから、良いんだろうけれど・・・。

とりあえず、Todoリストに書いて壁に貼り付けておく。

 

次はh3

h3もたまーに使うので、設定しておくとしよう。

.entry-inner h3{
margin: 0 0 1.5em;
padding: 5px 20px;
border-left: 7px solid #B92A2C;
border-bottom: 1px dashed #B92A2C;
font-size: 1.143em;
font-weight: bold;
}

 

▼積読している本