フリーランス チャレンジ!!

読者です 読者をやめる 読者になる 読者になる

フリーランス チャレンジ!!

週休4日制に俺はなる!

「このページはモバイルフレンドリーです」にしたたった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に送信するのでそこまでやったほうがいいかもよ!(但し、根拠なし)