カバー ページのモバイル用スタイル (バージョン7.0)

最終更新日 2024年8月23日

バ⁠ージ⁠ョン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⁠.
KB Guide Image
  • Layouts with split text (⁠like Debut and Projector⁠) stack the left-side text above the right-side⁠.
KB Guide Image
  • Harborレイアウトは水平に分割され⁠、テキストの上に地図が重ねて表示されます⁠。
KB Guide Image
Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

カバー ページのモバイル用スタイル (バージョン7.0)