ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Saving Fragment Compositions

レイアウトと構成は、ページデザインの基礎となるものです。それらはページの読みやすさとナビゲーション性を向上させ、より豊かで一貫性のあるユーザーエクスペリエンスをもたらします。コンテナとグリッドのレイアウト要素を使用すると、ドロップゾーンを定義したり、複雑な構成を作成したり、これらの構成を新しいフラグメントとして保存したりできます。これらのフラグメントは、フラグメントをサポートする他のページやテンプレートで再利用できます。

ヒント

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

フラグメント構成を保存するには、以下の手順に従ってください。

保存したい構成が含まれているページまたはテンプレートの編集を開始します。
目的の コンテナ または グリッド をクリックします。

または、サイドバーメニューの ブラウザー パネル（）を開き、目的の コンテナ または グリッドを選択します。
目的のフラグメントの オプション () をクリックし、 コンポジションの保存 を選択します。
フラグメントの名前を入力してください。
（オプション）新しいフラグメントに サムネイル と説明を追加します。
構成のインラインコンテンツ（リンク、テキスト、画像など）を保存するかどうかを決定します
コンポジションの マッピング構成 を保存するかどうかを決定します。
新しいフラグメントに使用するフラグメントセットを選択してください。

利用可能なフラグメントセットが存在しない場合、構成は「保存済みフラグメント」と呼ばれる新しいセットに自動的に保存されます。
［Save（保存）］をクリックします。

保存されたフラグメント構成は、選択したフラグメントセットの下にある フラグメント パネルに表示されます。他のフラグメントと同様に、ページやテンプレートに追加できます。

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

注

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

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

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

このステップバイステップの例では、ネストされたコンテナフラグメントを使用してバナースタイルの構成を作成する方法を示します。この例では、構成を保存し、スタイルブックでその設定を調整する方法も示しています。

コンテナフラグメントを使用したサンプルフラグメント構成の例

ステップ 1: 新しいコンテンツページの作成。
ステップ 2: コンテナフラグメントの設定。
ステップ 3: フラグメント構成の保存。
ステップ 4: スタイルブックでデフォルトのコンテナ幅を設定する。

ステップ1：新しいコンテントページの作成

サイトメニューから、 サイトビルダー → ページ に移動します。
新しいページを追加したいレベルで、追加 () をクリックし、 ページの追加 を選択します。
空白テンプレート、または既存のテンプレートのいずれかを選択します。
ページの追加 ダイアログで、ページの名前を入力します。

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

コンテンツページのサイドバーから、 フラグメントとウィジェット () を選択し、 コンテナ フラグメントをデフォルトのドロップゾーンにドラッグアンドドロップします。
コンテナ フラグメントをクリックし、設定パネルで、 スタイル タブをクリックします。
スペーシングパネルで、4 つの パディング オプションを 5 に設定します。
背景パネルで、 スタイルブックからの値 タブを使用して、 Gray 200 を選択します。
フラグメントとウィジェット () を選択し、新しい コンテナ フラグメントを既存のフラグメントの上にドロップします。これにより、 ブラウザ () ボタンをクリックしたときに表示されるネストされたコンテナ構成が作成されます。
フラグメントとウィジェット () パネルの「基本コンポーネント」から、 見出し フラグメントをコンポジション内のインナーコンテナにドラッグアンドドロップします。
見出しのすぐ下に段落フラグメントをドラッグアンドドロップします。構成内の段落を選択し、 スタイル セクションで、 上余白 を 3 に設定します。
選択パネル（）から、内側のコンテナをクリックします。 ［General］ タブで、ユーザーがこの領域をクリックしたときにリダイレクトさせるURLを入力します。
フラグメントとウィジェット () パネルの「基本コンポーネント」から、 ボタン フラグメントを段落のすぐ下にドラッグアンドドロップします。
ボタン フラグメントを選択し、[スタイル] セクションで 上余白 を 3 に設定します。一般セクションで、 タイプ ドロップダウンメニューをクリックし、 リンク を選択します。
ブラウザ（）パネルで、ボタンのリンクをクリックします。リンク欄に、ボタンをクリックした際にユーザーがリダイレクトされるURLを入力してください。

注

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

ステップ3: フラグメント構成の保存

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

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

ステップ4：スタイルブックにおけるデフォルトのコンテナ幅の設定

デフォルトでは、コンテナフラグメントは Fluid 幅構成を使用します。デフォルト設定を 固定幅に変更し、同じスタイルブックに基づく他のコンテンツページでこのプロパティを使用できるようにします。この例では、2つのネストされたコンテナを使用していますが、外側のコンテナをページ幅に合わせて調整しつつ、テキストを含むコンテナの最大幅を制限するように設定したい場合があります。 Liferay DXP のスタイルブックについて詳しく知りたい場合は、スタイルブックを使用してサイトの外観を標準化するをお読みください。

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