【GEN 様】ヘッダにタイトルの色や枠が出てしまいます。

フロントページとブログページのヘッダに、タイトル(h1)の飾りの枠のラインがど真ん中に出てきてしまっています。
消すにはどうしたらいいんでしょうか?
お知恵をよろしくお願いします。


>GENさま
ご相談ありがとうございます。

原因はいくつかありますが、一番は以下のようなCSSがあることです。

h1 {
    margin: 0 0 1.5em;
    padding: 0.5em;
    border: 2px solid #B92A2C;
    font-size: 0.5em;
    font-weight: normal;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

これだと、サイト内のh1すべてにこのスタイルが適用されます。

ヘッダーにあるh1(サイトタイトルだと思います)にも適用されています。
しかし、ヘッダー上のサイトタイトルはdisplay:none;で非表示にされており、結果枠線だけが出ている状態ですね。

改善例としては、「ヘッダー以外(記事コンテンツ部分だけ)」にh1のスタイルを適用することです。

HTMLは部分部分でheader、div、sectionといったタグで区切られています。それらのタグにはclass や id で名前が付けられ、CSSでレイアウトや装飾がされています。画像はブラウザの開発者ツール(F12キーや右クリック>ソースを表示 / 検証 などで出てきます。)でHTML構造を確認したものです。

例えば .page-content h1{} にすればサイドバー含むページ内のコンテンツ部分。
(page-content とクラス名がつけられたタグの中に入っている全てのh1)

.post-header h1{} ならおそらく記事・固定ページ共通で、タイトルにあたる部分だけにスタイルを追加することができるでしょう。
(post-heagerというクラス名が付けられたタグの中に入っているh1)

参考にして頂ければ幸いです。

おすすめコンテンツ

コメントをどうぞ

  1. ありがとうございます。
    サイト制作を依頼していた人間が途中で飛んでしまい自力でやらざるを得なくなってしまったんです。
    勉強してみます。

    1. なるほど、そういった経緯がありましたか。
      自力でやるリソース(学習コスト+運用コスト)が負担であれば、やはり運用や修正を依頼した方が良いかと存じます。今後サイト制作をやりたいということで、勉強が必要という事であればご自身でやられるのも良いでしょう。

      こういった軽微修正であればそれこそ数千円から可能ですので気軽にご相談下さい。

  2. ご丁寧なご回答ありがとうございます。
    申し訳ありません、私かなりな素人なのでどのような手順でどう変えたらいいか今一つ理解できかねます。
    もう少し噛み砕いていただけると助かります。
    お手数おかけして申し訳ありません。

    1. >藤原様
      コメントありがとうございます。
      申し訳ありませんが、こちらはかなり噛み砕いた内容になります。
      h1に対するCSSはご自身で行われたのですよね?(外観>テーマ編集 で管理画面から編集 または、テーマのstyle.cssをFTPソフトでダウンロードし、編集・アップする方法)
      であれば、記事内にあるようにh1{}の形を例に挙げたような形にすればそれで解決するかなと思います。

      ご質問の内容は、WordPressとは直接関係ありません。「WordPress ○○」で調べるよりは、「CSS 優先順位」「開発者ツール 使い方」「HTML クラスorID」などを調べた方が良いかもしれません。
      1.HTMLの成り立ちを理解する
      2.CSSの指定の仕方、優先度について勉強する
      3.ブラウザの開発者ツールなどで、カスタムしたい部分がどのようなHTML構造になっているか確認する
      といったことができるようになるのは大切です。

      今回はズバリな解答を出していますが、上記の理解が無いと他のカスタマイズをする際にまたつまずく恐れがあります。
      是非、HTMLやCSSについて勉強してみてください。カスタマイズの幅が広がります。
      本記事の内容が理解できるようになれば、基本的な部分は理解できていると思います。

      参考にして頂ければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。