ポップアップガイド内のボタンごとに色を変えるには？

PLAINERのポップアップガイドでは、複数のボタンを設置できます。
通常、すべてのボタンは同じ色で表示されますが、ボタンごとに異なる色を設定したいというケースもあるかと思います。

例：特定のボタンだけ色を変える
たとえば、以下のように色分けしたい場合：

「デモツアーを開始する」：ブルー（デフォルトカラー）のまま
「詳細機能を見る」：オレンジに変更

この場合、以下のCSSをポップアップガイドの本文に入力することで対応可能です。

<style>.plainer-popup-link:nth-of-type(2){background-color: #f18800!important; font-size: 16px; color: #FFFFFF!important;}.plainer-popup-link:hover{background-color:#f18800!important;}</style>

この設定を追加することで、2番目のボタンのみ色が変更されます。

各項目の補足

▪️ボタンの位置を変更したい場合
以下の部分の数字を変更してください。
.plainer-popup-link:nth-of-type**(2)**
「(2)」を「(1)」「(3)」などに変更することで、変更対象のボタンの位置を調整できます。

▪️ボタンの色を変更したい場合
以下のコード内の色コード（#f18800）を変更することで、自由に色を設定できます。
background-color:** #f18800**
※カラーコードは、Webカラーコード（例：#FF0000 は赤）をご利用ください。

▪️注意点
この方法は「ボタンの表示順」に基づいて色を設定しています。
そのため、ボタンの順番や数が変わると、適用される色も変わってしまう点にご注意ください。

ボタンごとに色を分けることで、ユーザーの視認性を高めたり、操作をわかりやすくしたりすることができます。
設定方法に不明点がある場合は、担当カスタマーサクセスまでお気軽にご相談ください。