Salesforce

バナーテンプレートをカスタマイズする

Printable View
« Go Back
Information
バナーテンプレートをカスタマイズする
UUID-2b6cc670-059c-5342-275c-4a7d8da5630e
Article Content

バナーテンプレートのレイアウト、スタイル、コンテンツや動作はカスタマイズすることができます。御社のブランディングのスタイルと動作の優先設定に合わせた外観を作成できます。

[en] What is a Cookie Consent Banner?

[en] A Cookie Consent Banner is a pop-up that is displayed on websites that allows users to explicitly provide consent (e.g., accept or reject) to cookies that are available on the website.

バナーテンプレートをカスタマイズする

[en] Banners can be customized and created in two ways. This article details creating and customizing your Banner through the Templates section of Cookie Consent. To learn how to configure a banner when scanning a domain, see Scanning a Website.

  1. ［Cookieコンプライアンス］メニューから［テンプレート］を選択します。［テンプレート］画面が開きます。

  2. カスタマイズしたいテンプレートの名前をクリックします。［テンプレート詳細］画面が開きます。

  3. ［プラットフォーム］の［ウェブブラウザ］ボタンを選択します。

  4. ［バナー］タブを開きます。

  5. 記入欄に入力します。詳細は、レイアウト、スタイリング、コンテンツ、動作を参照してください。

  6. [en] Click the Save button for each template section you configure.

  7. ［テンプレートを保存する］ボタンをクリックします。

[en] For the changes to reflect on your site, the respective domain's production or testing script must be republished.

［バナーテンプレート詳細］参考画面

レイアウト

[en] This section allows you to select  how the banner is positioned on your website.

banner_layout.png

レイアウト

説明

位置の選択

センターの角丸デザイン

画面の中央に角丸デザインのバナーを表示します。

デフォルト

バナーの選択肢

サイトのCookieのカテゴリを示すバナーが表示され、ユーザーは自分の優先設定を構成できます。

デフォルト

フラット

画面の幅全部を使用してバナーを表示します。

下部

上部

浮いているフラットなデザイン

画面の片側を使用して、幅半分のバナーを表示します。

左側下部

右側下部

浮いている角丸デザイン

画面の片側を使用して、幅半分の角丸デザインのバナーを表示します。

左側下部

右側下部

浮いている角丸コーナーデザイン

画面の片側を使用して、三分の一幅の角丸デザインのバナーを表示します。

左側下部

右側下部

浮いている角丸アイコン

画面の下部にまたがり角丸デザインのバナーとアイコンを表示します。

デフォルト

バナーはありません

バナーなしで最初のレイヤーに優先設定センターを表示します。

注記

[en] If you do not want to display a modal when the user first visits your site and prefer to provide a link elsewhere for the user to update consent preferences, ensure you uncheck the Show Banner option in the geolocation rule.

[en] Additionally, selecting the No Banner layout option in the template does not have the same functionality as unchecking Show Banner in a geolocation rule.

[en] For more information, see ジオロケーションルールを構成する.

デフォルト

スタイリング

[en] This section allows you to customize colors for buttons, text, and the background of the Banner, in addition to other styling options. You can also add a custom logo.

注記

[en] The recommended color contrast ratio is 4.5:1 for WCAG compliance. You will see a warning in the tool if the contrast ratio is below the recommended guidelines.

banner_styling.png

記入欄

説明

［許可］［拒否］ボタンの色

バナーのボタンの色を選択します。

［許可せずに続行する］リンクの色

［許可せずに続行する］リンクのテキストの色を選択します。

[en] Save Choices Button

[en] Select the color for the Save Choices button.

ボタンのテキストカラー

ボタンの上のテキストの色を選択します。

テキストカラー

バナーのテキストの色を選択します。

背景色

バナーの背景色を選択します。

リンクのテキストカラー

［Cookieポリシー］リンクの色を選択します。

アコーディオン式背景色

アコーディオン式背景の色を選択します。

注記

[en] Only applicable if you do not override Banner styling in the Preference Center.

優先設定ボタンの色を管理する

優先設定センターのボタンの色を選択します。

注記

[en] Only applicable if Cookie Settings is configured as a button on the Banner in the Content section.

［優先設定を管理する］リンクの色

優先設定センターのリンクの色を選択します。

注記

[en] Only applicable if Cookie Settings is configured to be a link on the Banner in the Content section.

フォーカス境界線の色

フォーカス中の要素の境界の色を選択します。

[en] Category Container Color

[en] Select the color of the category container.

注記

[en] Only available for Banners with a Choices Banner layout.

[en] Category Style

[en] Select the display style of your categories, either Checkbox or Toggle.

注記

[en] Only available for Banners with a Choices Banner layout.

[en] Your Logo

[en] Click the Upload button to upload a custom logo image.

[en] The optimum size for a logo in the Banner:

  • [en] Height: 60px

  • [en] Width: 60px

[en] Supported file formats are PNG, JPG, and JPEG with a maximum size of 2MB.

[en] Company Logo Screen Reader Value (aria-label)

[en] Enter screen reader text for your custom logo.

[en] Remove Logo

[en] Click to remove your logo file.

カスタムCSS

バナーのスタイルを追加する場合、カスタムCSSを入力します。

[en] Click the Apply Custom CSS button to display custom CSS in your template preview.

注記

[en] Because there are regular updates to the Cookie Consent application, elements IDs used for CSS can change. OneTrust recommends testing custom CSS added in your template on a staging site before publishing a production CDN script.

[en] To test custom CSS, add CSS to your template, publish the CDN script and place the script on a website. For more information, see Publishing and Implementing Cookie Consent Scripts.

コンテンツ

[en] This section allows you to configure text for various fields on the Banner, including buttons and links.

タイトルと説明

banner_title.png

記入欄

説明

バナータイトル

バナーのタイトルを記入します。

通知の説明

プライバシー通知の簡単な説明を記入します。

注記

[en] To add HTML to this section, disable HTML sanitization. For more information, see HTMLサニタイズを設定する.

Cookieポリシーリンク

banner_policy.png

記入欄

説明

Cookieポリシーリンクを表示する

Cookieポリシーリンクを表示する場合はこれを有効に設定します。

Cookieポリシーリンクを表示する

Cookieポリシーリンクに表示したいテキストを入力します。

Cookieポリシーリンク

ポリシーのURLを入力します。CookieポリシーのURLを入力します。

[en] Screen Reader Value (aria-label)

[en] Enter the text for the screen reader value

注記

[en] When configured for a CTV banner, the Cookie Policy Link will display as a QR code.

CTV_QR_banner.png

[en] For more information, see Customizing the CTV Banner Template.

インプリントリンク

banner_imprint.png

記入欄

説明

インプリント（サイトの奥付情報）のリンクを表示する

バナーでのインプリントリンクの表示を有効にします。

注記

[en] This link is optional and can be used alongside the Cookie Policy link.

インプリントリンクURL

リンクのURLを入力します。

インプリントリンクのスクリーンリーダーの値（ariaラベル）

インプリントリンクのariaラベルの値を入力します。

パートナーリンク

banner_partners.png

記入欄

説明

パートナーリンク

ベンダーリストへのリンクの表示名。

[en] When selected, the Partners Link it will direct the user to the Vendor List within the Preference Center.

ボタンセット

banner_buttons.png

記入欄

説明

［すべて許可］ボタンを表示する

バナーに［すべてのCookieを許可する］ボタンを表示し、それをクリックするとバナーが閉じるようにするには、この設定を有効にします。

［すべてのCookieを許可］ボタン

すべて許可ボタンに表示するテキストを入力します。

Cookie設定ボタンを表示する

バナーに優先設定センターを開くためのボタンを表示し、サイト訪問者がCookieの選択内容を詳細に設定できるようにするには、この設定を有効にします。

Cookie設定ボタン

Cookie設定ボタンに表示するテキストを入力します。

ウェブページ上でCookie優先設定センターにアクセスするためにこのボタンを使用する場合

[en] Select Display the same Button Text as in banner to display the the same text on the Preference Center as configured on the Banner.

[en] Select Show other text to display custom text. You can add the text you want to display for the Cookie Settings button in the Other Text field.

[en] This setting configures the text that is displayed when implementing the Do Not Sell & Cookie Setting Button script. For more information, see Publishing and Implementing Cookie Consent Scripts.

[en] Other Text

[en] If Show other text is selected, enter the text for the Cookie Settings button.

Cookie設定ボタンのスタイル

Cookie設定をリンクとして表示するか、ボタンとして表示するかを選択します。

［すべて拒否］ボタンを表示する

［すべてのCookieを拒否する］ボタンを表示するには、この設定を有効にします。

［すべて拒否］ボタンのテキスト

すべて拒否ボタンに表示するテキストを入力します。

［閉じる］ボタンを表示する

バナーに［閉じる］ボタンを表示するにはこれを有効に設定します。

スクリーンリーダーの値（ariaラベル）

［閉じる］ボタンのariaラベルの値を入力します。

注記

Ariaラベルとは、テキストを持たないページ要素のためのメタデータです。サイト訪問者がスクリーンリーダーまたはそれに類似したアシスト技術を使用している場合、関連要素を特定するためにariaラベルが使用されます。

[en] Continue Without Accepting link

[en] If Continue Without Accepting Link is selected, enter the text to display for the Continue Without Accepting link.

注記

[en] This option leaves the consent “as-is” based on the default consent model configured in the geolocation rules.

[en] Opt Out Signal

opt_out_notif.png

[en] Field

[en] Description

[en] Enable Opt-Out Signal Notification

[en] Enable the setting to display a notification on your cookie Banners and Preference Center that the opt-out preference signal has been honored.

[en] The notification will display if any of these three conditions are met:

  • [en] GPC is enabled in a user's browser.

  • [en] GPC is configured in your geolocation rules.

  • [en] A user has explicitly opted out of any cookie categories in the Banner or Preference Center.

[en] Notification

[en] Enter the notification text to display to your end users.

動作

[en] This section allows you to configure different behaviors for the Banner.

banner_template_behavior.png

記入欄

説明

バナーのフォーカス

有効にすると、以下のいずれかのオプションによって、バナーの読み込み時の初期フォーカスが定義されます。

  • 最初のフォーカス - バナー

    このオプションを選択すると、バナーが読み込まれたときに初期フォーカスがバナーに移動します。バナーが閉じられたか、操作された後、フォーカスはページ本体に位置付けられます。

  • 最初のフォーカス - リンク、ボタン

    このオプションを選択すると、バナーが読み込まれたときに初期フォーカスがCookieポリシーまたはプライバシーポリシーに移動します。バナーが操作されたか、閉じられた後、フォーカスは最初のタブ可能な要素に位置付けられます。

無効にすると、ページに表示される要素の自然な順序に従いフォーカスが移動します。

バナーとのインタラクションを必須にする

有効にすると、ユーザーがCookie使用を受け入れるか設定を変更するまで、このサイトへのアクセスをブロックできます。

[en] Banner pushes down page

[en] Enable to insert the Banner above the page header instead of as an overlay.

注記

[en] Only available for Banners with a Flat layout and Top position.

バナーのアニメーション

バナーの表示方法を決定するアニメーションオプションを選択します。

  • スライドイン

  • フェードイン

  • アニメーションを削除する

相対的フォントサイズを使用する

有効にすると、御社のベースHTMLで定義されたフォントサイズに基づきバナーと優先設定センターのフォントサイズを設定します。

バナー言語を管理する

[en] The Language field displays all languages that are available for a template. Only languages that are enabled for the template will appear in the selection menu.

language_field_banner.png

[en] You can add additional languages for the banner and select from the Advanced Languages section to cover additional language HTML code options that may be used on your website. For more information on how OneTrust language detection can work on your website, see the Enable Language Detection on Scripts section in Publishing and Implementing Cookie Consent Scripts.

注記

[en] Only out-of-the-box OneTrust Banner text is automatically translated for applicable languages. Any custom text changes made to a template are not automatically translated to other languages. For these changes to translate, you must provide your own translations in the template.

ヒント

バナースクリプトでは、下線またはハイフンを使用して言語コードを定義できます。

例：en-US、en_USなど。

  1. [en] On the Cookie Consent menu, select Templates. The Templates screen appears.

  2. [en] Click on the name of the template. The Template Details screen appears.

  3. ［言語を管理する］をクリックします。［言語を管理する］モーダルが開きます。

    banner_languages.png

  4. 有効にする言語のボックスにチェックを入れます。［デフォルト］コラムのボックスにチェックを入れると、その言語が新しいデフォルト言語に設定されます。

    注記

    地域に応じて言語が選択されるようにするには［高度な言語設定を表示する］を有効にします。

  5. ［保存］ボタンをクリックします。

[en] Things to Know: Enhancing Banner Performance

[en] You can leverage the following configurations to potentially increase page load speed and improve Banner performance:

[en] If you continue to experience performance issues, please contact OneTrust Support here.
 
Article Visibility
85,101
Translation
Japanese
Not Checked
Powered by