要素の属性

すべての要素には、そのデザインをカスタマイズするために変更可能ないくつかの属性があります。属性は、中画面から要素を選択することで変更できます。右側で属性を変更することができます。

コンテナ

コンテナは、クッキーバナーカスタマイザーの構成要素です。最適な実践方法は、すべての要素をコンテナに追加することです。コンテナ内の他の要素をドラッグして、複雑な構造を構築することができます。

• 寸法: コンテナに幅と高さを追加します。使用可能な値は、ピクセル（px）、パーセント（%）、および自動（auto）です。自動に指定すると、ブラウザが値を計算し、コンテナ内の要素にほぼピッタリ合うようになります。
• 色
  • 背景: コンテナの背景色を変更します。カラー選択で色を選択するか、HEX、RGBA、HSLA値を追加することができます。
  • テキスト: コンテナの文字色を変更します。カラーピッカーで色を選択するか、HEX、RGBA、HSLA値を追加することができます。
• 余白: コンテナの上下左右に余白をピクセル単位で追加します。
• パディング:コンテナの上、下、右、左にパディングをピクセル単位で追加する。
• 塗装
  • 半径: ピクセルのコンテナに半径を追加する。
  • 影: ピクセルのコンテナに影を追加する。
• 位置合わせ
  • フレックスディレクション: デフォルトでは、フレックス方向は縦列になります。この場合、コンテナに追加されたすべての要素は、互いの下に配置されます。もう一つのオプションは横列で、これはコンテナ内のすべての要素を互いに隣り合わせに配置します。
  • スペースの塗りつぶし: デフォルトでは、スペースはありません。そのため、コンテナは指定された幅と高さになります。これを「はい」に変更すると、コンテナはその要素の周りを回り込み、必要最小限の幅と高さに変更されます。
  • アイテムの配置: デフォルトでは、フレックススタートになっています。フレックススタートはコンテナ内のすべての要素を左寄せにし、センター はコンテナ内のすべての要素を中央寄せにし、フレックスエンド はコンテナ内のすべての要素を右寄せにします。
  • コンテンツの正当化: デフォルトでは、フレックススタート になっています。フレックススタート はすべての要素を上から開始し、センター はコンテナ内のすべての要素をコンテナの高さの中央に揃え、フレックスエンド はすべての要素をコンテナの末尾に揃えます。
• 可視化: 詳しい可視化の情報は、こちらをご覧ください。

テキスト

テキスト要素には、もちろんテキストを入れることができます。テキスト要素をクリックし、内容の編集を開始することで、表示されるテキストを変更することができます。

• 印刷
  • フォントサイズ: ピクセルでのフォントのサイズ。
  • 位置合わせ: デフォルトでは、テキストは左寄せになります。その他のオプションとして、中央揃え、右揃えがあります。
  • 太さ:文字の太さを変更します。普通から太字へ。普通（デフォルト）、中、太字。
• 余白: コンテナの上下左右に余白をピクセル単位で追加します。
• 見た目
  • テキスト: テキストの色を変更します。カラーピッカーで色を選択するか、HEX、RGBA、HSLA値を追加することができます。
  • 影: ピクセルでテキストに影を追加します。
  • 可視化:詳しい可視化の情報は、こちらをご覧ください。

ボタン

ボタンに特定のアクションを結びつけることで、すべてのクッキーを受け入れる、すべてのクッキーを拒否するなどの行為を行うことができます。また、ボタン内のテキストは、テキストをクリックすることで変更することができます。

• 色
  • 背景: ボタンの背景色を変更します。カラーピッカーで色を選択するか、HEX、RGBA、HSLAの値を追加することができます。
  • テキスト: ボタンの文字色を変更します。カラーピッカーで色を選択するか、HEX、RGBA、HSLAの値を追加することができます。
  • 背景オーバー: ボタンがうろついたときに、ボタンの背景色を変更します。色はカラーピッカーで選択するか、HEX、RGBA、HSLAの値を追加することができます。
• 余白: ボタンの上下左右に余白をピクセル単位で追加します。
• パディング: ボタンの上下左右にパディングをピクセル単位で追加します。
• 塗装
  • スタイル: スタイルを指定します。デフォルトでは、スタイルがフルで、背景全体があなたが指定した色になります。スタイルがアウトラインの場合、ボタンの境界線のみが選択した色で表示されます。
  • 端の範囲: ボタンのピクセル単位の半径
• 印刷
  • フォントサイズ: ボタンの中のテキストのピクセル単位のサイズ
  • 位置合わせ: デフォルトでは、テキストはボタンの左側に配置されます。その他のオプションとして、中央揃え、右揃えがあります。
  • 太さ: ボタンの中の文字の太さを変更します。普通から太字へ。普通（デフォルト）、中、太字。
  • アクション: このオプションでは、ボタンにアクションを追加することができます。選択肢は、すべてのクッキーを受け入れる、選択を保存する、設定を調整する、すべてのクッキーを拒否する、または「なし」です。「なし」はボタンに何もアクションを追加しません。「すべてのCookieを承諾する」アクションは、すべてのCookiesを受け入れるアクションを追加します。「選択を保存する」アクションは、選択したトグルを保存します。「設定を調整する」アクションについて、詳しくはこちらのリンクをご覧ください。「すべてのクッキーを拒否する」アクションは、必要なクッキーを除くすべてのクッキーを拒否します。
• 可視化:詳しい可視化の情報は、こちらをご覧ください。

画像

カスタムCookieバナーに映る画像。

• 寸法: 画像に幅と高さを追加します。使用可能な値は、ピクセル（px）、パーセント（%）、および自動です。自動を指定すると、ブラウザが値を計算し、コンテナ内の要素にほぼフィットするようになります。
• 画像
  • 画像のURL: 画像のリンク
  • 画像のフィット: デフォルトではぴったりフィットする設定。フィルは画像の寸法を埋め、必要に応じて画像を伸ばしたり縮めたりしてフィットさせます。オプションの「含む」は縦横比を維持し、寸法内に収まるようにリサイズされます。
• 可視化:詳しい可視化の情報は、こちらをご覧ください。

トグル

トグルにCookieのカテゴリーを追加して、ユーザーがCookieの好みを切り替えられるようにすることができます。トグルの隣には、テキストをクリックして変更することができます。

• 色
  • テキスト:トグルの文字色を変更します。カラーピッカーで色を選択するか、HEX、RGBA、HSLA値を追加することができます。
  • トグル:トグルが選択されたときの球体の色を変更します。色はカラーピッカーで選択するか、HEX、RGBA、HSLA値を追加することができます。
  • トグルバー:トグルが選択されたときのバーの色を変更します。カラーピッカーで色を選択するか、HEX、RGBA、HSLA値を追加することができます。
• 余白: トグルの上下左右にピクセル単位の余白を追加します。
• 印刷
  • テキストの横幅: デフォルトでは右端です。右を選択すると、テキストはトグルの右側に配置されます。もう一方の左オプションは、テキストをトグルの左側に配置します。
  • フォントサイズ: トグルの横の文字の大きさをピクセルで指定します。
  • 位置合わせ: デフォルトでは、テキストはテキストフィールドの左側に整列されます。その他のオプションとして、中央揃え、右揃えがあります。
  • 太さ:トグルの横に表示される文字の太さを変更します。普通から太字へ。普通（デフォルト）、中、太字。
• トグルグループ:トグルには、トグルグループを追加することができます。これらは、Cookieのカテゴリです。ユーザーが「選択を保存する」アクションのボタンをクリックすると、選択したトグルのトグルグループが保存されます。また、ユーザーが戻ってきたときに、再びCookieのバナーを見ると、その人の同意に対応するトグルが選択されます。
• 可視化:詳しい可視化の情報は、こちらをご覧ください。