CG
(@du-bist-der-lenz)
見出しのフォントサイズの指定を固定値で決めてませんか。レスポンシブルというより、デヴァイスでの表示を分けましょう。
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) 」あたり怪しく感じます。なぜ、そのように幾通りも指定される意図がありますか。
自分でもよくわからず、カスタマイズしていくうちにこうなってしまいました…。
基本的にわからない事があるとネットで調べ、そこに書いてあるコードをコピペする、と言うような方法を繰り返していくうちに自分でもどのコードがどの部分に影響されているのかもわからなくなってしまいました。
必要のないものを消していきたいのですが、自分ではどれが必要でどれが必要ないのかもわからずこちらでご相談させていただいた次第でございます…。
もし、上記のコードで必要ないもの、スマホ表示に影響しているものがあればお教えください。
ちなみに「@media screen and (min-width: 30em)」を削除して見ましたが表示変わらずでした。
よろしくお願いいたします。
ただいま、上記に書いたコードを全てCSSから削除してみましたが、表示が変わることはありませんでした。
他の要因が考えられるとしたら何がありますでしょうか？
「外観」 > 「カスタマイズ」の追加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」や「h１」などのフォントの設定はこれからまた変更しても大丈夫でしょうか？
それと、私は常に固定ページ編集画面とFTPソフトを使って HTMLとCSSを編集しておりますが、そもそもこのやり方が間違いなのでしょうか？
今回、h１やh２などTypographyのスマホでの表示はrocketmartue様のご指示で修正できましたが、自分でアレンジした<div class=”font”>などの表示はスマホでの表示が変わらず大きいままでした。
見出しの表現をアレンジしたい場合など（漢字は大きくひらがなは少し小さくなど…）どのようにすればスマホでもその通りに表示されるのでしょうか？
知識のない人間で伝え方が不十分であると思いますが、もしご理解できるところがあればご教授お願いいたします。
「Typography」でフォントの設定をすると、子テーマのstyle.cssよりも優先されてしまうので、今回のようなことになります。一括指定する場合は便利かもしれませんが、いろいろカスタマイズしたいのならテーマの style.css で設定することをおすすめします。
私は常に固定ページ編集画面とFTPソフトを使って HTMLとCSSを編集しておりますが、そもそもこのやり方が間違いなのでしょうか？
テーマファイルをカスタマイズする場合は、その方法でOKです。
見出しの表現をアレンジしたい場合など（漢字は大きくひらがなは少し小さくなど…）どのようにすればスマホでもその通りに表示されるのでしょうか？
ここは、WordPress のフォーラムです。CSSについては他をあたっていただくか、ご自身でCSSの知識を深めてください。
とりあえず、最初の問題は解決していると思いますので、トピックは解決済みにしておいてくださいね。
rocketmartue様、ishitaka様、CG様、
色々とご教授ありがとうございました。
皆様に少しでもお手間を取らせないようこれからも努力してまいります。
