今回はブログのテンプレートにかかわるお話です。
モバイルフレンドリーが重要だとかなんとか聞いたことありますか？
ブログやサイトを作成したときにPCからのデザインはばっちりでもスマホやタブレットで見た場合には表示が崩れたり文字が細々してみにくかったりするのならばそのブログ（サイト）はモバイルフレンドリーではありません。
今すぐにブログのレスポンシブwebデザイン化を計りましょう！
モバイルフレンドリーとは
GoogleさんのSearch Consoleの機能でそのサイトがモバイルフレンドリーかどうかのテストすることも可能です。
モバイルフレンドリーテスト
審査内容は主にこの３点です。
・クリック可能な要素の近さ
・サイトの幅が画面に合っていない
・文字が小さくなりすぎている
この３つをクリアしていればモバイルフレンドリーだと判定されます。
ブログがレスポンシブwebデザインに対応しているか確かめるには
一番簡単かつ確実なのはスマホで自分のブログを開いてみることです。
狭い画面でも使いやすい配置にブログのテンプレートが変化し、ユーザビリティが損なわれていなければそのブログはモバイルフレンドリーと言えます。
次に簡単なのはブラウザをフル画面モードを解除してウインドウ幅を狭めてみることでもブログのデザインの変化が確認できます。
この方法の難点はいまの幅が何ピクセルなのかわからないこと。
最小幅まで縮めればだいたいスマホの画面くらいなのですが確実ではありません。
スマホを使わずPCだけできっちりとした見え方を確認するには、GoogleChromeを使います。
デベロッパーとは元々IT用語ではないのですが開発者、開発業者としての意味合いがあります。
つまり開発時に使うツールなのでテンプレートの調整の時に見え方を確認したり、デザインを見ながらダイレクトに幅を調整したりすることができるGoogleChromeの機能のひとつです。
デベロッパーツールにはたくさんの機能があり、ひとつは見ているページのソースを解析することも可能です。
気になるブログなどがあればどうやってこのデザインにしてるのか？などを知ることができるので何かと便利なツールなのです。
デベロッパーツールでモバイルでの見え方を確認する方法
PCとモバイルといってもパソコンかスマホを見分けてテンプレートを変化させている訳ではありません。
単純に画面またはウィンドウの幅を読み取り変化させているのです。ブラウザの幅を狭めるだけで見え方が変わるのはそういう理屈からですね。
今回は見え方だけの話なのでツール画面の左上のタブレットマークみたいなところをクリックします。
左側の画面が変化しましたか？
これで画面の幅のテストモードに入りました。
終了する時は同じように先ほどのタブレットマークをクリックするかツール画面右上の×ボタンを押したら終了します。
モバイルの画面を機種ごとの幅に合わせるには
まずはネットで調べたい機種の画面のサイズ（ポイント数）を調べます。
ポイントとピクセルとあると思いますがポイントの方になります。
実際の数値の例を出すと、
iPhone7は（375×667）
iPhone7plusは（414×736）
iPhoneに関しては7と6、7plusと6plusはそれぞれ画面サイズは同じなので元々デベロッパツールにはいってる6と6plusを選ぶだけでかまいません。
Android系の端末に関してはあまり入っていないので自分で調べて入力してください。
端末一覧にない数値の画面サイズにするには
まずは画面サイズの一覧の一番下の「Edit」を選択します。
ずらっとデバイス名が並んでいるので目的のものがあればそのチェックボックスをオンにするだけで一覧に出てきます。
「Width（横幅）」「height（縦幅）」この３カ所を入力すればOKです。
入力し終わったら「add（加える）」ボタンを押しましょう。
今回はiPad Airの横持ちした場合の設定を追加しました。
いかがでしたか？
参考になりましたでしょうか。
それではまた次回！
