モバイル端末向けの文字を大きくしたい！
こんにちは！もなかです。
この記事は、ブログ超初心者向けです。
同じくブログ超初心者の私が思った
「わからない！」や「どうしたらいいの？」
について、情報をシェアしていきたいと思います。
本日はこちらについて、解決していきます。
スマートフォンページの文字大きさを変更したい！
今日朝、Googleサーチコンソールさんより
「モバイル向けの字の大きさ小さすぎでしょ！」
と注意を頂きました。
私も以前から「文字ちっさ！」と思っていたので
今日変えてみたいと思います。
【結論】今回の変更方法
- CSSで文字の大きさを16pxへ変更
- それでも大きくならない場合
「レスポンシブデザイン」を解除
目次
現状
こちらになります。
小さくてとても見づらいです。
なんで文字が小さくなる？
- 文字の大きさ設定が小さすぎる
- ページテーマがモバイル向けになっていない
文字が小さいと疲れる理屈→脳が疲れる！
今まで文章の内容を重視していました。
私はライティング以前に
「脳が疲れるデザイン」だったことを反省。
「脳が疲れる」の詳細は
沈黙のウェブライティングを
読んで見てください(^▽^)/
沈黙のWebライティング ?Webマーケッター ボーンの激闘?〈SEOのためのライティング教本〉
- 作者: 松尾茂起,上野高史
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2016/11/01
- メディア: 単行本
- この商品を含むブログ (1件) を見る
こうしてみる！
- CSSに「16px」の設定ををつける
- テーマを変更してみる！
１．CSSに「16px」の設定ををつける
オークニズムさんのブログを参考にしました。
「うわっ…はてなブログ、読みにくすぎ…！」最大の原因はコレ - オークニズム
手順（☆下に参考イラストがあります）
- ダッシュボードへとぶ
- 左サイドバーのパレットマーク「デザイン」選択
- サイドバーの「スパナマーク」を選択
- サイドバー一番下の「{}デザインCSS」を選択
- コードの空白部分を押す
- コードの一番下に2行くらいあけて、7のコードを入力
- .entry-content p {font-size: 16px;}
- サイドバー上の「変更を保存する」を押しておしまい！
結果
あまり変わっていないような気がします。
これはテーマの方に原因があるかもしれません。
[写真比較]左→前 右→後
２．テーマを変更してみる！→レスポンシブデザインを外すへ変更！
レスポンシブデザインを外してみます！
少し前に設定した「レスポンシブデザイン」が
突然気になりました。
「レスポンシブデザイン」
スマートフォンでもPCと同じデザインで
ブログを表示します。
レスポンシブデザインを採用している場合
以下の理由で字が小さくなると思いました。
- レスポンシブデザインを採用する
- PCがサイドバーのデザインの場合
- スマートフォンでもサイドバーができる
- 本文の文字が小さくなる
そのため、レスポンシブデザインを
外してみることにしました。
手順（☆下に参考イラストがあります）
- ダッシュボードへとぶ
- 左サイドバーのパレットマーク「デザイン」選択
- サイドバーの「スマホマーク」を選択
- サイドバー一番下のスパナマーク「詳細設定」選択
- 「レスポンシブデザイン」のチェックマークを外す
- サイドバー上の「変更を保存する」を押しておしまい！
結果
少し大きくなりました！
まとめ
スマホデザインは何もない状態に
戻りましたが、文字は大きくなりました！
次回以降で「文字が大きいスマホ向けデザイン」を
探していきます！
ここまでお読み頂きありがとうございました。
