Content Page Editor UI Reference
Liferay 7.4 U37+/GA37+ 用
コンテントページエディタを使用して、コンテントページ内の要素を追加し設定することができます。 コンテンツページに移動して、 編集 (
)をクリックします。 これにより、コンテンツページを作成するためのツールとコンポーネントを提供する編集ツールバーとサイドバーが開きます。
![[編集]ボタンをクリックすると、編集ツールバーとサイドバーにアクセスできます。](https://resources.learn.liferay.com/images/dxp/latest/en/sites/creating-pages/using-content-pages/content-page-editor-ui-reference/images/01.png)
編集ツールバー
ツールバーには、ユーザーエクスペリエンスのカスタマイズ、ページの翻訳、編集モードの切り替えなどを行うためのツールが用意されています。
![[編集]ボタンをクリックすると、編集ツールバーにアクセスできます。](https://resources.learn.liferay.com/images/dxp/latest/en/sites/creating-pages/using-content-pages/content-page-editor-ui-reference/images/02.png)
エクスペリエンス
「エクスペリエンス」ドロップダウンメニューを使用すると、異なるユーザー層向けに現在のページのカスタマイズバージョンを作成できます。 詳細については、 コンテンツページのパーソナライズ を参照してください。
翻訳
言語フラグをクリックして、翻訳ドロップダウンメニューにアクセスします。 ここでは、ページの有効な言語の状態を確認したり、言語を切り替えて翻訳を直接表示および編集したりできます。 詳細については、 サイト言語の設定 を参照してください。
エクスペリエンスを使用する場合は、各エクスペリエンスの翻訳を管理することもできます。 詳細については、 エクスペリエンスのローカライズの管理 を参照してください。
デバイスディスプレイ
デバイスアイコンをクリックして、Liferayのレスポンシブレイアウトエディタにアクセスします。 ここでは、デスクトップ(
)、タブレット(
)、横向きスマートフォン(
)、縦向きスマートフォン(
)など、さまざまな画面サイズに合わせてページを設定できます。 画面サイズは、サイズ変更ハンドルバーを使って手動で変更できます。 詳細については、 レスポンシブレイアウトの構築 を参照してください。
フラグメントとウィジェット および ページデザインオプション パネルは、デスクトップレイアウトでのみ表示されます。
編集履歴
現在のセッションで行われた変更を確認するには、 履歴 (
)をクリックしてください。 ここから変更を復元または元に戻すか、元に戻すボタンとやり直しボタンを使用できます。
ページエディタでフラグメントを直接編集する場合、変更内容は編集フィールドを離れた後(たとえば、フィールドの外側をクリックするか、Tabキーを押す)にのみ保存されます。
編集フィールドからフォーカスを外すと、変更が保存され、元に戻すボタンが正常に機能します。 そうしないと、最初の「元に戻す」クリックで編集セッションが終了し、変更が保存されてしまうため、元に戻すには2回目の「元に戻す」クリックが必要になります。
![[元に戻す]、[やり直し]、[履歴]ボタンを使って、変更した内容を元に戻すことができます。](https://resources.learn.liferay.com/images/dxp/latest/en/sites/creating-pages/using-content-pages/content-page-editor-ui-reference/images/03.png)
編集モードセレクター
コンテントページのサイドバーで利用できる編集オプションは、選択した編集モードによって異なります。
| 編集モード | 説明 | 利用可能なオプション |
|---|---|---|
| ページデザイン | ページとページの内容を更新する権限がある場合に、ページをデザインすることができます。 | |
| コンテンツ編集 | ページの更新権限がある場合は、コンテンツの編集が可能ですが、ページの内容は編集できません。 |
![編集モードは、[ページデザイン]と[コンテンツ編集]のどちらかを選択します。](https://resources.learn.liferay.com/images/dxp/latest/en/sites/creating-pages/using-content-pages/content-page-editor-ui-reference/images/04.png)
サイドバーを切り替える
サイドバーの切り替え (
) をクリックすると、編集サイドバーが非表示になり、ページのプレビューが表示されます。
アプリケーションバーの アクション (
) をクリックし、 新しいタブでプレビュー を選択すると、現在のページの表示と言語が新しいタブで表示されます。
ページテンプレートに変換
アプリケーション バーの アクション (
) をクリックし、 ページ テンプレートに変換 (
) を選択して、現在のページ デザインに基づいて ページ テンプレート を作成します。
公開
デフォルトでは、公開すると変更がすぐに公開されます。 ただし、 ワークフロープロセス がレビューと公開プロセスを制御するように構成されている場合、[公開]をクリックすると、定義された手順が開始されます。
編集サイドバー
選択した編集モードに応じて、編集サイドバーでこれらのパネルにアクセスすることができます。

フラグメントとウィジェット
フラグメントとウィジェットのパネル(
)では、標準搭載のページ要素とカスタムページ要素の両方にアクセスできます。
フラグメント: フラグメントは、拡張性、再利用性、ドラッグ&ドロップ可能な要素で、コンテントページの主要な構成要素として機能します。 例としては、レイアウト要素、ビデオ、テキストオーバーレイ付きのバナー画像などがあります。 既製のフラグメントの詳細については、 フラグメントの使用 を参照するか、独自のフラグメントの作成方法については、 フラグメントの開発 を参照してください。
ウィジェット: ウィジェットは アプリケーション であり、ページに動的な機能を追加します。 例としては、ブログ、掲示板、カレンダーなどがあります。 詳細については、 コンテンツページでのウィジェットの使用 を参照してください。
Liferay 7.4 U37/GA37以降では、[順序]ボタン(
)をクリックして、フラグメントとウィジェットのセットの順序を変更できます。 星ボタン(
)をクリックすると、フラグメントまたはウィジェットをお気に入り要素のリストに追加できます。
ブラウザ
ブラウザパネル(
)を使用して、ページ内のすべての要素を表示、整理、管理します。 要素は階層構造で表示されます。 Liferay 7.4 U37/GA37+ では、ブラウザ パネル内で要素をドラッグ アンド ドロップして並べ替えたり、要素をダブルクリックして名前を変更したりできます。 要素を選択すると、その設定が設定サイドパネルに表示されます。 フラグメントのサブエレメントを選択すると、その他の設定にアクセスできます。 詳細については、 フラグメントの設定 を参照してください。
ヘッダーとフッターの要素はブラウザパネルに表示されません。 これらは マスターページテンプレート でのみ編集できます。
複数の要素を選択する
Liferay DXP 2024.Q4/Portal GA129以降では、各要素をクリックする際にCTRL (Windows/Linux) または OPTION (macOS)を押しながらクリックするか、SHIFT を押しながらクリックして要素の範囲を選択することで、複数の要素を選択できます。 詳細は 機能の利用可能性 を参照してください。
ブラウザで要素の横にある アクション (
) をクリックするか、要素のヘッダーにある オプション (
) をクリックすることで、要素を切り取り、コピー、貼り付けることもできます。
メニューから目的の操作を選択するか、 ESC を押してすべての選択を解除するか、ブラウザのサイドパネルの外側をクリックして選択モードを終了します。
切り取ったりコピーしたりした複数のフィールドや断片を一度に貼り付けることができ、元の書式、構造、順序が保持されます。 システムは貼り付け前にアイテムを検証し、互換性のあるアイテムのみが結合されるようにすることで、レイアウトの整合性を維持します。

コンテンツページ内の要素と、それらのコピー&ペーストに関する動作の一覧を以下に示します。
| 要素 | 切り取り/コピー/貼り付け | 観察 |
|---|---|---|
| コレクション項目 | ❌ | コピー&ペーストはできません。 |
| コレクション | ✅ | 貼り付け時には、コンテンツはコレクションアイテムの先頭に挿入されます。 |
| 列/モジュール | ❌ | 複製禁止。 先頭に挿入されたアイテムのみ、内部に貼り付けることができます。 |
| 行/グリッド | ✅ | 貼り付けを行うと、選択した行またはグリッドの後ろにコンテンツが挿入され、その中には挿入されません。 |
| フォームステップ | ❌ | 複製禁止。 先頭に挿入されたアイテムのみ、内部に貼り付けることができます。 |
| フォームステップコンテナ | ✅ | 貼り付けを行うと、コンテンツはフォームコンテナ内ではなく、コンテナの後ろに配置されます。 |
| フラグメント | ✅ | 貼り付け時には、選択した断片の後にコンテンツが追加されます。 |
| ドロップゾーン | ❌ | 複製禁止。 先頭に挿入されたアイテムのみ、内部に貼り付けることができます。 |
| フラグメントのドロップゾーン | ❌ | 複製禁止。 先頭に挿入されたアイテムのみ、内部に貼り付けることができます。 |
| コンテナ | ✅ | 貼り付けを行うと、コンテンツがコンテナの先頭に挿入されます。 |
| フォーム | ✅ | 貼り付けを行うと、フォームの先頭に内容が挿入されます。 |
| ルート | ⚠️ | キーボードショートカットを使った貼り付けのみ可能です。 |
切り取り、コピー、貼り付けなどの操作には、キーボードショートカットを使用することもできます。 利用可能なショートカットをすべて表示するには、ページエディタの左下にあるキーボードショートカットメニュー(
)を開きます。

ページデザインオプション
ページデザインオプションパネル (
)を開いて、ページの マスターページテンプレート または スタイルブックを変更します。
オプション (
) をクリックすると、 フロントエンド クライアント拡張機能 を含む追加のページ デザイン オプションにアクセスできます。
ページコンテンツ
ページコンテンツパネル(
)では、ページに直接追加されたコンテンツを表示および編集できます。 これには、インラインテキスト、画像、ウェブコンテンツの記事などを含めることができます。 コンテンツを表示しながら、コンテンツアイテムの検索やタイプ別にフィルタリングが可能です。 ページに コレクションが含まれている場合、そのアイテムを表示したり、新しいアイテムを追加したりできます。 詳細については、 コンテンツ ページでのコンテンツの管理 を参照してください。
コレクション以外に、マップされたコンテンツは[ページコンテンツ]パネルに表示されません。 パネルには、ページに直接追加されたコンテンツのみが含まれます。
掲示板のディスカッション
コメントパネル(
)を使用して、特定のフラグメントやウィジェットに関するフィードバックを残したり、貢献者と協力したりできます。 また、公開されているコメントの閲覧、編集、削除、返信も可能です。
メンション が有効になっている場合、コメントの一部としてページ更新権限を持つユーザーをタグ付けできます。
コメントを追加するには、 コメント パネルを開き、目的のページ要素を選択します。
アプリ
Liferay DXP 2025.Q3+
現在、この機能はリリース機能フラグ(LPD-35941)によって制限されています。 詳細については、 リリース機能フラグ を参照してください。
パネルで利用可能な無料フラグメントを表示および検索し、ページに追加します。 追加する前に、いずれかのフラグメントをクリックすると、詳細とオプションが表示されます。
詳細については、 マーケットプレイスフラグメントをページに追加する をお読みください。

機能の利用可能性
ドラッグ & ドロップ/複数選択
Windows/Linux の場合は CTRL キー、macOS の場合は OPTION キーと SHIFT キーを同時に押して複数の要素を選択し、オプション メニューまたはキーボード ショートカットを使用して切り取り、コピー、貼り付けを行います。
| Liferayのバージョン | 機能ステータス | 機能フラグラベル |
|---|---|---|
| Liferay DXP 2024.Q4/Portal GA129 | ベータ | データフィールド操作ツールの改良版(LPD-18221) |
| Liferay DXP 2025.Q1/Portal GA132 | リリース | データフィールド操作ツールの改良版(LPD-18221) |
| Liferay DXP 2025.Q2 | Googleアナリティクス | - |