当ブログのようにレスポンシブデザインのテンプレートを設定していると、スマホ版のプレビューで見え方がわからず困るときがあります。
まずは、はてなアプリの記事プレビュー画面ではてなデフォルトのスマホ画面が表示されるとき。
また、PCでデザイン設定画面を開いているときスマホ版のプレビューを見たくてもPC版のデザインがスマホの画面幅で表示されることも。
正式な見え方は記事の公開後や変更の保存後に確認するしかないと思っていましたが、スマホのブラウザでレスポンシブデザインのスマートフォン版での見え方をプレビューできました。
記事編集画面の場合
スマホのブラウザで記事編集画面からプレビューを開くと、レスポンシブデザインのスマートフォン版での見え方が確認できます。
デザイン設定画面の場合
次の手順で確認できました。
- スマホのブラウザではてなの管理画面を開く
- ブラウザメニューの「PC版サイトを見る」や「PCサイトを要求」で表示を切り替える
- PC版の管理画面メニューからデザイン設定を開く
- デザイン設定のスマートフォンタブを開く
