デフォルトのフラグメントリファレンス
Liferayはすぐに使える多くのフラグメントを提供しているので、すぐにソリューションの構築を開始できます。 利用可能なフラグメントを表示するには、コンテンツページまたはページテンプレートの編集を開始してください。 編集中は、編集サイドバーメニューの フラグメントとウィジェット タブ（
）を開きます。
フラグメントは、次のセットに編成されています。
利用可能な設定オプションは、フラグメントおよびフラグメントのサブ要素によって異なります。 詳細については、 フラグメントの設定 を参照してください。
レイアウト要素
Liferay 7.3以降に対応
レイアウト要素は、ページやテンプレートのレイアウトをデザインするためのドロップゾーンを定義します。 デフォルトでは、Liferay には 2 つのレイアウト要素が含まれています: コンテナ および グリッド。
| フラグメント | 説明 |
|---|---|
| コンテナ（以前は パネル） | 構成可能なドロップゾーンを追加します。 |
| グリッド（以前は 行） | 複数のドロップゾーンモジュールを追加します。 これらのモジュールは、垂直または水平に構成および配置できます。 |
基本コンポーネント
これらは、ページに基本的な機能を追加するシンプルなデザイン要素です。 例としては、ボタン、見出し、タブなどがあります。 これらのコンポーネントを使えば、ページを少しずつ構築していくことができます。 DXPには以下の基本コンポーネントが含まれています。
| フラグメント | 説明 |
|---|---|
| ボタン | リンクまたはアクションタイプの リンク要素 を追加します。 ボタンのスタイルは、プライマリ、セカンダリ、リンク、アウトラインプライマリ、アウトラインセカンダリの5種類から選択できます。 |
| カード | ディスプレイカードとして配置された 画像、 リッチテキスト、および リンク 要素を追加します。 |
| 日付 | カスタム日付フィールドにマッピングできるフィールドを追加します。 |
| ドロップダウン 7.4+ | シンプルテキスト要素 とドロップゾーンを追加します。 他のフラグメントやウィジェットをドロップゾーンにドラッグ＆ドロップすることで、高度なドロップダウンメニューを作成できます。 |
| 外部ビデオ 7.4+ | 外部ビデオをページまたはテンプレートに埋め込みます。 対応するビデオソースは、YouTube、Facebook、Twitch、Vimeo、およびドキュメントとメディアに保存されているビデオです。 |
| HTML | 編集可能な HTML 要素 を追加します。 要素をダブルクリックすると、HTML構文を使用してコンテンツを編集できるモーダルウィンドウが開きます。 |
| 見出し | H1～H6の見出しレベルを使用するように設定できるシンプルなテキスト要素 を追加します。 |
| 画像 | 設定可能な 画像要素 を追加します。 構成するときは、画像の元のサイズを使用するか、コンテキストに合わせて調整するかを決定します。 |
| パラグラフ | リッチテキスト要素 を追加します。 編集するときは、フラグメントのテキストを強調表示して、追加のフォーマットオプションにアクセスします。 |
| セパレーター（区切り文字) | ページ要素間に水平線を追加します。 その間隔と色を構成できます。 |
| スライダー | 複数の 画像 に リッチテキスト オーバーレイを追加し、それらをスライドにグループ化します。 ユーザーは各スライドを手動で切り替えることができます。 |
| ソーシャル | Facebook、Twitter、LinkedInのアイコンを使用して画像要素を追加します。これらのアイコンは、各プラットフォームのページにリンクできます。 |
| スペーサー | ページ上の要素間に水平方向の空白スペースを追加します。 その高さを設定できます。 |
| タブ | シンプルなテキスト要素 とウィジェットやその他のフラグメントを追加するための個別のドロップゾーンを備えた複数のタブを追加します。 |
| ビデオURL（以前はビデオフラグメント） | YouTube またはドキュメントとメディアからビデオ をページまたはテンプレートに埋め込みます。 動画を自動再生、ループ再生、ミュート、またはコントロールの非表示に設定できます。 エンドユーザーからビデオコントロールを非表示にすることもできます。 |
Web コンテンツ構造 をテキスト フィールドとともに使用する場合、フィールド タイプを 複数行 に設定すると、Web コンテンツ エディタで複数行入力が可能になります。 ただし、改行（\n）は自動的にレンダリングされません。 その結果、その構造を使用している記事のテキストフィールドを段落フラグメントにマッピングすると、1行として表示されます。 書式設定を保持し、改行を維持するには、リッチテキストフィールドを使用してください。
フォームコンポーネント
コンテンツページにフォームを作成するには、フォームコンポーネントのフラグメントを使用します。 これらのフラグメントはカスタムオブジェクトのみをサポートします。 これらを有効にしてアクセスするには、少なくとも1つの公開オブジェクトが必要です。 詳細については、 フォームフラグメントの使用 を参照してください。
| フラグメント | 説明 |
|---|---|
| キャプチャ | 自動送信を防止するため、フォームコンテナにCAPTCHA認証を追加します。 一度追加されたフォームは、送信前に人間の確認が必要となります。 |
| カテゴリ | 利用可能な語彙を使用してエントリを分類するためのフィールドを追加します。 |
| チェックボックス | ブール型フィールドにマッピングできるチェックボックスを追加します。 |
| 日付 | カスタム日付フィールドにマッピングできる日付ピッカーを追加します。 |
| 日時 | カスタムの日時フィールドにマッピングできる、日付と時刻を組み合わせたピッカーを追加します。 |
| Liferay DXP 2025.Q4+ ドラッグアンドドロップアップロード | 添付ファイル欄に、ドラッグ＆ドロップによるファイルアップロード機能を追加します。 |
| ファイルアップロード | 添付ファイルフィールドにマッピングできるファイルアップロードボタンを追加します。 マッピングされた添付ファイルフィールドによって、アップロード動作が決まります。 デフォルトでは、このフラグメントにはサポートされているファイル拡張子が表示されます。 |
| フォームボタン | （以前は「送信ボタン」と呼ばれていました）フォームにカスタムボタン要素を追加します。 このフラグメントはフィールドにマッピングされておらず、通常はナビゲーションやカスタムアクションに使用されます。 |
| フォームコンテナー | コンテンツページにフォームを作成するためのコンテナを追加します。 コンテナをカスタムオブジェクトにマッピングする必要があります。 コンテナは、各オブジェクトフィールドに対してフォームフラグメントを自動的に生成し、コンテナ内にはフォームフラグメントのみを収容します。 |
| フォームリレーション | 関係フィールドにマッピングされるフィールドを追加し、ユーザーがエントリ間の関係を作成できるようにします。 |
| フレンドリURL | エントリの分かりやすいURL値を定義するためのフィールドを追加します。 |
| Liferay DXP 2025.Q4+ インラインテキスト | フォームレイアウト内に編集可能なテキストを直接追加します。 この断片はフィールドにマッピングされておらず、指示やコンテキストコンテンツに使用されます。 |
| ローカライズ選択 | ローカライズされたフィールドに言語セレクターを追加し、ユーザーが入力言語を切り替えられるようにしました。 |
| 複数選択のリスト | 複数選択可能なピックリストにマッピングできるフィールドを追加します。 |
| Liferay 2026.Q1+ マルチセレクターチェックボックス | （以前は複数選択リストと呼ばれていました）複数選択ピックリストフィールドにマッピングできるチェックボックスの縦方向のリストを追加します。 このフラグメントは、すべてのオプションが表示される短いリストに最適です。 |
| Liferay 2026.Q1+ マルチセレクタードロップダウン | 複数選択可能なピックリストフィールドから複数のオプションを選択するための、検索可能なドロップダウンメニューを追加します。 選択されたアイテムは、取り外し可能なタグとして表示されます。 このフラグメントは複数選択フィールドのデフォルトであり、大規模なデータセットに推奨されます。 |
| 数値 | 数値入力フィールドを追加し、それを数値フィールド（整数、長整数、小数、および精度小数）にマッピングできるようにします。 プレースホルダー値とヘルプテキストを定義できます。 |
| リッチテキスト | リッチテキストフィールドにマッピングできるリッチテキストエディタを追加します。 |
| 選択 | 選択リストまたはリレーションシップフィールドにマッピングできるドロップダウンメニューを追加します。 マッピングされたフィールドに10個以上のオプションが含まれている場合、ユーザーはメニュー内を検索できます。 |
| ステッパー | 複数ステップのフォームにナビゲーション手順を追加します。 このフラグメントはフォームの流れを制御するものであり、フィールドにはマッピングされません。 |
| 送信ボタン | フォーム入力内容を送信するためのボタンを追加します。 すべてのフォームコンテナには、送信ボタンを含める必要があります。 |
| タグ | 現在のサイトまたはグローバルサイトのタグを使用してエントリにタグを付けるフィールドを追加します。 |
| テキストボックス | テキストフィールドにマッピングできる、1行テキスト入力フィールドを追加します。 |
| テキスト領域 | 複数行のテキスト入力フィールドを追加し、それを長文テキストフィールドにマッピングできるようにします。 |
| Liferay DXP 2025.Q4+ URLビデオプレビューア | 指定されたURLから動画のプレビューを表示するフィールドを追加します。 |
コンテンツの表示
Liferay 7.3以降に対応
コンテンツ表示フラグメントを使用すると、サイトコンテンツを個別に、またはコレクションの一部として表示できます。 ページコンテンツを評価またはフラグ付けするためのページ要素を追加することもできます。 DXPには、以下のコンテンツ表示フラグメントが含まれています。
| フラグメント | 説明 |
|---|---|
| コレクション表示 | 手動で定義されたコレクション、動的に定義されたコレクション、およびコレクションプロバイダによって定義されたコレクションを表示します。 コレクションをグリッド形式で表示するか、リストテンプレート（枠線付き、箇条書き、インライン、番号付き、スタイルなしなど）で表示するかを設定できます。 詳細については、 コレクションの表示 を参照してください。 |
| コンテンツの表示 | 文書やメディア、ウェブコンテンツ、ブログ、またはカテゴリから、単一のコンテンツ項目を表示します。 使用可能な構成オプションは、選択したコンテンツの種類によって異なります。 |
| 適用されたフィルター（7.4以降で利用可能） | コレクション表示に適用されたフィルターを表示および管理するための要素を追加します。 |
| コンテンツのフラグ | コンテンツ項目にフラグを立てるための要素を追加します。 |
| コレクションフィルター（7.4以降で利用可能） | 語彙やカテゴリを使用してコレクション表示をフィルタリングするための要素を追加します。 |
| コンテンツの評価 | コンテンツ項目を評価するための要素を追加します。 |
!!! note
Collection Filter fragments used in Collection Display fragments only work if mapped to object collection providers or blueprint collection providers.
アカウント
Liferay DXP 7.4 U72+/GA72+
アカウントセレクターを使用すると、商品閲覧時や注文作成時にアカウントを簡単に切り替えることができます。 詳細については、 アカウントセレクタフラグメントセットの使用 を参照してください。
カート
Liferay DXP 7.4 U69+/GA69+
ミニカートのフラグメントを使用して、カートの詳細な概要を確認してください。 この機能を使えば、商品の数量調整、商品の削除、決済手続きの開始、商品の検索やカートへの追加などを簡単に行うことができます。 詳細については、 ミニカートフラグメントの使用 を参照してください。
主なコンテンツ
Featured Contentフラグメントセットは、Liferay DXP 2024.Q4/Portal GA129で非推奨となり、将来のリリースで削除される予定です。
注目のコンテンツフラグメントは、複数のコンポーネントで構成される複雑なページ要素です。 フラグメントのレイアウトをプレビューするには、[フラグメントとウィジェット] パネルで カード ビュー (
) に切り替えます。 Liferayには、以下の注目コンテンツが含まれています。
Liferay DXP/Portal 7.3 では、各フラグメントの 情報 アイコン (
) にカーソルを合わせることでレイアウトをプレビューできます。
バナー
バナーフラグメントを使用して、コンテンツページにテキストとリンク要素を追加し、CTA（コールトゥアクション）バナーを作成します。 DXPには、次のレイアウトが含まれています。
機能
フィーチャーフラグメントを使用して、コンテンツページにテキスト、画像、リンク要素を追加し、主要な機能を宣伝します。 Liferayは以下のレイアウトを提供します。
ハイライト
ハイライトフラグメントを使用して、画像、テキスト、リンク要素をコンテンツページに追加し、ハイライト表示します。 Liferayは以下のレイアウトを提供します。
フッタ
Liferay DXP 7.3+
フッターフラグメントを使用して、 マスターページテンプレート にカスタムフッターを追加します。 各フッターには、ナビゲーションメニュー、サインインリンク、画像要素、著作権テキストが含まれています。 Liferayは、フッターフラグメント用に以下のレイアウトを提供します。
ナビゲーションバー
Liferay DXP 7.3+
ナビゲーションバーフラグメントを使用して、 マスターページテンプレート にカスタムヘッダーを追加します。 各ナビゲーションバーには、ナビゲーションメニュー、サインインリンク、およびロゴの画像要素が含まれています。 Liferayは、ナビゲーションバーフラグメント用に以下のレイアウトを提供します。
メニュー表示
Liferay DXP 7.4+
メニュー表示フラグメントを使用すると、コンテンツページにメニューを追加できます。 デプロイが完了すると、事前定義された ナビゲーション メニュー から選択できます。 サイトナビゲーションのメニュー表示フラグメントの設定方法の詳細については、 メニュー表示の設定 の「メニュー表示ウィジェットの設定」を参照してください。
ナビゲーション メニュー セレクター構成 を使用して、特定のマークアップと目的の動作を持つカスタム メニュー表示フラグメントを作成することもできます。