Back to PageFly.ioVideo Tutorials

ページ上の要素を整列

概要

このガイドでは、PageFlyページ上で要素を整列させ、視覚的にバランスの取れた整理されたレイアウトを実現する方法をご紹介します。PageFlyページで要素を整列させる方法を学びましょう。

これにより、PageFlyで作成したもののプロフェッショナリズムとユーザーエクスペリエンスを向上させることができます。また、ユーザーの視線をコンテンツに沿って誘導することで、可読性とユーザーエクスペリエンスを向上させます。一貫した配置は、ブランドアイデンティティを強化します。

PageFlyページで要素を整列させる方法

具体的な手順に進む前に、以下のビデオをご覧ください：

Gen 2 エディタ - Flex Section

PageFly Gen 2では、従来のrow-columnコンテナ構造に依存しないFlex Sectionが導入されており、要素の配置においてより高い柔軟性を提供します。これらのセクション内で要素を整列させるためのヒントについては、「How to Align Elements in the Gen 2 Editor」のビデオをご覧ください。

以下の手順でFlex Sectionを追加および設定します。

Step 1: Elements > PageFly > Layout に移動

Step 2: Blank Sectionを選択し、キャンバスにドラッグアンドドロップ

Step 3: Flex Sectionに配置したい要素をドラッグアンドドロップ

Step 4: 要素を整列

フレックスセクション全体の整列を設定することを強くお勧めします。そうすることで、内部にネストされたすべての要素に自動的に適用されるからです。フレックスセクションをクリックし、スタイルタブの「Align Items」と「Justify content」設定を使用します。

ただし、フレックスセクション内の個々の要素に対して個別に整列を設定することも可能です。目的の要素をクリックし、「Align self」機能を使用して、フレックスセクション内の異なる要素を整列させます。

注: 各要素の整列設定は、フレックスセクション全体の整列設定よりも優先されます。

レガシーエディタ - Section

Step 1: 要素のコンテナを選択

この例では、Heading、Paragraph、Button要素があります。そして、これらの要素を中央揃えしたいとします。

これを行うには、要素のコンテナを選択する必要があります。

まず、ページ上で要素がどのように格納されているかを理解する必要があります。例えば、Button要素を選択すると、ブレッドクラムにそのコンテナが表示されます：Section – Row – Column – Button。

注: より複雑なレイアウトを作成するために、より柔軟性を提供するFlex Sectionを使用できます。

このボタンを整列させたいので、ブレッドクラムでそのコンテナであるColumnを選択する必要があります。

Step 2: 選択したコンテナ内のすべての要素を整列

ここで、上記のすべての要素を中央揃えにしたいとします。ここでColumnであるコンテナを選択した後、Stylingタブ > TYPOGRAPHYセクション > Text Alignmentの下にあるCenterアイコンをクリックします。

Step 3: コンテナ内の特定の要素を整列

ボタンのみを中央揃えにし、見出しと段落は左揃えのままにしたい場合は、以下の手順を実行します。

  • 見出し、段落、ボタンを含むColumnが左揃えになっているか確認します（デフォルトでは左になっています）

  • そうでない場合は、Stylingタブに移動し、TYPOGRAPHYセクションのText Alignmentの下にあるLeftアイコンをクリックします。

  • 中央にしたいButton要素を選択します。

  • Stylingタブに移動し、ALIGNMENTセクションのHorizontal alignmentの下にあるCenterアイコンをクリックします。

その結果、以下のような画像が表示されます。

レガシーエディタの使用例

スタイル設定の優先順位

ネストされた要素の設定は、そのコンテナの設定よりも優先順位が高いことを覚えておいてください。例えば、列の整列を「center」に設定しても、その列内の段落要素が「left」に設定されている場合、その段落は左揃えになります。

デバイスのスタイル設定

PageFlyは、さまざまなデバイスに対してテキストの整列を細かく調整することをサポートしています。これは、デスクトップではクリーンでプロフェッショナルな見た目のためにテキストを左揃えにすることができますが、モバイルデバイスではより小さな画面での可読性を最適化するために中央揃えに切り替えることができることを意味します。

よくある質問

1. レガシーエディタのSectionで要素を垂直方向（縦方向）に整列するにはどうすればよいですか？

  • ベストプラクティスは、コンテナのpadding-topとpadding-bottomに同じ値を設定することです。例えば、垂直方向に整列したい要素を含むRowを選択し、そのRowのpadding-topとpadding-bottomに同じ値150 pxを設定します。

  • 1つの行に複数の列があり、コンテンツを整列させるためのより良い解決策が必要な場合、PageFlyはGeneral tabのContent positionオプションを使用して、Row内で垂直方向の整列を行うオプションも提供します。

2. 列内の各要素を個別に整列できますか？

Heading、Paragraphなどの一部の要素では可能です。ただし、ボタンではできません。列自体は、見出し、テキスト、ボタンなどの他の要素のコンテナです。重要なのは、コンテナの整列を調整して、そのコンテナ内のすべての要素に対して目的の効果を達成することです。その後、内部のテキストの整列を調整できます。

3. Section (Legacy) と Flex Section (Gen 2) の違いは何ですか？

Sectionを使用すると、row-columnコンテナ構造でページレイアウトを設計でき、PageFly SectionsとPageFly pagesの両方に追加できます。一方、Flex Sectionはrow-column構造を持ちません。PageFlyページに要素を直接追加でき、Flexブロックによってより柔軟なカスタマイズレイアウトが可能です。

バージョンアップデート

従来のページ構築メカニズム（行、列）に加え、PageFly 4.23.0では、複雑で高度にカスタマイズ可能なレイアウトを作成できる、より柔軟で効率的な技術であるGen 2 Editorが追加されました。これは直感的で使いやすいインターフェースを備えています。

追加リソース

Last updated

Was this helpful?