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

詳細設定リファレンス

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 で使用することもできます。この例では、スタイルブックの Info カラー (濃い青として定義) を使用して、フラグメントの背景色を設定します。

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

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

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

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

注

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

Capability:

Resource Type:

Feature:

Deployment Approach: