CSS によるロケーター＋ページのカスタマイズ
CSS を使用して実現できるカスタマイズをまとめています
Table of Contents
カスタマイズの一部は、ロケーター＋ページ製品では標準機能として提供されていません。この記事では、CSS スタイルを使用してそれらを実現する方法を説明します。
製品の進化に伴い、以下のカスタマイズの一部は、ウィジェット属性でカスタマイズ可能な正式機能になる場合があります。その場合、CSS の代わりに、ウィジェットでのカスタマイズ方法を説明する記事へのリンクに置き換えられます。
情報
以下の例は、現在お使いの CSS と競合する可能性がありますのでご注意ください。これらはあくまで例であり、お客様のウェブサイトの HTML で動作させるには調整が必要な場合があります。
Uberall は、ロケーターへの CSS 調整が今後のロケーターのアップデートでもサポートされることを保証するものではありません！
フォントの変更
例
#store-finder-widget * {
font-family: 'Times New Roman', Times, serif !important;
color: red !important;
}
ピンとして使用するロゴの白い背景を削除する
#store-finder-widget .ubsf_custom-pin-default{
background: none
}
#store-finder-widget .ubsf_custom-pin-highlighted{
background: none
}
テキストの配置
例：
yourElementHere {
text-align: center;
}
yourElementHere {
text-align: left;
}
yourElementHere {
text-align: right;
}
yourElementHere {
text-align: justify;
}
最終結果：
#store-finder-widget .ubsf_location-page .ubsf_location-page-info-wrapper .custom-content-lis {
text-align: left;
}
Delete
マップの幅と高さを変更する（例）
By default, the Locator & Pages widget uses a set maximum width on the page it's implemented on. To make the the Locator use 100% of the width available to it from its enclosing container, add the following data-attribute to the widget: data-showfullwidth="true"
#store-finder-widget .ubsf_store-finder-column {
height: 700px;
}
コンテンツリストをテキストボックスとして使用する
ロケーターに「説明」のようなセクションをもう 1 つ追加したい場合は、People コンテンツリストまたはカスタムコンテンツリストを転用できます。以下の CSS を使用するには、対象のコンテンツリストのアイテムが 1 件以下である必要があります。
カスタムコンテンツリストの CSS
<style>
.ubsf_content-list-item.ubsf_customitems-list-item.ubsf_has-photo, .ubsf_content-list-item.ubsf_customitems-list-item{width:unset !important; flex:auto !important;}
.ubsf_content-list-item.ubsf_customitems-list-item.ubsf_has-photo > .description.ubsf_content-list-item-description, .ubsf_content-list-item.ubsf_customitems-list-item > .description.ubsf_content-list-item-description{max-height: unset !important;}
</style>
People コンテンツリストの CSS
<style>
.ubsf_content-list-item.ubsf_person-item.ubsf_has-photo > .description.ubsf_content-list-item-description, .ubsf_content-list-item.ubsf_person-item > .description.ubsf_content-list-item-description{max-height: unset !important;}
</style>
Delete