詳細設定リファレンス
Available 7.4 U37+/GA37+
Liferayのデフォルトのフラグメントには、Collection Displayフラグメントを除き、高度な設定が含まれています。 高度な設定では、フラグメントにカスタムCSSを追加したり、コンテンツを検索可能にするかどうかを設定したりすることができます。
フレームエージェントの詳細設定を行うには、ページの更新 - 詳細オプションのパーミッションが必要です。
フラグメントの詳細設定にアクセスするには
-
フラグメントをサポートするページまたはテンプレートの編集を開始します。
-
ブラウザ]サイドパネル(
)を開き、[ページ要素]タブに移動し、目的のフラグメントを選択します。または、ページやテンプレート内の目的のフラグメントをクリックします。
-
ページ要素サイドメニューの 詳細 タブをクリックします。
標準詳細設定
高度な設定を持つすべてのデフォルトのフラグメントには、以下のオプションがある。
検索結果に表示しない
サイトの検索結果からフラグメントのコンテンツを非表示にするかどうかを指定します。 断片的なコンテンツを隠すことで、無関係で冗長な検索結果を減らすことができる。 選択したフラグメントが子フラグメントを含む場合、子フラグメントはその設定を継承します。
カスタム CSS
Available 7.4 U34+/GA34+
カスタム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）。
Expandアイコン ( 
) をクリックするとモーダルウィンドウが開き、フラグメントのCSSを編集する際に余裕ができます。
また、現在使用している スタイルブック に由来する変数をカスタム CSS で使用することもできます。 この例では、スタイル・ブックの情報色（紺色と定義）を使用して、フラグメントの背景色を設定しています：
.[$FRAGMENT_CLASS$] {
background: var(--info);
}
CSS クラス
Custom CSS で使用するクラスを追加するには、 CSS Classes フィールドを使用します。 複数のクラスを追加する場合は、それぞれをスペース、コンマ、または改行で区切ってください。 これらのクラスは、同じページ上の他のフラグメントに使用することができます。 入力中に既存のクラスの候補が表示されます。
CSS Classesテキストボックスには、自分で追加したCSSクラスだけが候補として表示されます。 既存のクラスや変数（[$FRAGMENT_CLASS$]など）は表示されないので、このフィールドに追加する必要はない。
コンテナの詳細設定
コンテナの断片には、 標準的なもの と高度な設定がある。
HTML タグ
コンテナフラグメントに生成される HTML タグを選択します: div、header、nav、section、article、main、aside、footer のいずれかです。 これらのタグは、ウェブスクレイパー、ブラウザ、サイトレンダラーがページのコンテンツをより簡単に検索・取得するのに役立ちます。 選択されたタグは、選択されたコンテナ自体にのみ適用され、ネストされたフラグメントやコンテンツには適用されない。
コンテンツの可視性を自動に設定
デフォルトでは、Liferayはページ内のすべてのコンテナを自動的にレンダリングします。 しかし、コンテナの content-visibility プロパティを auto に設定すると、要素は必要なときだけレンダリングされる。 これにより、ページのロード・パフォーマンスを向上させることができる。
