サイドバーウィジェットの見出しにの書式が適用されない

Simplicityの特徴 フォーラム 不具合報告 サイドバーウィジェットの見出しにの書式が適用されない

  • このトピックには4件の返信、1人の参加者があり、最後に うみかにより3年、 10ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #36326
      うみか
      ゲスト

      わいひらさま みなさま

      お世話になっております。

      こちらのブログでサイドバーウィジェットの見出しに
      <h3>の書式が適用されていないので質問します。

      わいひらさんのこちらの記事を参考に
      Gppgle Chromeのページ要素の確認で
      サイドバーウィジェットの見出しの書式を確認すると、
      見出し<h3>が設定されているのだと思います。
      (この時点で勘違いでしたらすみません。)

      サイドバーウィジェット見出し部分の要素
      <h3 class=”widget_title sidebar_widget_title”>サイト内検索</h3>

      サイドバーウィジェットの見出しとして使いたい書式は
      <h3>の見た目なのですが、
      実際にはわいひらさんのsimplicityに関するサイト(このサイト)同様、
      見出しの下に線は表示されません。

      もともとの<h3>で設定されているとおり、
      見出しの下に線が表示されない原因として
      考えられることはどのようなことがありますか。

      小さなことでも構いませんので、
      何か思い当たる点など、
      ご教授いただけますと幸いです。

      よろしくお願いいたします。

      【サイドバーウィジェット見出しの見た目を変えたいページ】
      http://togoshicchosyacho.com/

    • #36329
      Hidekichi
      ゲスト

      言われている内容としては、記事中のh3を利用した時のように、サイドバーのh3に下線が表示されないのは何故かという質問でしたら以下のような内容です。

      記事中のh3は例えば以下のようになっています

      .article h3 {
        font-size: n;
        color: xxx;
        border-bottom: 2px solid red;
      }

      これは、どういう意味かと言いますと、h3は元々ブラウザにそのスタイルが設定されています。
      それを更にsimplicityのスタイルシートでh3で再定義してスタイルされています。その再定義されたh3を継承してページ全体にh3のスタイルが適用されています。

      しかしながらそうすると、h3のような汎用的なタグは、色々な場所で利用されますからスタイルを変更できません。そこでcssはその適用する範囲を決められるのです。
      どういうことかと言いますと、h3はページ内の全てのh3の元になるスタイルがまず適用されます。上記のように、.article h3と指定すると、.articleの中にあるh3というように定義でき、元のh3のスタイルを上書きしながらスタイルできます。

      つまり、

      
      h3 {
        font-size: 24px;
        color: blue;
        border: 1px solid red;
      }
      
      .article h3 {
        font-size: 18px;
        border: none;
      }

      こうあった場合、最終的に.articleの中のh3は、

      .article h3 {
        font-size: 18px; /*上書き*/
        color: blue; /*継承*/
        border: none; /*上書き*/
      }

      このようになります。よって、サイドバー内のh3にボーダーを入れたい場合は、

      
      #sidebar 適用箇所 h3 {
        border-bottom: 1px solid #333;
      }

      などとして新しく定義する必要があります。適用範囲が設定してある要素はその中でだけ有効です。h3単体に設定してあるスタイルは適用範囲で上書きするプロパテイがない限り継承されます。またcssは同じセレクタ、プロパティがあった場合、原則後で書いたものが優先されます。

      .何かしらのクラス {
        font-size: 18px;
        font-size: 14px;
      }

      こうあれば、この何かしらのクラスはfont-size: 14px;で出力されます。モニターにはその内容が表示されているわけですから、サイズが異なったらおかしいですよね。18pxと14pxが設定されているから16pxで表示しようかとか、重複しているから表示できないではなく、最後の設定が適用されるわけです。

    • #36331
      うみか
      ゲスト

      Hidekichiさま

      早速のご返答、ありがとうございます。

      大変お恥ずかしながら、
      『h3は元々ブラウザにそのスタイルが設定されています。』
      ということを知りませんでした。

      なるほど。
      WordPressの各Themeのstyle.cssなどで<h3>の定義をするのは、
      もともとあるスタイルの上書きをするという行為だったのですね。

      その基本的なことをようやく理解した上で、
      まずはHidekichiさんの書いてくださったとおり、
      子テーマのstyle.cssに以下の内容を追加しました。

      #sidebar widget_title h3 {
      border-bottom: 1px solid #333;
      }

      これでは、変化がありませんでした。
      Google Chromeでページ要素を見ながら作業していましたが、
      こちらも何も書き換わった様子がありません。

      該当する箇所の要素が
      <h3 class=”widget_title sidebar_widget_title”>サイト内検索</h3>
      であるため、
      以下のふたつの内容も試してみましたが結果は変わりませんでした。

      #sidebar sidebar_widget_title h3 {
      border-bottom: 1px solid #333;
      }

      #sidebar widget_title sidebar_widget_title h3 {
      border-bottom: 1px solid #333;
      }

      そこで、最後の手段、と思い、
      以下の内容に変更すると、
      ようやく見出しに下線が追加されるようになりました。

      #sidebar 適用箇所 h3 {
      border-bottom: 1px solid #333;
      }

      他の見出し<h3>と書式を合わせるため、
      最終的にはこの内容を子テーマのstyle.cssに加えました。

      #sidebar h3 {
      border-bottom: 4px solid #669966;
      }

      この結果、以下のように表示されるようになりました。
      https://goo.gl/r4Rp24

      とりあえず、したかったことは果たせたことになりますが、
      Hidekichiがご教授くださいましたように、
      要素の範囲を指定していないことに不安が残ります。

      現在の設定ですと、サイドバー内で<h3>を用いた場合、
      それがウィジェットの見出しではなくても
      この<h3>の設定が適用されるということですよね。

      今のところ、不都合は生じていませんが、
      スタイル、クラス、プロパティ、セレクタなど、
      もっと勉強をしなければ、と強く感じています。

      Hidekichiさん、
      こんなに右も左も分からないような素人にも
      何とかしたいことができるような
      時間と手間をかけた丁寧な説明、
      本当にありがとうございました。

    • #36334
      Hidekichi
      ゲスト
      #sidebar widget_title h3 {
      border-bottom: 1px solid #333;
      }

      > これでは、変化がありませんでした。

      何故そうなるかはとても簡単です。
      該当部分のセレクタは、

      [h3 class=widget_title sidebar_widget_title ]

      クラスがついています
      セレクタにはidとclassがあり、上記の場合クラスです。
      なので、h3は指定せずとも、

      #sidebar .widget_title {
        border-bottom: 1px solid #333;
      }

      これで良いかと思います。widget_titleの前にピリオドがあります。これがclassと言う意味です。#sidebarはIDです。IDはページにひとつだけ、複数の要素に同じスタイルを適用したい場合はclassを使います。
      さてここで、.widget_titleと指定した場合に、スタイルが変わらないことがあります。そんな時はデベロッパーツールの右側、プロパティのパネルでどういったセレクタが一番上にあるかを調べます。

      またそのプロパテイの各右上に、どのファイルから読み込まれているのかのリンクもあります。これらを調べて、同一のセレクタでプロパティの場合後から読み込まれたものが優先されるというルールから、どのファイルに追記するべきか、どのようなセレクタで書くべきかを調べて、上書きします。

      おそらく、.#sidebar .widget_titleでもh3を指定せずとも上書きできるのではなかろうかと思います。
      これのメリットは、その要素がh1であろうとh3であろうとはたまたpやdivであっても、.widget_titleは変わりませんから同じように適用できるということです。

      .#sidebar h3なら、要素がh3からh4やdivに代わった際にスタイルが外れてしまうことに注意して下さい。

    • #36340
      うみか
      ゲスト

      Hidekichiさま

      引き続いてのご考察、
      誠に感謝申し上げます。

      要素の設定、ならびにその読み込みには
      優先順位があることまでは知っていたのですが、
      では望む結果をそれ以外の部分に影響を与えずに
      どこを変更すればいいのか、となると
      まだまだ分からないことが多いです。

      今回、Hidekichiさんに教えていただくまで、
      IDとクラスを並べて指定できることは知りませんでした。

      これは実は、いつも頭を悩ませていた部分でもあります。
      IDはひとつのページで一度しか使えず、
      cssで条件を編集したクラスなら複数でも使って
      書式などの指定ができることは知っていたからです。

      さて、せっかくHidekichiさんに、
      今後の変更の可能性も考慮したコードの書き方を教えていただいたので、
      このように変更してみました。

      (子テーマのstyle.cssに追加)

      /* サイドバーウィジェットの見出し書式を設定する */
      
      #sidebar .widget_title {
          border-bottom: 4px solid #669966;
      }
      

      結果、見た目はこのように
      #sideberの<h3>全体を変更してしまったときと
      同じように表示させることができました。

      (今度はデベロッパーツールの右側も画像に含めてみました。
       しっかり一番上が書き換わっています!)

      http://goo.gl/qo3RWI

      今回、Hidekichiさんにいただいたご説明で、
      一気にできることが増えそうでとても嬉しいです。

      きっと、「やれやれ」と思うほど、
      何も分かっていない者相手に
      ここまで丁寧に、分かりやすく教えていただき、
      本当にありがとうございました。

4件の返信スレッドを表示中
  • トピック「サイドバーウィジェットの見出しにの書式が適用されない」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)