フォントサイズのレスポンシブについて
初めまして、まるです。
WPは何度か使用していて、Nishiki proのテーマは今月から使い始めた初心者です。
「h1~h6の見出し」と「テキストのフォントサイズ」のレスポンシブについて詳しい方がいらっしゃいましたら
助言よろしくお願いします。
PC、タブレット、スマートフォンそれぞれのデバイスで表示されるフォントサイズをレスポンシブ対応したいのですが、
うまくいきません。「テキスト」、「見出し」共に全て同じフォントサイズになってしまいます。
chromeのデベロッパーツールからもフォントサイズを確認しましたが、変化がありませんでした。
画像のレスポンシブのみが正常に働いている状態です。
🔸試してダメだったこと
・メディアクエリのmetaタグ<meta name="viewport" content="width=device-width, initial-scale=1.0">を[一般設定]⇨[ヘッダーにスクリプトを追加]に入力し、cssを[カスタマイズ]⇨[追加css]に@media screen and (max-width:480px)〜を入力
・[ブロックエディター管理]⇨[見出し]⇨[高度な設定：追加 CSS]にも@media screen and (max-width:480px)〜を入力
・[カスタマイズ]⇨[デザイン]⇨[見出し]⇨h1~h6の設定を全て[なし]に
・試しに「Snow Monkey」のプラグインを追加してみたが、特に変化なし。
↪︎追記です Snow Monkeyの表示設定（ウィンドウサイズ）でデバイス毎の表示・非表示は出来ました。
助言よろしくお願い致します。
7 Replies
投稿ありがとうございます！
円滑なコミュニティー運営のため #利用ルール を守って投稿してください。
また、何らかのエラーを報告する場合は、再現操作を動画キャプチャして貼り付けてください。
認識のズレも減り、回答も得られやすく、スムーズにサポートが進められます。
ご協力お願いします🙏
投稿ありがとうございます。
先に解決方法の一例を案内しますね。
１）ダッシュボードから「Nishiki Pro」→「一般設定」を選択
２）「追加CSS」のタブを選択
３）追加 CSS（両方）の入力欄に CSS のコードを書いて保存
以上で反映されます。
添付の画像を参考ください。
Nishiki Pro は、見出しと段落（テキスト）両方にレスポンシブ対応済みなのですが、何らかの理由で変更したい場合は、上の画像のように、CSS 変数で定義されている値を上書きすると希望通りの動作になるかなと思います。
あとは・・・
上記ですが、すでに Nishiki Pro テーマ内に最適化されたコードが自動で追加されていますので、あえてviewprtのmetaタグを追加する必要はありません😀
開発者様ご連絡ありがとうございます。上記を参考に試してみます🙏
はい、わからない内容があればまた聞いてください。プラグインも使わなくてもテーマの機能だけでできると思いますー。
@imamura（開発者） は レベルが 21 に あがった！