詳細設定リファレンス
利用可能 7.4 U37+/GA37+
Liferayのデフォルトフラグメントには、Collection Displayフラグメントを除き、すべて詳細設定が含まれています。 高度な設定では、フラグメントにカスタムCSSを追加したり、その内容を検索可能にするかどうかなどを設定することができます。
フレームジェントの詳細設定を行うには、そのページの更新 - 詳細オプションの権限が必要です。
フラグメントの詳細設定にアクセスするには
フラグメントに対応したページやテンプレートの編集を開始します。
ブラウザ サイドパネル (
) を開き、 ページ要素 タブを開き、目的のフラグメントを選択します。または、ページやテンプレート内の目的のフラグメントをクリックします。
ページ要素」サイドメニューの「アドバンス」 タブをクリックします。
標準詳細設定
詳細設定のあるデフォルトフラグメントには、すべて以下のオプションがあります。
検索結果に表示しない
フラグメントの内容をサイト内の検索結果から非表示にするかどうかを指定します。 フラグメントコンテンツを隠すことで、無関係な検索結果や冗長な検索結果を減らすことができます。 選択されたフラグメントが子フラグメントを含む場合、それらはその設定を引き継ぎます。
カスタム CSS
利用可能 7.4 U34+/GA34+
Custom CSS テキストボックスを使用して、フラグメントにCSSを追加します。 デフォルトでは、このテキストボックスにはこのプレースホルダーが含まれています。
.[$FRAGMENT_CLASS$] {
}
[$FRAGMENT_CLASS$] は、設定するフラグメントの一意な名前を表すCSSクラス・トークンです。 この CSS コードは、現在のフラグメントにのみ適用される。 例えば、フラグメントの背景を通常は赤、ユーザーがカーソルを合わせたときは青に設定することができます。
.[$FRAGMENT_CLASS$] {
background: red;
}
.[$FRAGMENT_CLASS$]:hover {
background: blue
}
ページがレンダリングされるとき、 [$FRAGMENT_CLASS$] はフラグメントのクラス名に置き換えられます（例： lfr-layout-structure-item-01d752e4-32e3-ed4a-9cd6-fcaf483d0c34)。
拡張*アイコン ( 
) をクリックするとモーダルウィンドウが開き、フラグメントのCSSを編集する際に余裕が生まれます。
また、現在使用している スタイルブック に由来する変数をカスタム CSS で使用することができます。 この例では、スタイルブックのInfoカラー（ダークブルーと定義）を使用して、フラグメントの背景色を設定しています。
.[$FRAGMENT_CLASS$] {
background: var(--info);
}
CSS クラス
CSS Classes フィールドを使用して、 Custom CSS で使用するクラスを追加します。 複数のクラスを追加する場合は、それぞれをスペース、カンマ、または改行で区切ってください。 これらのクラスは、同じページ内の他のフラグメントに使用することができます。 入力中に既存のクラスの候補が表示されます。
CSSクラス]テキストボックスには、自分で追加したCSSクラスだけが候補として表示されます。 既存のクラスや変数（[$FRAGMENT_CLASS$]など）は表示されないので、このフィールドに追加する必要はありません。
コンテナの詳細設定
コンテナフラグメントには、 標準的なもの と高度な設定があります。
HTML タグ
div, header, nav, section, article, main, aside, or footerの中から、コンテナフラグメント用に生成された HTML タグを選択してください。 これらのタグは、ウェブスクレイパー、ブラウザ、サイトレンダラーが、ページのコンテンツをより簡単に検索して取得できるようにするためのものです。 選択されたタグは、選択されたコンテナ自体にのみ適用され、ネストされたフラグメントやコンテンツには適用されません。
コンテンツの可視性を自動に設定
利用可能 7.4 U37+/GA37+
デフォルトでは、Liferayはページ内のすべてのコンテナを自動的にレンダリングします。 しかし、コンテナの content-visibility プロパティを auto に設定すると、必要なときだけ要素がレンダリングされるようになります。 これにより、ページの読み込み性能を向上させることができます。
