Back to PageFly.ioVideo Tutorials

PageFlyで全幅セクションを作成する方法

概要

概要：全幅セクションは、画面の幅全体に広がるデザイン要素です。視覚的に大きなインパクトを与えます。Shopifyサイトで全幅セクションを採用すると、モダンな魅力が高まり、主要なコンテンツがダイナミックに強調され、目立って効果的に注目を集めます。

PageFlyを使用すると、Shopifyページで全幅セクションを簡単に作成できます。この記事では、わずか数ステップでそのプロセスをご案内します。こちらのビデオチュートリアルもご覧いただけます。

必要条件

  • PageFlyアプリがインストールされていること: PageFlyがShopifyストアにインストールされている必要があります。まだPageFlyをお持ちでない場合は、こちらから無料でインストールできます。

  • コンテンツが準備されていること: 全幅セクションに含めたいコンテンツを準備してください。これには、テキスト、画像、ビデオ、またはリンクが含まれる場合があります。

Gen 2レイアウト - PageFlyで全幅セクションを作成する方法

重要事項: Gen 2レイアウトは、従量課金制モデル（スロットプラン）のみで利用可能です。

PageFly Gen 2を使用すると、ウェブサイトの見事な全幅セクションを簡単に作成できます。ページデザインを簡単に強化するためのステップバイステップのガイダンスについては、こちらのビデオをご覧ください。

ステップ1：1カラムレイアウトを追加する

  1. PageFlyエディターで、Elements > PageFlyタブを選択 -> Layoutをクリックします。

  2. 空白のセクション要素をページにドラッグします。

ステップ2：セクションに要素を追加する

要素追加メニューを開きます。ここで、テキスト、画像、ビデオなど、さまざまな要素を追加できます。

例えば、画像を追加するには：

  1. Elements > PageFlyタブをクリック -> Image要素を追加し、画像要素をセクションにドラッグ＆ドロップします。

  2. Generalタブに移動し、Select imageをクリックして画像をアップロードします。

ステップ3：全幅を有効にする

セクションを選択し、Generalタブに移動し、Enable full widthオプションの下にあるNoボタンをクリックします。これにより、セクションが画面の全幅に引き伸ばされます。

注: ページに全幅でない他のセクションがあり、それらを拡張したい場合は、それぞれのセクションに対してこのステップを実行してください。

ステップ4：ページを公開し、ライブビューでセクションを確認する

  1. Publishボタンをクリックして変更をライブにします。

  2. Live Viewでページを確認し、セクションが正しく表示されているか確認します。

レガシーレイアウト - PageFlyで全幅セクションを作成する方法

ステップ1：1カラムレイアウトを追加する

  1. PageFlyエディターで、Elements > PageFlyタブを選択 -> Layoutをクリックします。

  2. 1/1レイアウト要素をページにドラッグします。

ステップ2：セクションに要素を追加する

要素追加メニューを開きます。ここで、テキスト、画像、ビデオなど、さまざまな要素を追加できます。

例えば、画像を追加するには：

  1. Elements > PageFlyタブをクリック -> Image要素を追加し、画像要素をセクションにドラッグ＆ドロップします。

  2. Generalタブに移動し、Select imageをクリックして画像をアップロードします。

ステップ3：全幅を有効にする

セクションを選択し、Generalタブに移動し、Enable full widthオプションの下にあるNoボタンをクリックします。これにより、セクションが画面の全幅に引き伸ばされます。

注: ページに全幅でない他のセクションがあり、それらを拡張したい場合は、それぞれのセクションに対してこのステップを実行してください。

ステップ4：ページを公開し、ライブビューでセクションを確認する

  1. Publishボタンをクリックして変更をライブにします。

  2. Live Viewでページを確認し、セクションが正しく表示されているか確認します。

ユースケース

上記の手順に従ってもセクションがまだ全幅にならない場合

一部のShopifyテーマは、サイトのコンテンツに固定幅を適用しているため、セクションがページ全体に完全に拡張されない場合があります。そのため、ご紹介した手順に従っても、一部のテーマではセクションがまだ全幅にならないことがあります。

この場合、以下の手順に従う必要があります：

  1. PageFlyエディターの左メニューから、Custom Code Editorをクリックします。

  2. 以下のコードスニペットのいずれかをコピーします。

  • メインコンテンツコンテナを調整する場合：

.main-content { max-width: 100%; padding: 0;}

  • メインコンテンツコンテナを調整する場合：

.main-content .wrapper {
width: 100%;
max-width: 100%;
padding: 0!important;}

  1. 選択したコードをCustom CSSセクションに貼り付けます。

  1. Saveをクリックし、再度ページをPublishします。

  2. Live Pageで変更を確認し、セクションが全幅で表示されているか確認します。

コードを追加しても問題が解決しない場合は、ライブチャットウィンドウからお気軽にお問い合わせください。すべてのShopifyテーマがこれらのコードと互換性があるわけではないため、テーマ固有の設定を調整する必要がある場合があります。

ヒントとベストプラクティス

  • 一貫性のあるスタイリング: 全幅セクションのスタイリングが、ウェブサイト全体のデザインおよびカラースキームと一致していることを確認し、統一感のある外観にします。

  • セクションの高さを制限する: 垂直方向のスペースを大量に使用したくなるかもしれませんが、全幅セクションを簡潔に保つことで、訪問者のエンゲージメントを維持し、スクロールを減らすことができます。

  • 読み込み時間を最適化する: 全幅セクションは、大きな画像や複雑なスクリプトのため、重くなることがあります。これらの要素を最適化して、高速なページ読み込み速度を維持してください。

よくある質問

1. PageFlyで全幅セクションにアニメーションを適用できますか？

はい、できます。アニメーションを適用したいセクションまたは要素を選択し、Generalタブのアニメーションオプションから選択するだけです。

2. 全幅セクションがページの他のコンテンツと重なる場合はどうすればよいですか？

重複の問題は、通常、マージンまたはパディングの設定が間違っていることが原因です。PageFlyでそのセクションおよび近くの要素の設定を確認してください。

追加リソース

Shopifyプロダクトメディア要素 | PageFlyでの使い方

Shopify App Block要素をPageFlyセクションで使用する方法

Last updated

Was this helpful?