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

フラグメントの閲覧の構成

Liferay DXP/ポータル 7.4 以上

フラグメントを使用すると、さまざまなレイアウトと情報を含むコンテンツページを組み立てることができます。 Liferay DXP 7.4 以降では、ユーザーの画面サイズに基づいてフラグメントの可視性を設定できます。たとえば、フラグメントは、コンピューターからレンダリングされたページでは非表示になっているが、スマートフォン上の同じページでは表示されることがあります。

コンテンツページエディターから、ページエディターの上部にあるビューポートコントロールを使用して、各画面サイズのフラグメントの可視性を構成します。

ビューポートコントロールを使用して、コンテンツページでのフラグメントの可視性を構成します。

フラグメントの閲覧とスタイルの継承の理解

左側のビューポートに適用したフラグメントの可視性とスタイルは、右側のビューポートの 1 つに異なるスタイルを指定しない限り、右側のすべてのビューポートに適用されます。たとえば、デスクトップビューポートでフラグメントを非表示にすると、そのフラグメントは他のすべてのビューポートでも非表示になります。次の表は、この構成をまとめたものです。

ビューポート	閲覧可能?	フラグメントの閲覧設定
デスクトップ（A）	いいえ	非表示
タブレット（B）	いいえ	デフォルト / 継承
スマホ（横）(C)	いいえ	デフォルト / 継承
スマホ（縦）(D)	いいえ	デフォルト / 継承

右側のビューポートは、左側のビューポートの設定を引き継ぎます。

この設定により、フラグメントを（たとえば）横向きの携帯電話で表示可能にすると、フラグメントはそのビューポートと縦向きの携帯電話のビューポートで表示されたままになります。次の表は、新しい構成をまとめたものです。

ビューポート	閲覧可能?	フラグメントの閲覧設定
デスクトップ（A）	いいえ	非表示
タブレット（B）	いいえ	デフォルト / 継承
スマホ（横）(C)	はい	閲覧可能
スマホ（縦）(D)	はい	デフォルト / 継承

この例では、フラグメントはコンピューター上では非表示になっていますが、スマートフォンを使用すると表示されます。

コンテントページエディタのビューポートの動作

次の表は、各ビューポートの動作をまとめたものです。

ビューポート	説明
デスクトップ	デフォルトのビューポート。ここで定義したフラグメントのスタイルと可視性は、別のビューポートで別のスタイルまたは可視性を指定しない限り、他のすべてのビューポートに適用されます。
タブレット	タブレットサイズの画面に対応したビューポートです。ここで定義するフラグメントのスタイルと可視性は、横向きまたは縦向きの電話のビューポートでスタイルまたは可視性を指定しない限り、電話のビューポートに適用されます。
スマホ（横）	このビューポートで定義したフラグメントスタイルと可視性は、縦向きの電話のビューポートで別のスタイルまたは可視性を指定しない限り、縦向きの電話のビューポートにも適用されます。
スマホ（縦）	このビューポートは、ここで別のスタイルや閲覧性を指定しない限り、他のビューポートで行ったスタイルや閲覧性の変更を引き継ぎます。

フラグメントの閲覧の変更

コンテンツページでのフラグメントの表示は、次の 3 つの方法で変更できます。

コンテンツページエディターのサイドバーの ブラウザー () → ページ要素 領域で、ページフラグメントの横にある 非表示 () または表示 () をクリックします。
コンテンツページエディターのサイドバーの ブラウザー () → スタイル 領域で、 フラグメントを非表示 ボックスをオンまたはオフにします。
フラグメントのオプションメニュー () から、 フラグメントを非表示 () を選択します。
非表示のフラグメントを復元するには、ブラウザページ要素領域から、ページフラグメントの横にある 非表示解除 () コントロールをクリックします。

注

デフォルトでは、非表示のフラグメントは display:none スタイルで DOM 内に残り、そのコンテンツが検索エンジンにアクセス可能になります。非表示のコンテンツへのボットのアクセスを減らすには、ユーザーエージェントに基づいてボットを検出するセグメントを使用してページエクスペリエンスを設定できます。

例：フラグメントの閲覧性の使用

次の例を考えてみましょう。保険会社は、顧客が保険契約を管理するために使用できる新しいモバイルアプリを宣伝したいと考えています。ユーザーがスマートフォンからページにアクセスしたときに、このアプリを宣伝したいと考えています。この場合、新しいスマートフォンアプリのプロモーションバナーを作成し、このバナーをスマートフォンビューポートでのみ表示することができます。

デフォルトのデスクトップビューポートから、スマートフォンアプリのプロモーションテキストを含む新しいフラグメントを追加します。
プロモーションテキストでフラグメントを非表示にします。フラグメントはすべてのビューポートで非表示になりました。
［スマホ（横）］ ビューポートをクリックします。このビューポートの変更は、縦向きの電話のビューポートにも影響します。
フラグメントの可視性を変更して、電話のビューポートでプロモーションテキストを表示します。
異なるビューポートをクリックすると、その効果を確認することができます。プロモーションテキストは、横向きの電話と縦向きの電話のビューポートでのみ利用できるようになりました。