Google Chrome内臓のシュミレーターを使って、「はてなブログ」のスマホ表示をチェック
ブログの記事を書くとき、大半の方はPCを使っていることと思います。
スマホのデータ通信量の制限を受けるのもアホくさいですからねw
じゃぁPCでどうやって確認するかというと、スマホ表示のシミュレーターを使います。
フリーソフトなのでもありますが、わざわざインストールしなくても大丈夫!
Google Chromeを使っているなら、シミュレーターが内蔵されています。
Chrome右上のボタンをクリック→
その他のツール→
デベロッパーツール
で表示します。
URLアドレスバーにモバイルのURLを入力し、リロードします。
はてなブログの場合、URL+"?device=touch"を追加します。
こんな感じです
https://retiresaki.hatenablog.com/?device=touch
左上の選択肢から表示したいデバイス(スマホ)を選択するだけです。
・Responsive
・Galaxy S5
・Pixel 2
・Pixel 2 XL
・iPhone 5/SE
・iPhone 6/7/8
・iPhone 6/7/8 Plus
・iPhone X
・iPad
・iPad Pro
(追加したいデバイスなどの編集)
現時点では、これだけ対応しています。
スクリーンタッチなどはマウスで行います。
スマホとPCの表示切り替えは、で。
新たにシミュレーターを導入しなくとも、Chromeだけでスマホデザイン等が調べられます。
また、右側の画面では、
読み込んだページのエラーや、何がどのタイミングで読み込まれたかなど調査できます。
このあたりは機会があれば、記事にしたいと思います。
このツールはスマホのためでなく、PCとしてのブラウザーにスマホの機能を付けたものなので、普通に開発ツールとして使えますよ (^o^)v
はてなブログカスタマイズガイド―HTML & CSSで「はてなブログ」を次のステッ
- 作者: 相澤裕介
- 出版社/メーカー: カットシステム
- 発売日: 2016/10/01
- メディア: 単行本
- この商品を含むブログを見る