Documentation

フラグメント構成の保存

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

ちなみに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. 保存] をクリックします。

保存されたフラグメント構成は、選択したフラグメントセットの下の [フラグメントとウィジェット] パネル(Fragments and Widgets icon)に一覧表示されます。 他のフラグメントと同様に、ページまたはテンプレートに追加できます。

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

注釈

Liferay DXP 7.1 および 7.2 では、プロダクトメニュー を開き、サイトサイトビルダーページフラグメント に移動します。

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

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

注釈

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

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

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

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

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

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

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

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

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

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

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

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

  2. [コンテナ]フラグメントをクリックし、 セレクション(Selection) パネルで、 [Styles] をクリックしてください。

  3. パディング領域で、4つのパディングオプションを 5 に設定します(A)。

  4. [Styles]エリアの [背景色] セレクタで、グレー色の値として 200 (B)を選択します。

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

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

    新規のコンテナフラグメントを前のコンテナフラグメントの上にドラッグ&ドロップします。

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

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

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

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

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

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

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

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

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

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

    ボタンのフラグメントターゲットリンクを設定します。

注釈

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

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

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

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

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

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

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

警告

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

  1. セレクション(Selection) パネルから、内側のコンテナフラグメントをクリックします。

  2. スタイルエリアで、 [コンテナの幅] プロパティを [固定幅] に設定します。

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

  3. ページデザインオプション パネル(A)をクリックし、 [スタイルブック] セクション(B)で、アクティブなスタイルブック(C)を確認します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  3. セレクション(Selection) パネルをクリックします。

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

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

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

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

    項目の整列とコンテンツの両端揃えの設定をお好みで行ってください。