【はてなブログ】健康診断とモバイルフレンドリーテストに引っかかりました【レスポンシブデザインのフォント】
平成生まれだと思って油断していたのですが、健康診断のある値が基準値未満でした。
調べると基準値より上だと病気っぽいですね。一応お医者さん受診しなければならぬ。。。
よくわからないのですが、近いうちに整形外科行ってきます。
モバイルフレンドリーテスト
ブログのデザインを変えました。
デザイン作る方ってすごいなーと思います。ただはてなブログは、そのままレスポンシブデザインにするとGoogleさんのモバイルフレンドリーテストに合格しないのでちょっとだけcssをいじる。(挫折した過去の記事はこちら: 筋肉痛 - ニート♀が体脂肪率18%を目指すブログ(2015/4/28))
画面サイズが680px以下のサイズの時にフォントサイズを小さくしないという設定をしました。
/* Responsive: yes */
@media screen and (max-width: 680px){
p{font-size:100%;}
ul,ol,li,dt,dd{font-size:100%;}}
見栄えのためにブログのデザインの多くは、フォントサイズが80%くらいに設定されています。これは画面サイズが大きいパソコンのブラウザ標準のサイズだと文字が大きすぎて不格好だからです。でもこれがスマホになると話は別で、スマホはブラウザ標準のフォントサイズが一番読みやすいサイズだったりします。(パソコンも一番読みやすいサイズにしてくれよと思わなくもないですね)
googleさんは優秀なので、スマホで読みにくいんだけど!と教えてくれます(ありがた迷惑や)(これでスマホの検索位置を変えるという話さえあったりする)
はてなブログのデザインcssに手を加えることで、PCサイトの綺麗なデザインをそのままスマホにも適用できるんです!(ドヤァ)
上に書いたコードをcssに追加すると文字が小さいというエラーが表示されなくなります。わーすごい(棒読み)
地味に時間がかかったので記事にしました! もし使いたい人はどんどんコピペして下さい笑
【関連記事】他にもいろいろ取り組んでおります→記事下のはてなスター取った!表示速度の改善に向けて - ニート♀が体脂肪率18%を目指すブログ(2015/5/23)