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

フラグメントドロップゾーンの定義

ドロップゾーンは、コンテンツページの構築に不可欠です。それらを使用して、ユーザーが他のフラグメントとウィジェットをドラッグアンドドロップできるフラグメント内の領域を定義することにより、独自のページレイアウトと動的表示を作成できます。

警告

ドロップゾーンを過度に使用すると (例: 100 を超える)、ページエディターでパフォーマンスの問題が発生する可能性があります。影響は環境やページの複雑さによって異なる場合があります。パフォーマンスを向上させるには、ドロップゾーンの代わりにグリッドとコンテナーフラグメントを使用することを検討してください。

ドロップゾーンを定義するには、

サイト管理 → デザイン → フラグメントに移動します。
［フラグメントセット］で、カスタマイズしたいフラグメントのあるセットを選択します。
編集するフラグメントの アクション () をクリックし、編集を選択してフラグメントエディターを開きます。
HTML コード領域で、 <lfr-drop-zone></lfr-drop-zone> ラベルを追加して、フラグメント内のドロップゾーンを定義します。

重要

フラグメント内の編集可能な要素にドロップゾーンを追加することはできません。

次のコードは、このラベルを使用して、タブフラグメント内にドロップゾーンを定義する方法を示しています。

<div class="tab-panel">
   [#list 0..configuration.numberOfTabs-1 as i]
   <div aria-labelledby="tab${i+1}-${fragmentEntryLinkNamespace}" class="d-none tab-panel-item" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel${i+1}-${fragmentEntryLinkNamespace}" role="tabpanel" tabindex="0">
      <lfr-drop-zone data-lfr-drop-zone-id="${i+1}" data-lfr-priority="${i+1}"></lfr-drop-zone>
   </div>
   [/#list]
</div>

コンテンツページエディターのサイドバーに表示される結果は次のとおりです。

タブフラグメントでは、コンテンツページエディターに 4 つの異なるドロップゾーンが表示されます。