サクジツ日記。

汚部屋がカンバスに変わるまで。生きた証と彩りを踊りとともに描きたい。節約・貯蓄・シンプリスト計画・バレエ・ダンス。そして日々のこと。

【アドバイスを受けて】レスポンシブデザインでのスマホの文字の大きさを変える

スポンサーリンク

この記事をシェアする


自分のブログがどのように読まれているか、客観的に見られないことも少なからずあると思います。


ブログのこの部分がじつは気になっていた!という場合もあるだろうし、第三者から指摘されないと気づかないなんてことも。


ブログがどのように見られているか、良い機会があったので書きとめておこうと思います。

人気ブロガーさんのTwitter企画

先月の連休、はてなブログの人気ブロガー、めんおうさんのTwitter企画に参加することができました。


「3連休 感想祭り、あなたのブログを読んで率直な感想をツイートします」に応募して、サクジツ日記にアドバイスをいただきました!

(めんおうさん、ブログを読むのがすき、と仰っていて。だからこその企画でもあるのですよねっ)

めんおうさんのブログ
めんおうブログ

めんおうさんのTwitter
めんおう@めんおうブログ (@mennousan) | Twitter


その時のツイートはこちら


アドバイスを受けて

指摘いただいたハンバーガーメニューやサイドバーなどブログ内の設定については、週に2回程度、PCが使える日に少しずつ直していきました。


自分でも気になっていた文字の大きさ。
ブログ名を「40歳ひとり、貯金したひ。」から「サクジツ日記。」に変更したタイミングで、ブログデザインをblankからSOHO - テーマ ストアへ変えて、ブログ全体の文字が小さくなってしまったようです。


わたしもスマホでブログを読む時、文字の大きさが小さいとすごくストレスになるんですよ。(まだ老眼ではないが)


調べてみたらSOHOはPCが16px、スマホが14.5pxでした。


Google推奨のフォントサイズが16pxらしいので、PCだとクリアしていますがスマホは小さい。


いまどきスマホから閲覧される人のほうが多いと思うのだけど、どうしてそんなに小さくするの・・・


レスポンシブデザインでの文字の大きさを変える


そこで疑問が。
レスポンシブデザインだけど、スマホだけ文字を大きくできるの?それにはどうしたらよいの?

※ちなみにレスポンシブデザインだから大きさを変えられないとか、普通に変えられるとか、その辺りのことはわたし自身、全然よくわかっていません。


以下の方法でできるそうなので試してみました。


こちらのコードをコピーして、

/* 文字サイズと行間 */
@media screen and (max-width: 768px) {
/* 画面サイズ 768pxから適用 */
.entry-content p {
font-size:○○px;
line-height:◻︎◻︎em;
margin: 0.3em 0;
}

[デザイン]→[カスタマイズ]→[デザインCSS]にペーストするだけ。
注)元のコードを消したり間に入らないように注意しながら、一行空けて下に貼りつけました。

  • font-sizeは文字の大きさで○○の部分を書き換えます。わたしは16pxにしました。
  • line-heightは行間で◻︎◻︎を1.8emに設定してみました。


参考にさせていただいたブログはこちら
【はてなブログ】レスポンシブデザインでもスマホの文字の大きさを変える方法|コピペで簡単! - マジPEACE。
さくらいさまありがとうございました。


ずっと気になっていた文字の大きさ問題は無事解決しました。
文字のサイズが小さいなーと感じられる方がいらっしゃいましたら、ぜひ設定してみてくださいませ。


その他ブログの内容について


ブログの内容については、まだまだ未熟なのでこれは記事を重ねていくごとに改善できればと思っています。

  • 初めて読む人にもやさしく
  • 自分が感じたことをもっと詳しく


読者目線で人気ブロガーさんからご意見いただけるのはとてもありがたいので、またこういった企画がTwitterなどであれば参加したいです。



めんおうさん、ありがとうございます。
めんおうさんのブログ↓


よい意味で人間くさくて、愛情と生命力あふれるめんおうさん、すき(*´-`)