WordPressカスタマイズ｜見出しが出ない理由と修正方法

このブログは、WordpressのCocoonというテーマを使って書いています。

Cocoonは無料で使えるし、たくさんのスキンも公開されているので
PCが苦手な方でも問題なく素敵なブログを作れます。

その素敵スキンたちにサヨナラ宣言した無謀な初心者（笑。

さて、見出しは、どうなりました？

見出しが出ない理由

御覧の通り、なんとか修正出来ました！

わたしは素人なので詳しいことはわかりませんが
「たぶん、これじゃないかな」と思うことを書いておきます。

見出しがきちんと出なかった理由は
CSSのセレクタの記述の仕方が、悪かったことです。

表示されないときは、どうする？

親切な神様たちが、Wordpressで使える見出しのCSSを公開してくれています。

コードは、書き間違えると表示されないので
基本的には『コピペでOK！』にして下さっているのです。

各サイトで、コピペしてきたコードを追加CSSの記入欄に入れるだけで表示されます。

そんな方にも、神様たちは寄り添ってくれているので
『表示されないときの対処』方法も、きちんと書いてくれています。

• CSSのコードに余白やスペルミスはないかチェックしよう
• 見出しのリセットをする
• キャッシュの削除

これは難易度も低めの改善策です。

わたしは、これでもダメだったので自力で修正しました。

デベロッパーツールで、修正ポイントを探す

見出しのリセットをしても
キャッシュを削除しても、コピペし直しても

全く動かないので最後の砦に向かいます。

WEBページのHTML構成やCSSをデベロッパーツールで確認します。

デベロッパーページは、３構成になっていて
左：WEBページ、中央：HTML構成、右：CSS構成となっています。

デベロッパーツールを使ってみる　

右側のCSS構成のチェックを入れたり、外したりすると
WEBページに反映されるので、修正ポイントを探しました。

見出しが出ない原因を発見

最初にも書きましたが、原因は
CSSのセレクタの記述の仕方が、悪かったことでした。

セレクタとは、
「装飾をどこにかけるかを指定するもの」

見出し２でいうと、「　h2　」となります。

ｈ２だけの表示で指定してみると
線が出なかったり、空間が飛んでしまったりと
思ったような表示になりませんでした。

前にドットをつけても、変化なし。

次は「　.article h2　」で記載しました。

コードになると、こーなります。

.article h2{
color: #956f29;/文字色/
padding: 0.5em 0;/上下の余白/
border-top: solid 3px #433d3c;/上線/
border-bottom: solid 3px #433d3c;/下線/
font-size: 24px;/文字の大きさ/
}

こんなことにも気づくのがやっと・・・・（笑。

気づかなかった理由

言い訳・・・ですが、書いておきます（笑。

ｈ２から、なかなか動けなかったのは表示が中途半端に出ていたから。

茶色のラインが、ｈ２・ｈ３の指定になっています。

ここでは出てるから、間違ってないはずだ！と思いこんだのが時間かかった理由かも。

最終的に解決できたので、一応記録しておくと・・・

ややこしいなぁ。。。

住所がちゃんと書いてないと
荷物はちゃんと届かないよ、ってことですかね(;’∀’)

とりあえず、第一関門はクリアです！