PageFlyで全幅セクションを作成する方法
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
概要：全幅セクションは、画面の幅全体に広がるデザイン要素です。視覚的に大きなインパクトを与えます。Shopifyサイトで全幅セクションを採用すると、モダンな魅力が高まり、主要なコンテンツがダイナミックに強調され、目立って効果的に注目を集めます。
PageFlyを使用すると、Shopifyページで全幅セクションを簡単に作成できます。この記事では、わずか数ステップでそのプロセスをご案内します。こちらのビデオチュートリアルもご覧いただけます。
PageFlyアプリがインストールされていること: PageFlyがShopifyストアにインストールされている必要があります。まだPageFlyをお持ちでない場合は、こちらから無料でインストールできます。
コンテンツが準備されていること: 全幅セクションに含めたいコンテンツを準備してください。これには、テキスト、画像、ビデオ、またはリンクが含まれる場合があります。
重要事項: Gen 2レイアウトは、従量課金制モデル（スロットプラン）のみで利用可能です。
PageFly Gen 2を使用すると、ウェブサイトの見事な全幅セクションを簡単に作成できます。ページデザインを簡単に強化するためのステップバイステップのガイダンスについては、こちらのビデオをご覧ください。
PageFlyエディターで、Elements > PageFlyタブを選択 -> Layoutをクリックします。
空白のセクション要素をページにドラッグします。
要素追加メニューを開きます。ここで、テキスト、画像、ビデオなど、さまざまな要素を追加できます。
例えば、画像を追加するには：
Elements > PageFlyタブをクリック -> Image要素を追加し、画像要素をセクションにドラッグ＆ドロップします。
Generalタブに移動し、Select imageをクリックして画像をアップロードします。
セクションを選択し、Generalタブに移動し、Enable full widthオプションの下にあるNoボタンをクリックします。これにより、セクションが画面の全幅に引き伸ばされます。
Publishボタンをクリックして変更をライブにします。
Live Viewでページを確認し、セクションが正しく表示されているか確認します。
PageFlyエディターで、Elements > PageFlyタブを選択 -> Layoutをクリックします。
1/1レイアウト要素をページにドラッグします。
要素追加メニューを開きます。ここで、テキスト、画像、ビデオなど、さまざまな要素を追加できます。
例えば、画像を追加するには：
Elements > PageFlyタブをクリック -> Image要素を追加し、画像要素をセクションにドラッグ＆ドロップします。
Generalタブに移動し、Select imageをクリックして画像をアップロードします。
セクションを選択し、Generalタブに移動し、Enable full widthオプションの下にあるNoボタンをクリックします。これにより、セクションが画面の全幅に引き伸ばされます。
Publishボタンをクリックして変更をライブにします。
Live Viewでページを確認し、セクションが正しく表示されているか確認します。
一部のShopifyテーマは、サイトのコンテンツに固定幅を適用しているため、セクションがページ全体に完全に拡張されない場合があります。そのため、ご紹介した手順に従っても、一部のテーマではセクションがまだ全幅にならないことがあります。
この場合、以下の手順に従う必要があります：
PageFlyエディターの左メニューから、Custom Code Editorをクリックします。
以下のコードスニペットのいずれかをコピーします。
メインコンテンツコンテナを調整する場合：
.main-content { max-width: 100%; padding: 0;}メインコンテンツコンテナを調整する場合：
.main-content .wrapper {
width: 100%;
max-width: 100%;
padding: 0!important;}選択したコードをCustom CSSセクションに貼り付けます。
Saveをクリックし、再度ページをPublishします。
Live Pageで変更を確認し、セクションが全幅で表示されているか確認します。
コードを追加しても問題が解決しない場合は、ライブチャットウィンドウからお気軽にお問い合わせください。すべてのShopifyテーマがこれらのコードと互換性があるわけではないため、テーマ固有の設定を調整する必要がある場合があります。
一貫性のあるスタイリング: 全幅セクションのスタイリングが、ウェブサイト全体のデザインおよびカラースキームと一致していることを確認し、統一感のある外観にします。
セクションの高さを制限する: 垂直方向のスペースを大量に使用したくなるかもしれませんが、全幅セクションを簡潔に保つことで、訪問者のエンゲージメントを維持し、スクロールを減らすことができます。
読み込み時間を最適化する: 全幅セクションは、大きな画像や複雑なスクリプトのため、重くなることがあります。これらの要素を最適化して、高速なページ読み込み速度を維持してください。
1. PageFlyで全幅セクションにアニメーションを適用できますか？
はい、できます。アニメーションを適用したいセクションまたは要素を選択し、Generalタブのアニメーションオプションから選択するだけです。
2. 全幅セクションがページの他のコンテンツと重なる場合はどうすればよいですか？
重複の問題は、通常、マージンまたはパディングの設定が間違っていることが原因です。PageFlyでそのセクションおよび近くの要素の設定を確認してください。
