サポート » テーマ » twentyseventeen でのh1 h2 のフォントサイズがレスポンシブ されない

  • 解決済 pokerio

    (@pokerio)


    どうかご教授ください。
    当方ワードプレスに関してはまだまだ素人なのでどうかご理解の上アドバイスいただければと思います。
    ただいまテーマtwentyseventeenをカスタマイズしておりますが、カスタマイズしていくうちに、いつの間にかPC上でのh1やh2(見出し)などのフォントサイズがスマートフォンでも表示されるようになりました。
    説明の仕方が曖昧でよくわかりにくいかと思いますが、PC上で見出しh1で約20文字程度の見出しを2行で表示させているのですが、スマートフォン(iPhone)での表示が明らかに1文字のフォントサイズが大きすぎて4行で表示されます。
    素人なりに、function.php やスタイルシート(両方とも子テーマ)などを開発者ツールで確認もしましたがわからず困っております。
    わかりにくい説明だと思いますが、お分かりになる方どうか良いアドバイスをご教授願います。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • CG

    (@du-bist-der-lenz)

    見出しのフォントサイズの指定を固定値で決めてませんか。レスポンシブルというより、デヴァイスでの表示を分けましょう。

    pokerio

    (@pokerio)

    CG様
    アドバイスありがとうございます。

    「見出しのフォントサイズの指定を固定値」とはどこを扱えばよろしいでしょうか?よろしいでしょうか?
    フォントの大きさを変えたくて、cssに下記のコードを貼り付けております。

    /*記事タイトルの文字*/
    h1 {
    font-size: 24px;/*大きさ*/
    font-size: 1.5rem;/*大きさ*/
    font-weight: 300;/*太さ*/
    }
    @media screen and (min-width: 30em) {
    h1 {
    font-size: 15px;/*大きさ*/
    font-size: 1.875rem;/*大きさ*/
    }
    }
    @media screen and (min-width: 48em) {
    .single-post .entry-title,
    .page .entry-title {
    font-size: 26px;/*大きさ*/
    font-size: 1.625rem;/*大きさ*/
    }
    }
    h1 {
    color: #333;/*色*/
    font-size: 24px;/*文字大きさ*/
    }
    @media screen and (min-width: 30em) {
    h1 {
    font-size: 15px;/*文字大きさ*/
    }
    }
    @media screen and (min-width: 48em) {
    h1 {
    font-size: 15px;/*文字大きさ*/
    }
    }
    /*記事本文の文字*/
    body,
    button,
    input,
    select,
    textarea {
    color: #333;/*色*/
    font-size: 15px;/*大きさ*/
    font-size: 0.9375rem;/*大きさ*/
    font-weight: 400;/*太さ*/
    line-height: 1.66;/*行高*/
    }
    @media screen and (min-width: 30em) {
    body,
    button,
    input,
    select,
    textarea {
    font-size: 18px;/*大きさ*/
    font-size: 1.125rem;/*大きさ*/
    }
    }
    @media screen and (min-width: 48em) {
    body,
    button,
    input,
    select,
    textarea {
    font-size: 16px;/*大きさ*/
    font-size: 1rem;/*大きさ*/
    line-height: 1.5;/*行高*/
    }
    }

    自分でもなんとかこの問題を解決しようとネットで調べCSSに書き込んでおります…
    そのお陰で、今となってはどのコードがどの役割を果たしているかもわからず途方に暮れていました。

    あとは気になる所で下記のコードも同じstyle sheetに書き込んでおります。

    /* Typography */

    body,
    button,
    input,
    select,
    textarea {
    font-size: 16px;
    font-size: 1.2rem;
    line-height: 1.5;
    }

    .entry-content blockquote.alignleft,
    .entry-content blockquote.alignright {
    font-size: 13px;
    font-size: 0.8125rem;
    }

    何か気づかれる点がございましたらよろしくお願いいたします。

    CG

    (@du-bist-der-lenz)

    幾通りも指定されていますが、最終的には優先順位になります。「@media screen and (min-width: 30em) 」あたり怪しく感じます。なぜ、そのように幾通りも指定される意図がありますか。

    pokerio

    (@pokerio)

    自分でもよくわからず、カスタマイズしていくうちにこうなってしまいました…。
    基本的にわからない事があるとネットで調べ、そこに書いてあるコードをコピペする、と言うような方法を繰り返していくうちに自分でもどのコードがどの部分に影響されているのかもわからなくなってしまいました。
    必要のないものを消していきたいのですが、自分ではどれが必要でどれが必要ないのかもわからずこちらでご相談させていただいた次第でございます…。
    もし、上記のコードで必要ないもの、スマホ表示に影響しているものがあればお教えください。
    ちなみに「@media screen and (min-width: 30em)」を削除して見ましたが表示変わらずでした。
    よろしくお願いいたします。

    pokerio

    (@pokerio)

    スマホのキャッシュは常にクリアしております。

    pokerio

    (@pokerio)

    ただいま、上記に書いたコードを全てCSSから削除してみましたが、表示が変わることはありませんでした。
    他の要因が考えられるとしたら何がありますでしょうか?

    Toshiyuki Honda

    (@rocketmartue)

    「外観」 > 「カスタマイズ」の追加CSSに、CSSを追加していませんか?

    Toshiyuki Honda様

    「外観」 > 「カスタマイズ」のCSSよりも、FTPソフトからCSSをカスタマイズすることの方が多いです。

    モバイル時にテーマを切り替えてたり(Jetpack のモバイル用テーマなど)しませんか?
    問題を確認できる URL をお知らせいただくと解決が早いかもです。

    プロフィールに記載されているサイトで、Easy Google Fonts を使用されていますが、
    同じプラグインを使用されている場合、
    「外観」>「カスタマイズ」>「Typography」>「Default Typography」の設定を Reset してみてください。
    スタイルシートは詳細度が同じ場合、読み込んだ順が後の方が適用されます。
    テーマの style.css をいくら修正してもプラグイン等の設定で、<head>~</head>内に出力されているCSSがあれば、そちらに上書きされてしまうことはよくあります。

    ishitaka様、テーマはtwentyseventeenのみで切り替えなどは行なっておりませんでした。

    rocketmartue様。
    言われた通り「Default Typography」のリセットを行なった所スマホでの表示も元に戻りました!ありがとうございます。

    ご質問なんですが、「Typography」で「p」や「h1」などのフォントの設定はこれからまた変更しても大丈夫でしょうか?
    それと、私は常に固定ページ編集画面とFTPソフトを使って HTMLとCSSを編集しておりますが、そもそもこのやり方が間違いなのでしょうか?
    今回、h1やh2などTypographyのスマホでの表示はrocketmartue様のご指示で修正できましたが、自分でアレンジした<div class=”font”>などの表示はスマホでの表示が変わらず大きいままでした。
    見出しの表現をアレンジしたい場合など(漢字は大きくひらがなは少し小さくなど…)どのようにすればスマホでもその通りに表示されるのでしょうか?

    知識のない人間で伝え方が不十分であると思いますが、もしご理解できるところがあればご教授お願いいたします。

    「Typography」でフォントの設定をすると、子テーマのstyle.cssよりも優先されてしまうので、今回のようなことになります。一括指定する場合は便利かもしれませんが、いろいろカスタマイズしたいのならテーマの style.css で設定することをおすすめします。

    私は常に固定ページ編集画面とFTPソフトを使って HTMLとCSSを編集しておりますが、そもそもこのやり方が間違いなのでしょうか?

    テーマファイルをカスタマイズする場合は、その方法でOKです。

    見出しの表現をアレンジしたい場合など(漢字は大きくひらがなは少し小さくなど…)どのようにすればスマホでもその通りに表示されるのでしょうか?

    ここは、WordPress のフォーラムです。CSSについては他をあたっていただくか、ご自身でCSSの知識を深めてください。

    とりあえず、最初の問題は解決していると思いますので、トピックは解決済みにしておいてくださいね。

    rocketmartue様、ishitaka様、CG様、

    色々とご教授ありがとうございました。
    皆様に少しでもお手間を取らせないようこれからも努力してまいります。

14件の返信を表示中 - 1 - 14件目 (全14件中)
  • このトピックに返信するにはログインが必要です。