カスタムCSSを使用してプラットフォームの色を変更する

  • 更新

Biz_Enter.png

Hopinが事前定義したクラスを使用して、一部のCSSクラスを上書きできます。CSSの基本知識を備えていることをおすすめします。

備考:カスタムCSSにはアメリカ英語を使用します(例:「colour」ではなく「color」を使用)。

 

1. イベント内で編集するコンポーネントを右クリックします。 [調査]を選択します。

Screen_Shot_2020-07-28_at_5.24.51_PM.png

 

2. HTML要素を表示したポップアップウィンドウで、<button class="
の後に続くテキストを選択してコピーします。

Screen_Shot_2020-07-28_at_5.50.47_PM.png

3. 期間を追加してコピーしたHTML要素を貼り付け、その後にカスタムCSSコードを追加します。

複製されたイベントでは、クラス名の末尾に自動生成されたタグ(この例では__FHok6)が機能しないことがあります。 __FHok6なしで[class*="..."]を使用することをおすすめします。[class*=""]が機能しない場合は、自動生成されたタグ付きでもお試しください。

以下は、この例で追加するCSSコードです。

.form-button-styles_button_FHok6 {background-color: orange;}

4. [イベントダッシュボード] > [セットアップ] > [テーマ]の順に移動します。 「色」という名前のヘッダーが表示されます。 [プライマリカラー]欄に、ご希望のブランドカラーの(#記号で始まる)16進数コードを入力します。

備考:ここには必ず16進数コードを入力してください。 RGB値や色の名前(「青」や「赤」など)を入力するとエラーを引き起こす可能性があります。

変更を適用するには、[保存]をクリックします。

image3.gif

5. 次に、[詳細設定を表示]をクリックし、テーマページ下のカスタムCSSフィールドにステップ2と3のCSSコードを貼り付けます。

Screenshot_2021-03-13_at_10.53.13.png

 

5. [保存]をクリックします。 ブラウザの右上にある[プレビュー]をクリックすると、新しい機能が確認できます。

動的クラス名

動的クラス名を持つイベントエリアと要素(リプレイ、ネットワークなど)がいくつかあります。 そのため、現時点ではすべてのイベントで機能する統一されたカスタムCSSコードをイベントオーガナイザーに提供することはできません。 CSSを「公式」のイベントに使用する前に、まずはテストイベントで試してみることをお勧めします。

Hopinは常に変化しています!

Hopinプラットフォームは頻繁に更新されるため、カスタムCSSコードはしばらくして機能しなくなる可能性があることにご注意ください。 ガイドを最新の状態に保つために最善を尽くしています。 ただし、一部のコードや色が機能しない場合は、support@hopin.com    までお気軽にお問い合わせください。

イベントを開始する1週間前までに再度プレビューすることをお勧めします。 これにより、間違いを修正し、必要に応じて最終的な変更を行うのに十分な時間が残ります。

イベントを複製してテストを行い、強調されたスケジュール済みのセグメント、[現在進行中]バナー、またはアクティビティパネルなどのターゲット領域で色がどのように表示されるかを確認することもできます。 

 

ご質問やサポートのお問い合わせは、support@hopin.comまでお気軽にお寄せください。

この記事は役に立ちましたか?