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

Saving Fragment Compositions

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

ヒント

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

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

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

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

利用可能なフラグメントセットが存在しない場合は、コンポジションは「Saved Fragments」と呼ばれる新しいセットに自動的に保存されます。
[保存]をクリックします。

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

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

注

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

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

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

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

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

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

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

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

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

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

注

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

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

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

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

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

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

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

警告

サイトのレイアウト構成が壊れないようにするには、スタイルブックを使用するときはテスト環境を使用します。実稼働サイトでのテスト目的でスタイルブックの構成を更新しないでください。

ブラウザ () を開き、内部コンテナフラグメントをクリックします。
[全般] タブで、 コンテナーの幅 プロパティを 固定幅に設定します。
ページデザインオプション () をクリックし、スタイルブックセクションでアクティブなスタイルブックを確認します。
サイトメニューで、 デザイン → スタイルブックに移動します。
コンテンツページに対応するスタイルブックの [アクション] () をクリックし、 [編集]を選択します。
スタイルブックエディターで、 ページプレビュー ドロップダウンメニューからコンテンツページを選択します。
右側のドロップダウンメニューから ［レイアウト］ オプションを選択し、 ［特大］ オプションで固定幅要素の最大幅値（ピクセル単位）を設定します。
公開をクリックして、スタイルブックを新しい構成で更新します。

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

Liferay DXP/ポータル 7.4 以上

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

サイトメニューで、 サイトビルダー → ページに移動します。
新しいコンテンツページを作成するか、コンテナーベースの構成で既存のページを開きます。バナー構成の例を使用して、コンテナフラグメントを使用した基本的な構成を作成できます。
ブラウザ () を開き、高度な構成を適用する要素をグループ化するコンテナフラグメントを選択します。たとえば、フラグメントが入ったコンテナがある場合は、外側のコンテナを選択します。
スタイルセクションで、 ［コンテンツの表示］ドロップダウンメニューをクリックし、利用可能な ［Flex］ オプションから一つを選択します。
項目の配置 と コンテンツの両端揃え の設定を好みに合わせて設定します。