Content Page Editor UI Reference
Liferay 7.4 U37+/GA37+の場合
コンテンツ ページ エディターを使用すると、コンテンツ ページ内の要素を 追加 したり構成したりできます。 コンテンツ ページに移動し、 編集 (
) をクリックします。 これにより、コンテンツ ページを構築するためのツールとコンポーネントを提供する編集ツールバーとサイドバーが開きます。
編集ツールバー
ツールバーには、ユーザー エクスペリエンスのカスタマイズ、ページの翻訳、編集モードの切り替えなどを行うためのツールが用意されています。
エクスペリエンス
[エクスペリエンス] ドロップダウン メニューを使用すると、さまざまなユーザー向けに現在のページのカスタマイズされたバージョンを作成できます。 詳細については、 コンテンツ ページのパーソナライズ を参照してください。
翻訳
言語フラグをクリックして、翻訳ドロップダウンメニューにアクセスします。 ここでは、ページでアクティブな言語のステータスを表示し、言語を切り替えて翻訳を直接表示および編集できます。 詳細については、 サイト言語の設定 を参照してください。
エクスペリエンスを使用する場合は、エクスペリエンスごとに翻訳を管理することもできます。 詳細については、「 エクスペリエンスのローカリゼーションの管理 」を参照してください。
デバイスディスプレイ
デバイスアイコンをクリックして、Liferayのレスポンシブレイアウトエディタにアクセスします。 ここでは、デスクトップ (
)、タブレット (
)、横向きの電話 (
)、縦向きの電話 (
) など、さまざまな画面サイズに合わせてページを設定できます。 サイズ変更ハンドルバーを使用して手動で画面のサイズを変更できます。 詳細については、 レスポンシブ レイアウトの構築 を参照してください。
フラグメントとウィジェット パネルと ページ デザイン オプション パネルは、デスクトップ レイアウトにのみ表示されます。
編集履歴
現在のセッションで行われた変更を確認するには、 履歴 (
) をクリックします。 ここから変更を復元または元に戻したり、[元に戻す] ボタンや [やり直し] ボタンを使用したりできます。
ページ エディターでフラグメントを直接編集する場合、編集フィールドの外側をクリックするか Tab キーを押すなどして編集フィールドを離れた後にのみ変更が保存されます。
編集フィールドを離れると、変更が保存され、[元に戻す] ボタンが期待どおりに機能します。 そうでない場合、最初の [元に戻す] クリックで編集セッションが終了し、変更が保存されますが、元に戻すには 2 回目の [元に戻す] クリックが必要になります。
編集モードセレクター
コンテントページのサイドバーで利用できる編集オプションは、選択した編集モードによって異なります。
| 編集モード | 説明 | 利用可能なオプション |
|---|---|---|
| ページデザイン | ページとページの内容を更新する権限がある場合に、ページをデザインすることができます。 | |
| コンテンツ編集 | ページの更新権限がある場合は、コンテンツの編集が可能ですが、ページの内容は編集できません。 |
サイドバーを切り替える
ページのプレビューの編集サイドバーを非表示にするには、 サイドバーの切り替え (
) をクリックします。
アプリケーション バーで アクション (
) をクリックし、 新しいタブでプレビュー を選択して、現在のページ エクスペリエンスと言語を新しいタブで確認します。
ページテンプレートに変換
アプリケーション バーの アクション () をクリックし、 ページ テンプレートに変換 (
) を選択して、現在のページ デザインに基づいて ページ テンプレート を作成します。
公開
デフォルトでは、公開すると変更がすぐに公開されます。 ただし、 ワークフロー プロセス がレビューと公開のプロセスを指揮するように構成されている場合は、[公開] をクリックすると定義した手順が開始されます。
編集サイドバー
選択した編集モードに応じて、編集サイドバーでこれらのパネルにアクセスすることができます。
- 
フラグメントとウィジェット
フラグメントとウィジェット パネル (
) では、すぐに使用できるページ要素とカスタム ページ要素の両方にアクセスできます。
フラグメント: フラグメントは、拡張性、再利用性、ドラッグ＆ドロップ可能な要素で、コンテントページの主要な構成要素として機能します。 例としては、レイアウト要素、ビデオ、テキストオーバーレイ付きのバナー画像などがあります。 すぐに使用できるフラグメントの詳細については、「 フラグメントの使用 」を参照してください。独自のフラグメントを作成する方法については、「 フラグメントの開発 」を参照してください。
ウィジェット: ウィジェットは、ページに動的な機能を追加する アプリケーション です。 例としては、ブログ、掲示板、カレンダーなどがあります。 詳細については、 コンテンツ ページでのウィジェットの使用 を参照してください。
Liferay 7.4 U37/GA37 以降では、フラグメントとウィジェットのセットを並べ替えるには、「順序」ボタン (
) をクリックします。 スター ボタン (
) をクリックして、フラグメントまたはウィジェットをお気に入りの要素のリストに追加します。
ブラウザ
ブラウザ パネル (
) を使用して、ページ内のすべての要素を表示、整理、管理します。 要素は階層的に表示されます。 Liferay 7.4 U37/GA37+ では、ブラウザ パネルで要素をドラッグ アンド ドロップして並べ替えたり、要素をダブルクリックして名前を変更したりできます。 要素を選択すると、その設定が設定サイドパネルに表示されます。 フラグメントのサブエレメントを選択すると、その他の設定にアクセスできます。 詳細については、 フラグメントの構成 を参照してください。
ヘッダーとフッターの要素はブラウザ パネルに表示されません。 これらは マスター ページ テンプレートでのみ編集できます。
複数の要素の選択
Liferay DXP 2024.Q4/Portal GA129以降では、CTRLを押しながら各要素をクリックするか、SHIFT を押しながらクリックして要素の範囲を選択することにより、複数の要素を選択できます。 詳細については、 機能の可用性 を参照してください。
ブラウザで要素の横にある アクション () をクリックするか、要素のヘッダーにある オプション (
) をクリックして、要素を切り取り、コピー、または貼り付けることもできます。
メニューから目的のアクションを選択するか、 ESC を押してすべての選択をクリアするか、ブラウザのサイド パネルの外側をクリックして選択モードを終了します。
切り取ったりコピーした複数のフィールドまたはフラグメントを一度に貼り付けることができ、元の書式、構造、順序が保持されます。 システムは貼り付ける前にアイテムを検証し、互換性のあるアイテムのみが結合されるようにして、レイアウトの整合性を維持します。
コンテンツ ページ内の要素と、コピーおよび貼り付けに関する動作のリストは次のとおりです。
| 要素 | 切り取り/コピー/貼り付け | 観察 |
|---|---|---|
| コレクション項目 | ❌ | コピーまたは貼り付けはできません。 |
| コレクション | ✅ | 貼り付けると、コンテンツはコレクション項目の先頭に挿入されます。 |
| 列/モジュール | ❌ | コピーできません。 先頭に挿入されたアイテムのみを貼り付けることができます。 |
| 行/グリッド | ✅ | 貼り付けると、選択した行またはグリッド内ではなく、その後ろにコンテンツが挿入されます。 |
| フォームステップ | ❌ | コピーできません。 先頭に挿入されたアイテムのみを貼り付けることができます。 |
| フォームステップコンテナ | ✅ | 貼り付けると、コンテンツはフォーム コンテナー内ではなく、フォーム コンテナーの後に配置されます。 |
| フラグメント | ✅ | 貼り付けると、選択したフラグメントの後にコンテンツが追加されます。 |
| ドロップゾーン | ❌ | コピーできません。 先頭に挿入されたアイテムのみを貼り付けることができます。 |
| フラグメントのドロップゾーン | ❌ | コピーできません。 先頭に挿入されたアイテムのみを貼り付けることができます。 |
| コンテナ | ✅ | 貼り付けると、コンテナーの先頭にコンテンツが挿入されます。 |
| フォーム | ✅ | 貼り付けると、フォームの先頭にコンテンツが挿入されます。 |
| ルート | ⚠️ | キーボードショートカットを使用した貼り付けのみを許可します。 |
切り取り、コピー、貼り付けなどの操作にはキーボード ショートカットを使用することもできます。 利用可能なすべてのショートカットを表示するには、ページ エディターの左下にあるキーボード ショートカット メニュー (
) を開きます。
![キーボード ショートカットは、[キーボード ショートカット] メニューの下に表示されます。](https://resources.learn.liferay.com/images/dxp/latest/en/sites/creating-pages/using-content-pages/content-page-editor-ui-reference/images/07.png)
ページデザインオプション
ページ デザイン オプション パネル (
) を開いて、ページの マスター ページ テンプレート または スタイル ブックを変更します。
オプション (
) をクリックして、 フロントエンド クライアント拡張などの追加のページ デザイン オプションにアクセスします。
ページコンテンツ
ページ コンテンツ パネル (
) では、ページに直接追加されたコンテンツを表示および編集できます。 これには、インラインテキスト、画像、ウェブコンテンツの記事などを含めることができます。 コンテンツを表示しながら、コンテンツアイテムの検索やタイプ別にフィルタリングが可能です。 ページに コレクションが含まれている場合は、そのアイテムを表示したり、新しいアイテムを追加したりできます。 詳細については、「 コンテンツ ページでのコンテンツの管理 」を参照してください。
コレクション以外に、マップされたコンテンツは［ページコンテンツ］パネルに表示されません。 パネルには、ページに直接追加されたコンテンツのみが含まれます。
掲示板のディスカッション
コメント パネル (
) を使用して、特定のフラグメントまたはウィジェットに関するフィードバックを残し、投稿者と共同作業を行うことができます。 また、公開されているコメントの閲覧、編集、削除、返信も可能です。
メンション が有効になっている場合は、コメントの一部としてページ更新権限を持つユーザーにタグを付けることができます。
コメントを追加するには、 コメント パネルを開き、目的のページ要素を選択します。
アプリ
Liferay DXP 2025年第3四半期以降
現在、この機能はリリース機能フラグ (LPD-35941) の背後にあります。 詳細については、 リリース機能フラグ をお読みください。
パネルで利用可能な無料のフラグメントを表示および検索し、ページに追加します。 フラグメントを追加する前に、フラグメントをクリックして詳細とオプションを確認します。
詳細については、「 ページへのマーケットプレイス フラグメントの追加」をお読みください。
機能の可用性
ドラッグ & ドロップ/複数選択
CTRL キーまたは SHIFT キーを使用して複数の要素を選択し、[オプション] メニューまたはキーボード ショートカットを使用して切り取り、コピー、貼り付けのアクションを実行します。
| Liferayのバージョン | 機能のステータス | 機能フラグラベル |
|---|---|---|
| Liferay DXP 2024.Q4/ポータル GA129 | ベータ | データフィールド操作ツールの改善 (LPD-18221) |
| Liferay DXP 2025.Q1/ポータル GA132 | リリース | データフィールド操作ツールの改善 (LPD-18221) |
| ライフレイ DXP 2025年第2四半期 | Googleアナリティクス | - |