2026年10月から、hPageのホームページはすべて自動的にモバイル対応になりました。すべてのデザインにモバイルレイアウトが用意されているため、設定は一切必要ありません。以前のモバイルデザインの設定は廃止されました。
モバイルレイアウトの仕組み
- スマートフォンやタブレットでは、ホームページは1列で表示され、ヘッダー、メニュー、コンテンツが縦に並びます。メニューはデザインのメニューの見出しの中に折りたたまれ、タップすると開きます。
- コンテンツ、色、フォントはパソコンでの表示と同じです。ページの編集は1回で済み、モバイル用のコンテンツを別に管理する必要はありません。
- 画像、動画、表は、画面の幅に合わせて縮小されます。固定幅の広い表は、横にスクロールして表示されます。
- モバイルレイアウトは、デザインより幅の狭いタッチスクリーンと、幅が1024ピクセル未満のすべての画面に適用されます。マウスを使うノートパソコンでブラウザーのウィンドウを狭くしても、パソコン用のデザインのままです。
スマートフォンでホームページを確認する
- サイドバーのホームページを表示をクリックしてホームページのアドレスを確認し、そのアドレスをスマートフォンのブラウザーで開きます。
- スマートフォンがない場合：パソコンでホームページを開き、ブラウザーのウィンドウの幅を1024ピクセル未満に狭めます。レイアウトがモバイルレイアウトに切り替わります。
- スマートフォンに古いバージョンが表示される場合は、ページを再読み込みしてください。モバイルブラウザーは、ページをしばらくキャッシュに保存しています。
画像のヒント
- モバイル端末向けに画像のサイズを変更する必要はありません。縦横比を保ったまま、自動的に縮小されます。
- モバイル回線でもページがすばやく読み込まれるよう、ファイルサイズは小さくしておきましょう。ファイルのアップロード時の画像圧縮が役立ちます。
- 重要なテキストを画像の中に入れるのは避けましょう。小さな画面では読みにくくなります。テキストは画像ではなく、テキストとして入力してください。
- テキストの左右に回り込ませた画像は、横にテキストが収まるよう、モバイルでは幅を狭めて表示されます。
テキストと表のヒント
- 段落は短くし、見出しを使いましょう。長い文章のかたまりは、スマートフォンでは読みにくくなります。
- 独自のHTMLでは固定幅（例：
width="800"）を避け、パーセントで指定するか、幅を指定しないようにしましょう。 - 表は幅100%にするか、幅を指定しないのがおすすめです。固定幅の表は、モバイルでは横にスクロールして表示されます。
- 非常に長い単語やWebアドレスは、画面の端で改行されます。スペースやハイフンを入れておくと、ブラウザーが適切な位置で改行しやすくなります。