デフォルトフラグメントリファレンス
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 または Documents and Media から動画 をページまたはテンプレートに埋め込みます。 動画を自動再生、ループ再生、ミュート、またはコントロールの非表示に設定できます。 エンドユーザーからビデオコントロールを非表示にすることもできます。 |
Web コンテンツ構造 をテキスト フィールドとともに使用する場合、フィールド タイプを 複数行 に設定すると、Web コンテンツ エディタで複数行入力が可能になります。 ただし、改行（\n）は自動的にレンダリングされません。 その結果、その構造を使用している記事のテキストフィールドを段落フラグメントにマッピングすると、1行として表示されます。 書式設定を保持し、改行を維持するには、リッチテキストフィールドを使用してください。
フォームコンポーネント
コンテンツページにフォームを作成するには、フォームコンポーネントのフラグメントを使用します。 これらのフラグメントはカスタムオブジェクトのみをサポートします。 これらを有効にしてアクセスするには、少なくとも1つの公開オブジェクトが必要です。 詳細については、 フォームフラグメントの使用 を参照してください。
| 断片 | 説明 |
|---|---|
| CAPTCHA | 自動送信を防止するため、フォームコンテナにCAPTCHA認証を追加します。 一度追加されたフォームは、送信前に人間の確認が必要となります。 |
| カテゴリー | 利用可能な語彙を使用してエントリを分類するためのフィールドを追加します。 |
| チェックボックス | ブール型フィールドにマッピングできるチェックボックスを追加します。 |
| 日付 | カスタム日付フィールドにマッピングできる日付選択機能を追加します。 |
| 日時 | カスタムの日時フィールドにマッピングできる、日付と時刻を組み合わせたピッカーを追加します。 |
| Liferay DXP 2025.Q4+ ドラッグアンドドロップアップロード | 添付ファイル欄に、ドラッグ＆ドロップによるファイルアップロード機能を追加します。 |
| Liferay DXP 2026.Q3+ メール | メールアドレス入力欄を追加し、メールアドレスフィールドにマッピングできるようにします。 入力されたアドレス形式を検証し、オートコンプリート用に設定されているドメインを提案します。 |
| ファイルアップロード | 添付ファイルフィールドにマッピングできるファイルアップロードボタンを追加します。 マッピングされた添付ファイルフィールドによって、アップロード動作が決まります。 デフォルトでは、このフラグメントにはサポートされているファイル拡張子が表示されます。 |
| フォームボタン | （以前は「送信ボタン」と呼ばれていました）フォームにカスタムボタン要素を追加します。 このフラグメントはフィールドにマッピングされておらず、通常はナビゲーションやカスタムアクションに使用されます。 |
| フォームコンテナ | コンテンツページにフォームを作成するためのコンテナを追加します。 コンテナをカスタムオブジェクトにマッピングする必要があります。 コンテナは、各オブジェクトフィールドに対してフォームフラグメントを自動的に生成し、コンテナ内にはフォームフラグメントのみを収容します。 |
| 関係性を形成する | 関係フィールドにマッピングされるフィールドを追加し、ユーザーがエントリ間の関係を作成できるようにします。 |
| フレンドリーURL | エントリの分かりやすいURL値を定義するためのフィールドを追加します。 |
| Liferay DXP 2025.Q4+ インラインテキスト | フォームレイアウト内に編集可能なテキストを直接追加します。 この断片はフィールドにマッピングされておらず、指示やコンテキストコンテンツに使用されます。 |
| ローカライズを選択 | ローカライズされたフィールドに言語セレクターを追加し、ユーザーが入力言語を切り替えられるようにしました。 |
| 複数選択リスト | 複数選択可能なピックリストにマッピングできるフィールドを追加します。 |
| Liferay 2026.Q1+ マルチセレクターチェックボックス | （以前は複数選択リストと呼ばれていました）複数選択ピックリストフィールドにマッピングできるチェックボックスの縦方向のリストを追加します。 このフラグメントは、すべてのオプションが表示される短いリストに最適です。 |
| Liferay 2026.Q1+ マルチセレクタードロップダウン | 複数選択可能なピックリストフィールドから複数のオプションを選択するための、検索可能なドロップダウンメニューを追加します。 選択されたアイテムは、取り外し可能なタグとして表示されます。 このフラグメントは複数選択フィールドのデフォルトであり、大規模なデータセットに推奨されます。 |
| 数値 | 数値入力フィールドを追加し、それを数値フィールド（整数、長整数、小数、および精度小数）にマッピングできるようにします。 プレースホルダー値とヘルプテキストを定義できます。 |
| Liferay DXP 2026.Q3+ 電話番号 | 電話番号入力欄を追加し、電話番号フィールドにマッピングできるようにします。 国コードを固定することも、ユーザーが国コードセレクターから選択できるようにすることもできます。 |
| リッチテキスト | リッチテキストフィールドにマッピングできるリッチテキストエディタを追加します。 |
| 選択 | 選択リストまたはリレーションシップフィールドにマッピングできるドロップダウンメニューを追加します。 マッピングされたフィールドに10個以上のオプションが含まれている場合、ユーザーはメニュー内を検索できます。 |
| ステッパー | 複数ステップのフォームにナビゲーション手順を追加します。 このフラグメントはフォームの流れを制御するものであり、フィールドにはマッピングされません。 |
| 送信ボタン | フォーム入力内容を送信するためのボタンを追加します。 すべてのフォームコンテナには、送信ボタンを含める必要があります。 |
| タグ | 現在のサイトまたはグローバルサイトのタグを使用してエントリにタグを付けるフィールドを追加します。 |
| 文章 | テキストフィールドにマッピングできる、1行テキスト入力フィールドを追加します。 |
| テキストエリア | 複数行のテキスト入力フィールドを追加し、それを長文テキストフィールドにマッピングできるようにします。 |
| Liferay DXP 2025.Q4+ URLビデオプレビューア | 指定されたURLから動画のプレビューを表示するフィールドを追加します。 |
コンテンツ表示
Liferay 7.3以降に対応
コンテンツ表示フラグメントを使用すると、サイトコンテンツを個別に、またはコレクションの一部として表示できます。 ページコンテンツを評価したり、フラグを付けたりするためのページ要素を追加することもできます。 DXPには、以下のコンテンツ表示フラグメントが含まれています。
| 断片 | 説明 |
|---|---|
| コレクション展示 | 手動で定義されたコレクション、動的に定義されたコレクション、およびコレクションプロバイダによって定義されたコレクションを表示します。 コレクションのレイアウトは、グリッド、フレックス行、またはフレックス列として設定できます。 詳細については、 コレクションの表示 を参照してください。 |
| コンテンツ表示 | 文書やメディア、ウェブコンテンツ、ブログ、またはカテゴリから、単一のコンテンツ項目を表示します。 利用可能な設定オプションは、選択したコンテンツタイプによって異なります。 |
| 適用済みフィルター（バージョン7.4以降で利用可能） | コレクション表示に適用されたフィルターを表示および管理するための要素を追加します。 |
| コンテンツフラグ | コンテンツアイテムにフラグを付けるための要素を追加します。 ユーザーがフラグを送信すると、Liferayはコンテンツを含むサイトまたは組織の管理者にメールとアプリ内通知を送信します。 コンテンツの所有者は通知に名前が記載されているが、通知自体は受け取っていない。 フラグはダッシュボードに集約されません。 |
| コレクションフィルター（バージョン7.4以降で利用可能） | 語彙やカテゴリを使用してコレクション表示をフィルタリングするための要素を追加します。 |
| コンテンツレーティング | コンテンツアイテムを評価するための要素を追加します。 |
!!! 注
コレクション表示フラグメントで使用されるコレクションフィルタフラグメントは、オブジェクトコレクションプロバイダまたはブループリントコレクションプロバイダにマッピングされている場合にのみ機能します。
アカウント
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 7.3以降
フッターフラグメントを使用して、 マスターページテンプレート にカスタムフッターを追加します。 各フッターには、ナビゲーションメニュー、ログインリンク、画像要素、および著作権表示が含まれています。 Liferayは、フッターフラグメント用に以下のレイアウトを提供します。
ナビゲーションバー
Liferay 7.3以降
ナビゲーションバーフラグメントを使用して、 マスターページテンプレート にカスタムヘッダーを追加します。 各ナビゲーションバーには、ナビゲーションメニュー、サインインリンク、およびロゴ用の画像要素が含まれています。 Liferayは、ナビゲーションバーフラグメント用に以下のレイアウトを提供します。
メニュー表示
Liferay 7.4以降
メニュー表示フラグメントを使用すると、コンテンツページにメニューを追加できます。 デプロイ後は、事前定義された ナビゲーション メニュー から選択できます。 サイトナビゲーションのメニュー表示フラグメントの設定方法の詳細については、 メニュー表示の設定 の「メニュー表示ウィジェットの設定」を参照してください。
ナビゲーション メニュー セレクター構成 を使用して、特定のマークアップと目的の動作を持つカスタム メニュー表示フラグメントを作成することもできます。