フラグメント構成の保存
レイアウトと構成は、ページデザインの基盤です。 これを正しく行うことで、ページは読みやすくナビゲートしやすくなり、より豊かで一貫したユーザーエクスペリエンスを実現することができます。 コンテナとグリッドのレイアウト要素を使用して、ドロップゾーンを定義し、複雑な構成を作成してから、その構成を新しいフラグメントとして保存できます。 その後、フラグメントに対応している他のページやテンプレートで再利用できます。
構成を設計する際には、まずコンテナフラグメントから始めます。 このコンテナに他の要素を追加することで、最大限の柔軟性とレイアウトコントロールが可能になります。
フラグメント構成を保存するには、次の手順に従います。
-
保存する構成を含むページまたはテンプレートの編集を開始します。
-
目的の コンテナ または グリッド をクリックします。
または、サイドバーメニューの ブラウザ パネル（
）を開き、目的の コンテナ または グリッド を選択します。 -
フラグメントの オプション ボタン（
）をクリックして、 ［構成を保存］ を選択します。
-
フラグメントの名前を入力します。
-
（オプション）新しいフラグメントの サムネイル と 説明 を追加します。
-
構成の インラインコンテンツ（リンク、テキスト、画像など）を保存するかどうかを決定します
-
構成の マッピング構成 を保存するかどうかを決定します。
-
新しいフラグメントに必要なフラグメントセットを選択します。
使用可能なフラグメントセットが存在しない場合、構成は保存されたフラグメントと呼ばれる新しいセットに自動的に保存されます。
-
［Save］ をクリックします。
保存したFragmentコンポジションは、 Fragments パネルで、選択したFragment Setの下に表示されます。 他のフラグメントと同様に、ページまたはテンプレートに追加できます。
保存した構成を表示および管理するには、 サイトメニュー を開き、 ［デザイン］ → ［フラグメント］ に移動します。
Liferay DXP 7.1 と 7.2 では、Product Menu を開き、Site → Site Builder → Page Fragments に進んでください。
ここから、保存した構成の名前を変更したり、サムネイル画像を変更したり、.zipファイルとしてエクスポートしたり、セット間で移動したり、削除したりできます。 詳細は、 フラグメントの管理 を参照してください。
最新版のLiferayフラグメントツールキットでは、フラグメント構成の作成、エクスポート/インポート、およびプレビューがサポートされています。
例：バナーコンポジションの作成
このステップバイステップの例では、入れ子になったコンテナフラグメントを使用してバナースタイルコンポジションを作成する方法を紹介します。 また、この例では、コンポジションを保存し、スタイルブックでその設定を調整する方法を説明しています。
- ステップ1：新しいコンテントページを作成する 。
- ステップ2：コンテナフラグメントを設定する 。
- ステップ3: フラグメントコンポジションを保存する 。
- ステップ4：スタイルブックでコンテナ幅のデフォルトを設定する 。
ステップ1：新しいコンテントページを作成する。
-
サイトメニューの下のから ［サイトビルダー］ → ［ページ］ に移動します。
-
新しいページを追加したいレベルで 追加(
)をクリックし、 ［ページの追加］ を選択します。 -
空白 テンプレート、または既存のテンプレートのいずれかを選択します。
-
ページの追加 ダイアログで、ページの 名前 を入力します。
ステップ2：コンテナフラグメントの設定
-
コンテントページのサイドバーから、 フラグメントとウィジェット(
) を選び、 ［コンテナ］ フラグメントをデフォルトのドロップゾーンの上にドラッグ＆ドロップしてください。
-
Container Fragment をクリックし、 Configuration パネルで、 Styles タブをクリックします。
-
Spacing パネルで、4つの Padding オプションを
5に設定します。 -
背景 パネルで、 スタイルブックの値 ボタンを使って、 グレー 200 を選択します。
-
フラグメントとウィジェット(
) を選択し、新しいコンテナフラグメントを既存のコンテナの上にドロップしてください。 これにより、 Browser() ボタンをクリックしたときに表示されるネストされたContainerコンポジションが作成されます。 -
フラグメントとウィジェット(
) パネルの［基本コンポーネント］で、 見出し フラグメントをコンポジションの内側のコンテナの中にドラッグ＆ドロップします。
-
［Paragraph］ フラグメントを見出しのすぐ下にドラッグ＆ドロップします。 コンポジション内のパラグラフを選択し、 ［Styles］ セクションで、 ［上マージン］ で
3を選択します。
-
セレクション(
)パネルから、内側のコンテナをクリックします。 ［一般］ タブで、ユーザーがこの領域をクリックしたときにリダイレクトさせるURLを入力します。
-
フラグメントとウィジェット(
)パネルの［基本コンポーネント］で、 ［Button］ フラグメントをコンポジション内の段落のすぐ下にドラッグ＆ドロップします。 -
［Button］ を選択し、［Styles］セクションで ［上マージン］ を
3にセットします。 ［一般］ セクションで、 ［タイプ］ ドロップダウンメニューをクリックし、 ［リンク］ を選択します。 -
ブラウザ (
) パネルで、Button Fragment の リンク をクリックします。 ［リンク］セクションで、ユーザーがボタンをクリックしたときにリダイレクトさせるURLを入力します。
コンテントページを公開する必要はありません。 コンテントページで進行中の作業は、自動的に下書きとして保存されます。
Step 3: フラグメントコンポジションの保存
上記の手順に従って、コンポジションを新しいフラグメントとして保存します。
ステップ4：スタイルブックでデフォルトのコンテナ幅を設定する
デフォルトでは、コンテナフラグメントは ［可変］ 幅の設定を使用します。 デフォルトの設定を ［固定幅］ に変更し、同じスタイルブックに基づく他のコンテントページでこのプロパティを使用できるようにすることができます。 この例では、2つのコンテナを入れ子にしていますが、コンテナの最大幅をテキストで制限しながら、外側のコンテナをページの幅に適応させるように設定することができます。 Liferay DXPのスタイルブックについて詳しく知るには、Using Style Book to Standardize Site Appearanceをお読みください。
サイトレイアウトの設定が壊れないように、スタイルブックを使用する際はテスト環境を使用してください。 本番環境用サイトでは、テスト目的でスタイルブックの設定を更新しないでください。
-
Browser(
) ボタンをクリックし、内側のContainer Fragmentをクリックします。 -
General タブで、 Container Width プロパティを Fixed Width に設定します。
-
ページデザインオプション(
) をクリックし、スタイルブックセクションで、アクティブなスタイルブックを確認します。
-
サイトメニューの ［デザイン］ → ［Style Books］ に移動してください。
-
コンテントページに対応するスタイルブックの アクション(
)メニューをクリックし、 ［編集］ を選択します。 -
スタイルブックエディタで、 ［ページプレビュー］ ドロップダウンメニューからコンテントページを選択します。
-
右側のドロップダウンメニューから ［レイアウト］ オプションを選択し、 ［特大］ オプションで固定幅要素の最大幅値（ピクセル単位）を設定します。
-
［公開］ をクリックすると、新しい設定でスタイルブックが更新されます。
コンテナフラグメントを使った高度なコンポジションの作成
対応可能：Liferay DXP/Portal 7.4以降
別のコンテナフラグメントの中に1つ以上のコンテナを構成する場合、 Flex 表示を使用して、高度な表示オプションを定義することができます。
-
サイトメニューの下のから ［サイトビルダー］ → ［ページ］ に移動します。
-
新しいコンテンツページを作成するか、コンテナベースのコンポジションで既存のページを開きます。 この例 を使って、コンテナフラグメントを使った基本的なコンポジションを作成することができます。
-
Browser(
) ボタンをクリックします。 -
高度なコンポジションを適用したい要素をグループ化したコンテナフラグメントを選択します。 例えば、フラグメントが入ったコンテナがある場合、外側のコンテナを選択します。
-
スタイルセクションで、 ［コンテンツの表示］ ドロップダウンメニューをクリックし、利用可能な ［Flex］ オプションから一つを選択します。
-
［Align Items］ と ［Justify Content］ の設定をお好みで設定してください。
