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

詳細設定リファレンス

7.4 U37+/GA37+ が利用可能です

Liferayのデフォルトフラグメントには、コレクション表示フラグメントを除き、すべて高度な設定が含まれています。詳細設定では、フラグメントにカスタムCSSを追加したり、コンテンツの検索可能性を設定したりすることができます。

注

フラグメントの詳細設定を構成するには、そのページに対する「更新 - 詳細オプション」の権限が必要です。

フラグメントをサポートするページまたはテンプレートの編集を開始します。
ブラウザ サイドパネル () を開き、 ページ要素 タブに移動して、目的のフラグメントを選択します。

または、ページやテンプレート内の目的のフラグメントをクリックします。
ページ要素」サイドメニューの「詳細設定」タブをクリックします。

ページ要素のサイドメニューから、フラグメントの詳細設定にアクセスできます。

標準の詳細設定

詳細設定が可能なすべてのデフォルトフラグメントには、以下のオプションがあります。

サイトの検索結果からフラグメントのコンテンツを非表示にするかどうかを指定します。フラグメントコンテンツを非表示にすることで、無関係な検索結果や重複した検索結果を減らすことができます。選択されたフラグメントに子フラグメントが含まれている場合、子フラグメントはその設定を継承します。

サイト内の検索結果から、フラグメントのコンテンツを非表示にするかどうかを決定します。

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)。

ヒント

をクリックして () を展開すると、モーダルウィンドウが開き、フラグメントの CSS を編集する際に作業スペースが広がります。

また、現在使用しているスタイル・ブックに由来する変数をカスタムCSSで使用することもできます。この例では、スタイルブックの情報色（濃い青色として定義）を使用して、フラグメントの背景色を設定します。

.[$FRAGMENT_CLASS$] {
    background: var(--info);
}

スタイルブックの変数を使用することで、特定のフラグメントのCSSを微調整できます。

CSS クラス フィールドを使用して、カスタム CSS で使用するクラスを追加します。複数のクラスを追加する場合は、それぞれをスペース、カンマ、または改行で区切ってください。これらのクラスは、同じページ上の他のフラグメントにも使用できます。入力中に既存のクラスの候補が表示されます。

このフィールドにカスタムCSSクラスを入力すると、同じページ上の他のフラグメントの詳細設定に、それらのクラスが候補として表示されます。

注

CSSクラスのテキストボックスには、自分で追加したCSSクラスのみが候補として表示されます。既存のクラスや変数 ( [$FRAGMENT_CLASS$]など) は表示されず、このフィールドに追加する必要もありません。

Capability:

Resource Type:

Feature:

Deployment Approach: