oo

フラグメント構成の保存

レイアウトと構成は、ページデザインの基盤です。 これを正しく行うことで、ページは読みやすくナビゲートしやすくなり、より豊かで一貫したユーザーエクスペリエンスを実現することができます。 コンテナとグリッドのレイアウト要素を使用して、ドロップゾーンを定義し、複雑な構成を作成してから、その構成を新しいフラグメントとして保存できます。 その後、フラグメントに対応している他のページやテンプレートで再利用できます。

tip

構成を設計する際には、まずコンテナフラグメントから始めます。 このコンテナに他の要素を追加することで、最大限の柔軟性とレイアウトコントロールが可能になります。

フラグメント構成を保存するには、次の手順に従います。

  1. 保存する構成を含むページまたはテンプレートの編集を開始します。

  2. 目的の コンテナ または グリッド をクリックします。

    または、サイドバーメニューの ブラウザ パネル(Browser)を開き、目的の コンテナ または グリッド を選択します。

  3. フラグメントの オプション ボタン(Options Button)をクリックして、 [構成を保存] を選択します。

    フラグメントのオプションメニューを開き、[構成を保存]を選択します。

  4. フラグメントの名前を入力します。

  5. (オプション)新しいフラグメントの サムネイル説明 を追加します。

  6. 構成の インラインコンテンツ(リンク、テキスト、画像など)を保存するかどうかを決定します

  7. 構成の マッピング構成 を保存するかどうかを決定します。

  8. 新しいフラグメントに必要なフラグメントセットを選択します。

    使用可能なフラグメントセットが存在しない場合、構成は保存されたフラグメントと呼ばれる新しいセットに自動的に保存されます。

    表示されるダイアログにフラグメント構成の情報を入力します。

  9. Save] をクリックします。

保存したFragmentコンポジションは、 Fragments パネルで、選択したFragment Setの下に表示されます。 他のフラグメントと同様に、ページまたはテンプレートに追加できます。

保存した構成を表示および管理するには、 サイトメニュー を開き、 [デザイン] → [フラグメント] に移動します。

note

Liferay DXP 7.1 と 7.2 では、Product Menu を開き、SiteSite BuilderPage Fragments に進んでください。

ここから、保存した構成の名前を変更したり、サムネイル画像を変更したり、.zipファイルとしてエクスポートしたり、セット間で移動したり、削除したりできます。 詳細は、 フラグメントの管理 を参照してください。

保存したフラグメント構成はすぐに使用できます。

note

最新版のLiferayフラグメントツールキットでは、フラグメント構成の作成、エクスポート/インポート、およびプレビューがサポートされています。

例:バナーコンポジションの作成

このステップバイステップの例では、入れ子になったコンテナフラグメントを使用してバナースタイルコンポジションを作成する方法を紹介します。 また、この例では、コンポジションを保存し、スタイルブックでその設定を調整する方法を説明しています。

コンテナフラグメントを用いたフラグメント構成例

ステップ1:新しいコンテントページを作成する。

  1. サイトメニューの下のから [サイトビルダー] → [ページ] に移動します。

  2. 新しいページを追加したいレベルで 追加(Add Page)をクリックし、 [ページの追加] を選択します。

  3. 空白 テンプレート、または既存のテンプレートのいずれかを選択します。

  4. ページの追加 ダイアログで、ページの 名前 を入力します。

ステップ2:コンテナフラグメントの設定

  1. コンテントページのサイドバーから、 フラグメントとウィジェット(Fragments and Widgets) を選び、 [コンテナ] フラグメントをデフォルトのドロップゾーンの上にドラッグ&ドロップしてください。

    コンテナフラグメントをコンテントページのドロップゾーンの上にドラッグ&ドロップします。

  2. Container Fragment をクリックし、 Configuration パネルで、 Styles タブをクリックします。

  3. Spacing パネルで、4つの Padding オプションを 5に設定します。

  4. 背景 パネルで、 スタイルブックの値 ボタンを使って、 グレー 200 を選択します。

    コンテナフラグメントのパッディングと背景色の値を定義します。

  5. フラグメントとウィジェット(Fragments and Widgets) を選択し、新しいコンテナフラグメントを既存のコンテナの上にドロップしてください。 これにより、 Browser(Browser) ボタンをクリックしたときに表示されるネストされたContainerコンポジションが作成されます。

  6. フラグメントとウィジェット(Fragments and Widgets) パネルの[基本コンポーネント]で、 見出し フラグメントをコンポジションの内側のコンテナの中にドラッグ&ドロップします。

    見出しフラグメントを内側のコンテナフラグメントの中にドラッグ&ドロップします。

  7. Paragraph] フラグメントを見出しのすぐ下にドラッグ&ドロップします。 コンポジション内のパラグラフを選択し、 [Styles] セクションで、 [上マージン] で3を選択します。

    説明文フラグメントを見出しフラグメントのすぐ下にドラッグ&ドロップします。

  8. セレクション(Selection)パネルから、内側のコンテナをクリックします。 [一般] タブで、ユーザーがこの領域をクリックしたときにリダイレクトさせるURLを入力します。

    内側のコンテナフラグメントのターゲットとなるリンクやページを定義します。

  9. フラグメントとウィジェット(Fragments and Widgets)パネルの[基本コンポーネント]で、 [Button] フラグメントをコンポジション内の段落のすぐ下にドラッグ&ドロップします。

  10. Button] を選択し、[Styles]セクションで [上マージン] を 3にセットします。 [一般] セクションで、 [タイプ] ドロップダウンメニューをクリックし、 [リンク] を選択します。

  11. ブラウザ (Browser) パネルで、Button Fragment の リンク をクリックします。 [リンク]セクションで、ユーザーがボタンをクリックしたときにリダイレクトさせるURLを入力します。

    ボタンのフラグメントタイプとトップマージンを設定します。

note

コンテントページを公開する必要はありません。 コンテントページで進行中の作業は、自動的に下書きとして保存されます。

Step 3: フラグメントコンポジションの保存

上記の手順に従って、コンポジションを新しいフラグメントとして保存します。

コンテナオプションメニューからフラグメントコンポジションを保存します。

ステップ4:スタイルブックでデフォルトのコンテナ幅を設定する

デフォルトでは、コンテナフラグメントは [可変] 幅の設定を使用します。 デフォルトの設定を [固定幅] に変更し、同じスタイルブックに基づく他のコンテントページでこのプロパティを使用できるようにすることができます。 この例では、2つのコンテナを入れ子にしていますが、コンテナの最大幅をテキストで制限しながら、外側のコンテナをページの幅に適応させるように設定することができます。 Liferay DXPのスタイルブックについて詳しく知るには、Using Style Book to Standardize Site Appearanceをお読みください。

コンテナの幅プロパティは、固定幅を使用するか、ページ幅に合わせるかを変更することができます。

warning

サイトレイアウトの設定が壊れないように、スタイルブックを使用する際はテスト環境を使用してください。 本番環境用サイトでは、テスト目的でスタイルブックの設定を更新しないでください。

  1. Browser(Browser) ボタンをクリックし、内側のContainer Fragmentをクリックします。

  2. General タブで、 Container Width プロパティを Fixed Width に設定します。

    内側のコンテナフラグメントの幅設定を固定幅に変更します。

  3. ページデザインオプション(Page Design Options) をクリックし、スタイルブックセクションで、アクティブなスタイルブックを確認します。

    コンテントページで使用されているデフォルトのスタイルブックを確認します。

  4. サイトメニューの [デザイン] → [Style Books] に移動してください。

    サイトメニューとデザインセクションのスタイルブックページを開きます。

  5. コンテントページに対応するスタイルブックの アクション(Actions)メニューをクリックし、 [編集] を選択します。

  6. スタイルブックエディタで、 [ページプレビュー] ドロップダウンメニューからコンテントページを選択します。

    スタイルブックエディターのページプレビュードロップダウンメニューから、修正したいコンテントページを選択します。

  7. 右側のドロップダウンメニューから [レイアウト] オプションを選択し、 [特大] オプションで固定幅要素の最大幅値(ピクセル単位)を設定します。

    スタイルブックレイアウトの設定で、特大オプションを変更し、コンテナフラグメントの最大幅を更新します。

  8. 公開] をクリックすると、新しい設定でスタイルブックが更新されます。

コンテナフラグメントを使った高度なコンポジションの作成

対応可能:Liferay DXP/Portal 7.4以降

別のコンテナフラグメントの中に1つ以上のコンテナを構成する場合、 Flex 表示を使用して、高度な表示オプションを定義することができます。

  1. サイトメニューの下のから [サイトビルダー] → [ページ] に移動します。

  2. 新しいコンテンツページを作成するか、コンテナベースのコンポジションで既存のページを開きます。 この例 を使って、コンテナフラグメントを使った基本的なコンポジションを作成することができます。

  3. Browser(Browser) ボタンをクリックします。

  4. 高度なコンポジションを適用したい要素をグループ化したコンテナフラグメントを選択します。 例えば、フラグメントが入ったコンテナがある場合、外側のコンテナを選択します。

  5. スタイルセクションで、 [コンテンツの表示] ドロップダウンメニューをクリックし、利用可能な [Flex] オプションから一つを選択します。

  6. Align Items] と [Justify Content] の設定をお好みで設定してください。

    Flexの表示オプションを使用してスタイルを設定するページ要素をグループ化したコンテナを選択します。

関連トピック

Capability:
Feature: