バージョン7.0のカバー ページがモバイルでどのように表示されるかをプレビューします。

どのデバイスでもカバー ページの見た目が最適化されるように、レスポンシブ デザインによりコンテンツは自動的に一列に積み上げられます。つまり、カバー ページのモバイルでの表示は、コンピューターでの表示とは少し違ったものになります。カバー ページのモバイルでの外観がどのようなものになるかはレイアウトとコンテンツによりますが、一般的なルールは次のとおりです。

カバー ページはバージョン7.1では利用できません。同様の外観を作成する場合、特定のページでは、ヘッダーとフッターを非表示にすることができます。

端末別プレビューでのプレビュー

端末別プレビューを使用すると、モバイル端末、タブレット、またはコンピューターのそれぞれでカバー ページがどのように表示されるかをプレビューできます。また、ご自分のデバイスからもサイトにアクセスしてみることをおすすめします。モバイル端末からサイトにアクセスするには、モバイル ブラウザーのナビゲーション バーにページのURLを入力します。サイトには、モバイル端末用の別途のアドレスは存在しません。

Mobile background images

カバー ページに背景画像を使用する場合は、テキストや境界線のない画像を使用することをおすすめします。これにより、トリミングする際の柔軟性が高まります。この手順の詳細については、背景画像のベスト プラクティスをご参照ください。

Text on mobile

カバー ページの本文のフォント サイズが極端に大きいと、モバイル端末では長い単語やフレーズが途切れてしまう可能性があります。最適な結果を得るには、本文を短くして小さめのフォント サイズを選び、単語の間にスペースを入れることをおすすめします。

Overall layout changes on mobile

ここでは、モバイル端末でカバー ページを表示したときに調整される内容をいくつか紹介します。

• Split layouts (like Flash and Spotlight) stack vertically with the image stacked above the text.

• Layouts with split text (like Debut and Projector) stack the left-side text above the right-side.

• Harborレイアウトは水平に分割され、テキストの上に地図が重ねて表示されます。