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

雑記
スポンサーリンク

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

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

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

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

見出しが出ない理由

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

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

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

なぜか、コピペだけじゃうまくいかなかった・・・

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

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

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

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

わたしのブログ、表示でないよー!

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

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

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

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

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

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

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

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

うちは「Microsoft Edge」なので
表示したいページで【F12】を押せばOK

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

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

  1. 丸のマーク部分をクリック
  2. WEBページで気になる部分をクリック
  3. HTML・CSSの構成部分がクリックした部分に関する表示に変わる
  4. HTML・CSSの構成をチェック

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

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

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

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

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

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

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

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

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

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

これでやっと表示が出来た!

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

気づかなかった理由

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

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

なんでHOMEに出て、記事に出んの?

茶色のラインが、h2・h3の指定になっています。

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

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

  • 【 HOME画面の見出し装飾 】
      h2.entry-card-title.card-title.e-card-title
  • 【 サイドバーの仕切り装飾 】
      h3.widget-sidebar-title.widget-title
  • 【 記事の見出し2 】 .article h2 
  • 【 記事の見出し3 】 .article h3 

ややこしいなぁ。。。

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

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

\わたしの気力を底上げしてくれている神様のブログ/

コメント

  1. はっちゃん より:

    初めまして。
    最後にリンクを貼っていただき嬉しくてコメントさせていただきました^^

    カスタマイズは慣れないうちは戸惑うことが多いですよね。
    デベロッパーツールを使われているのがさすがです!
    これはCSSのセレクタ確認に必須と言えるほど便利なので活用してみてくださいね。

    セレクタの書き方はデベロッパーツールで調べてスタイルの入っている部分のクラス名だけを指定すれば大丈夫ですよ~。

    記事内見出しなら .article h2
    記事一覧タイトル .entry-card-title
    サイドバー見出し .sidebar h3

    お互いにCocoonでのブログライフを楽しみましょうね^^

    • しばもり しばもり より:

      はっちゃんサマ
      初めまして!
      コメントありがとうございます(*’▽’)
      turicco.comを見つけることが出来たから、まだブログを続けれらています。
      本当は私の方からご挨拶をせないかんところを、、、
      まさか、見ていた居ているなんて、嬉しすぎて固まりました(笑。

      修正できたのも、はっちゃんサマのブログのおかげです。
      デベロッパーツール自体を知らなかったので、とても参考になりました。
      各クラス名、メモに残しておきます!

      いま、サイト型に挑戦していたのですが
      仕上がりが綺麗すぎて、アドセンス広告を差し込めなくなるジレンマと
      ブログ内容との低さのズレが気になって悩んでます(;^_^A

      最新のブログデザインもとっても素敵です!!
      これからも参考にさせてくださいm(__)m

  2. はっちゃん より:

    しばもりさん、こんにちは~。

    だいぶ遅くなってしまったのですが、紹介していただいた少しばかりのお礼の気持ちで、こちらのページを当サイトのリンク集に掲載させていただきました。

    今後ともよろしくお願いいたします^^

    • しばもり しばもり より:

      はっちゃんさん、お久しぶりです!

      返信遅くなってすいません💦
      リンクありがとうございます、嬉しいです。

      どんどんおしゃれで可愛く見やすくなっていくはっちゃんさんのブログに憧れるばっかりです(^_^;)
      PCを使わなくなり、スマホひとつでのカスタマイズはなかなか難しいですね。でも、完全に諦めたわけではないので!
      また参考にさせてください、よろしくお願いします(*´꒳`*)