モバイルの見出し(h2)のフォントサイズが変更出来ない

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › モバイルの見出し(h2)のフォントサイズが変更出来ない

7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #25501
      goo
      ゲスト

      わいひら様
      お世話になっております。

      mobile.cssを編集しましたが、モバイルの見出しの大きさが変更できません。
      ソースは下記を修正したのですが、間違っているのでしょうか?

      .entry h2 a {
      font-size: 18px;
      }
          ↓
      .entry h2 a {
      font-size: 24px;
      }

    • #25507
      アバター画像わいひら
      キーマスター

      「見出し(h2)」というのは、一覧リストのタイトル部分ということでよろしいでしょうか?

      「見出し(h2)」といえる部分は、投稿・固定ページにもあるもので。

      あと、カスタマイザーの設定状況によっても変わってくるので、設定が反映されていないページのURLがあると助かります。

    • #25509
      hidekichi
      ゲスト

      間違ってはいないと思いますが、mobile.css以外に、例えば親テーマ、もしかしたら子テーマにもentry h2 aの設定があるのかも知れません。あやしいのはresponsive_pcとか、なんか色々と(笑)

      モダンブラウザを利用されているのであればweb開発環境に、それぞれのentry h2 aの設定が表示されると思うので、各ファイルを調べる必要があると思います。
      その際には、entry h2 a以外にも、entry h2や、h2、更には.entryの親要素とかも調べる必要があるかも知れません。

      更に、もうひとつ考えられるのは、idやクラス以外にも、各ヘッダ(h1,h2,h3…)と設定があると思います。そういうのもサイズとかは継承されたりするかも知れませんのでチェックが必要です。

      前にどこかでわいひらさんがスタイルの優先順位を書かれていたと思いますが、子テーマ優先だったと思うので、mobile.cssではなく、子テーマにentry h2 aを書くというのも方法だろうと思います。

      今回はpxで指定なので、あまり関係はないかと思いますが、emやremと言う基準となるサイズのn倍と言うような指定の単位には注意が必要なことがあります。フォント以外にもline-height等。
      一応参考として、自分のサイトであれですがSimplicityを改造してみたこのページの真ん中辺りに、見出し「フォントのサイズについて」の部分でlist表示しているフォントがemやremの倍率指定でどうなるかのサンプルがあります。
      サイズの継承とかのサンプルとしてお役に立てれば。

      ※ 上記ページはテーマをsimplicityに変えた時あたりの内容なので若干情報が古いので、すっ飛ばして下さい(笑)

    • #25519
      goo
      ゲスト

      わいひら様
      ›「見出し(h2)」というのは、一覧リストのタイトル部分ということでよろしいでしょうか?
      はい。投稿ページの一覧リストのタイトル部分です。

      hidekichi様
      色々アドバイスありがとうございます。
      mobile.cssではなく、子テーマにentry h2 aを書く方法も試してみたのですが、上手くいきませんでした。
      親要素とかも調べてみたいと思います。

    • #27830
      シュウ
      ゲスト

      返信としてはちょっと遅いですが、こちらのフォーラムで「優先順位」で過去の回答例を検索したところ、
      こちらのスレッドが上位に来ました。

      お役に立てる内容かと思いましたので
      報告させていただく内容は同様ではないのですが、
      不具合報告を兼ねて横レス失礼します。

      gooさんの件は親mobile.cssに@importで読み込まれているnarrow.css内に

      .entry-card h2 a.entry-title, .related-entry h4 a {
      line-height: 100%;
      font-size: 17px;
      }

      の記述があるため、mobile.cssに

      .entry h2 a {
      font-size: 24px;
      }

      を書いても、aに付いているクラス指定(.entry-title)の分、
      narrow.cssの優先度が上がるため、mobile.css内のfont-size指定が有効になりません。
      (gooさんの変更されたい箇所は.entry、.entry-card両方のクラス指定があります)

      解決方法としては子テーマのmobile.css内に

      .entry-card h2 a.entry-title{
      font-size: 24px;
      }

      もしくは

      .entry h2 a.entry-title{
      font-size: 24px;
      }

      とすることでおそらく変更が可能かと思います。

      個人的な本題ですが、私の場合、PC表示の一覧ページ内にある記事個別ページへリンクのa:hover属性の
      色を変えたかったのですが、!importantを使う以外、解決不能でした。

      原因は、index内のheadタグ内のstyleタグで

      a:hover, #new-entries a:hover, #popular-entries a:hover, .wpp-list a:hover, .entry-read a:hover, .entry .post-meta a:hover, .related-entry-read a:hover, .entry a:hover, .related-entry-title a:hover, .navigation a:hover, #footer-widget a:hover, .article-list .entry-title a:hover {
      color: (カスタマイザーで指定の色);
      }

      書かれてしまっているため、子テーマや親テーマの外部CSS(style.cssなど)で

      .entry-read a:hover {
      color: #ffffff;
      }

      などと指定しても優先順位が上がらないため変更できませんでした。
      (!importantを使えば当然ですが変更されます)

      gooさんの場合は、外部CSSのnarrowと外部CSSのmobileの競合でしたが、
      私の場合は、head内のStyleと外部CSSのため、!important以外に解決策がありません。

      ご存知かとは思いますが、カスケーディングルールでいくらセレクタを並べても、
      外部CSSよりhead内のものが優先されるため、
      head内のスタイルでクラス指定されており、それが比較的汎用的なものである場合、
      上述のように!importantを使うか、(PHP内の)htmlタグ内に直にinline Styleで指定しないと変更できません。
      後者の場合はテーマのバージョンアップで変更される恐れもあるため、あまり推奨できません。
      なので!importantが推奨となります。
      個人的には!importantの使用は原因究明を困難するなどの理由により、
      使用は必要最低限に留めるべきと考えています。

      できるだけテーマ利用者にデザイン変更できるように設計されていると思いますが、
      その方針で行けば、headタグ内のStyle指定は、

      body{…}
      a:hover{…}

      などのタグのみの指定に留めるか、
      強制的にデザイン変更をさせたくない部分のみをガチガチに指定してやるくらいにしないと
      外部CSSで変更できない箇所を生んでしまいます。

      もしくは、カスタマイザーで指定する色を専用のクラス(.custom-color-linkhover、.custom-color-linktextなど)にしてhead内にclass(or id)で記述し、
      該当箇所全てにclass(or id)指定する方法を取られたほうがよろしいかと思います。

      カスタマイザーで変更できる色指定の部分などのindex内styleタグの記述方法を再考いただけると幸いです。

      なお、!importantを使うべし、という方針なのであれば無視してください。
      使用は控える方がいいというのはあくまで個人的な理由ですので。

    • #27841
      アバター画像わいひら
      キーマスター

      >gooさん
      レスを見落として返信できていませんでした。申しわけないです。

      >シュウさん
      僕も、!important出来る限り使うべきではないと思います。
      ただ、narrow.cssは開発当初、通常のモバイル表示と、完全レスポンシブ表示のスタイルで@importに呼び出し共有利用させたくて、つい楽をしたくて使ってしまったら、ズルズルとそのままになってしまいました。
      取り除こうと思えば、取り除けるのかもしれませんが、Simplicityは機能が多くて、どこで表示の不具合が出るかわからないので、そのまま放置になっています。
      (「修正&全ての機能での動作確認する時間」と「修正したことによるメリット」を天秤にかけたら、開発中の今はそこまでする必要はないかなと思っています。)
      Simplicityは、自分の仕事の合間に趣味で開発している無料テーマです。あまり完璧なものを求められても辛いところがあります。

      head内のStyleと外部CSSのため、!important以外に解決策がありません。

      セレクターを並べても解決できないのはインラインスタイルではないでしょうか?
      CSS3 – CSSセレクタの優先順位の計算方法 – Qiita
      HTML内のヘッダーにCSSを書いたとしても、優先順位の高いCSSセレクタを書けば上書きできるかと思います。
      実際、以下のように書くとちゃんと緑色でホバーされましたよ。

      .entry-read a.entry-read-link:hover{
        color: green;
      }

      あと、もしヘッダーに書いたCSSが変更できないのだとしたら、カスタマイザーでのCSS指定をやめて、子テーマのstyle.cssのみなどで変更すればよいのではないかと思います。

    • #27855
      シュウ
      ゲスト

      > わいひらさん

      現状動いているのを弄りたくないですよね。当方も経験がありますので十分すぎるくらいに同感です。
      手間がかかるだけだと思うので、narrow.cssは今はそのままでよいのではないでしょうか。
      デザイン変更でCSS分析も一からソースを見ることもありませんし、場所と記述がわかりますから、対処もできると思いますので。

      セレクターを並べても解決できないのはインラインスタイルではないでしょうか?

      まったくその通りです。head内が上書きできないとなると、私の記述自体がおかしいですよね。
      私は何を勘違いしたのでしょう。。。お恥ずかしい話です。

      aタグにもクラス指定がありましたね。こちらは完全に見落としておりました。
      「a.entry-read-link:hover」と、擬似クラスとクラスを併記してコーディングすることが個人的にあまりないことから、失念していたためと思われます。

      ご丁寧に対応策もありがとうございます。お手数をお掛けしました。
      そちらで試したいと思います。

    • #27869
      アバター画像わいひら
      キーマスター

      そうなんですよ。
      現状それで大した問題なく動いていますし、修正したからといって、喜んでいただける人も、おそらく片手で数えるくらいと思ったら、リスクを冒してまで修正する気力がなくて^^;
      やはり、最初に面倒くさがって使ってしまったことが、悔やまれます。

      いえいえ、僕もCSSも優先順位について理解を深める良い機会になりました。
      ID指定は100ポイントになるので、「#list .entry-read a:hover 」とかの方がより優先度が高くなるかもしれません。

7件の返信スレッドを表示中
  • トピック「モバイルの見出し(h2)のフォントサイズが変更出来ない」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)