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

フラグメントへのスタイル適用

ページにフラグメントを追加する場合、サイドバーメニューを使用して、 スタイル 構成タブなどのフラグメントを構成できます。

サイドバーメニューの [スタイル] タブを使用して、ページ上のフラグメントごとにスタイルを構成します。

デフォルトでは、すべてのスタイル (色、間隔などを含む) がフラグメント全体に適用されます。フラグメントに含まれる要素は、CSS で許可されている場合はこれらの変更を継承しますが、そうでない場合、内部の要素は無視されます。

スタイルの適用方法の変更

Liferay 7.4 U31+ および GA31+

スタイルを適用する方法を変更するには、フラグメントの HTML 設定を変更する必要があります。フラグメントに含まれる要素に data-lfr-styles 属性を追加すると、その要素に適用されているスタイルが、その特定の要素に適用されるようになります。

注

フラグメントごとに 1 つの data-lfr-styles 属性のみが許可されます。

たとえば、次の HTML を使用して単純なカスタムフラグメントを構成し、それにスタイルの変更を適用すると、フラグメント全体に適用されます (レンダリング時に HTML を囲む外側の <div> タグを追加することによって)。

<a class="btn btn-nm btn-primary" data-lfr-editable-id="link" data-lfr-editable-type="link">
   Editable link.
</a>

この例のフラグメントの背景色を黒に変更すると、その変更は通常バックエンドのスタイル用に作成される外側の <div> に適用されます。 UI では次のようになります。

data-lfr-styles 属性がないと、背景色がフラグメント全体に適用され、望ましくない効果が生じます。

ただし、フラグメント内の内部要素の 1 つに data-lfr-styles 属性を追加すると、スタイルの変更をその特定の要素に適用することができます。これを使用して、これらの変更に最も適した要素を選択できます。

上記の例では、ボタン要素の HTML タグに属性を追加できます。

<a data-lfr-styles class="btn btn-nm btn-primary" data-lfr-editable-id="link" data-lfr-editable-type="link">
   Editable link.
</a>

これにより、スタイルの変更がフラグメントのその部分に適用されます。ここで、背景色を黒に変更すると、選択した要素の色が具体的に変更されます。

この例の data-lfr-styles 属性は、フラグメント内のボタンに背景色を具体的に適用します。

注

フラグメントに data-lfr-styles 属性を追加しても、ページにすでに追加されているフラグメントのインスタンスには影響しません。詳細については、「フラグメントの変更の伝播」を参照してください。

警告

編集可能な要素内に含まれるタグには、 data-lfr-styles 属性は使用できません ( data-lfr-editable または lfr-editable 属性を使用)。これらの編集可能なタグのいずれかに含まれるフラグメントの一部に data-lfr-styles を追加しても無視されます。

フラグメントを編集するための好みの方法を使用して、 data-lfr-styles 属性を追加できます。