はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

はてなブログの記事編集画面で、スマートフォンでの表示をプレビューできるようにしました【レスポンシブデザインに関する追記あり】

はてなブログでは、PC版の記事編集画面でも、スマートフォンでどのように表示されるかをプレビューできるようにしました。これまでプレビューできた「PC」の表示に加えて「スマートフォン」を選択できます。

はてなブログ全体でもスマートフォンからの閲覧が伸びており、PCで記事を書く際にもスマートフォンでの読みやすさを考慮できるようプレビューを追加しました。どうぞご利用ください。

PCの記事編集画面でスマートフォンの表示をプレビューするには

PC版の記事編集画面で「プレビュー」タブを選択すると、さらに「PC」「スマートフォン」のタブが表示され、プレビューを切り替えることができます。

スマートフォンでの表示をプレビュー

PCの記事編集画面でスマートフォンの表示をプレビュー

スマートフォン表示のプレビューにおける注意点

スマートフォン表示のプレビューにおいては以下の注意点があります。

  • スマートフォンにはさまざまな画面解像度が存在しますが、プレビュー画面では横幅を320ピクセルで固定して表示しています
  • レスポンシブデザインには対応していません。確認できるのは、はてなブログのデフォルトのスマートフォン表示です

【2016年2月19日追記】レスポンシブデザインに対応しました。はてなブログでレスポンシブデザインを使用する際には、ヘルプ「ブログのデザインを変更する(スマートフォン)」の「レスポンシブデザイン」を参照してください。

なお、スマートフォンで記事を執筆する際、スマートフォンのブラウザで利用できる記事編集画面にはプレビューがありませんが、公式アプリではスマートフォンでの表示をプレビューできます。どうぞご利用ください。

アプリ - はてなブログ