「このページはモバイルフレンドリーです」にしたたった1つの事

ブログ

f:id:ksakae1216:20161231122703p:plain

みなさん、コウタロウです!!

 

明けましておめでとうございます!!?

今年もよろしくお願いします!!

 

さて、今年一発目は読者に対しての優しに関する記事です!!

 

  • 最後に
  •  

    私のブログはモバイルフレンドリーではなかった

    つい先日記事にしたんだけど、このブログはモバイルフレンドリーではなかった

    www.ksakae1216.com

     

    やっぱりブログ書いてる時点でたくさんの人に見てもらいたいよね

    そんな自分のブログがモバイルフレンドリーではないと悲しいね

     

    「モバイルフレンドリーでない」とは、モバイル端末(スマホやタブレット)で見るのに適してないということ

     

    最近、ブログを見る人は、PCよりもスマホの方が圧倒的に多い!!

    ブログにもよるかもしれないけど、スマホは全体の6割、7割にも登ります

     

    モバイルフレンドリーにした1つの事

    さて、モバイル端末で見ている人が多いのに、モバイルフレンドリーでないということはブログを見てくれる人に申し訳ない

     

    ということでGoogle検索しました!!

     

    すると下記サイトが引っかかった

    www.islog.jp

     

    早速参考にして自分のブログもユーザーフレンドリーにするぞ

    f:id:ksakae1216:20161231120619p:plain

    「3つの問題を修正してください」と書いてあるね

    最初の「クリック可能な要素同士が近すぎます」は大変そうだから

    2番目の「ビューポートが設定されていません」からやってみるか!

     

    ビューポートが設定されていません

    これは、ビューポートを設定すればOKです!

    developers.google.com

     

    上記サイトを見るとビューポートの設定することの大切さがわかります

    ビューポートを設定しないとモバイル端末などの画面が小さく、解像度が少ない画面だと文字がそのまま小さくなりとても見づらい画面になります

     

    さて、ビューポートの設定は簡単です

    はてなブログの場合、「設定」->「詳細設定」->「headに要素を追加」に下記を追記して下さい

    gistea2f907bae0839d0d63f5a4ba5351f12

     

    これで画面下の変更するボタンを押せばビューポートが設定されます

     

    設定後再びモバイルフレンドリーのテストページで確認すると

    f:id:ksakae1216:20161231122239p:plain

    おっ、「モバイルフレンドリー」になった!!

     

    最後に

    モバイルフレンドリーでないって怒られた時は、3つ修正しろって書かれてたけど、1件修正しただけでモバイルフレンドリーになったよ!!

     

    あと最後に「このページはモバイルフレンドリーです」の下に「GOOGLEに送信」ていうリンクがあるからそれ押すと、Googleに送信するのでそこまでやったほうがいいかもよ!(但し、根拠なし)

    コメント

    タイトルとURLをコピーしました