高度なブランディング:ハイライトテーマの作成

  • 更新

organizers_only.jpgimage6.png

image14.png

Hopinイベント会場の色をブランディングに合わせたい場合は、このガイドに従って、時間をかけすぎずにハイライトテーマを作成できます。 このテーマを適用するには、いくつかのテーマの色を変更し、カスタムCSSコードを追加する必要があります。

ハイライトテーマでは、イベント会場全体のHopinのデフォルト色を置き換えることができます。 また、左側のサイドナビゲーションメニューと右側のアクティビティパネルヘッダーの背景としてブランドカラーを使用することもできます。 これは、どのように見えるかの例です。

image2.png

HEXカラーコードを見つける方法

始める前に、ブランドの色のHEXコードを知っておく必要があります。 HEXコードがわからない場合は、この オンラインカラーピッカー を使用してロゴまたは画像をアップロードすると、カラーコードが生成されます。

ブランドカラーの変更

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

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

変更を適用するには、[保存]をクリックしてください。

image5.gif

ヒント:コントラストをチェックして最適な結果を得る

このハイライトテーマでは、段落と見出しが読み取り可能であることを確認するために、このオンラインツールで選択した色と白い背景のコントラストを確認できます。 大型テキストオブジェクト、グラフィカルオブジェクト、ユーザーインターフェイスコンポーネントがAA基準に合格することが重要であることをお忘れなく。

読みやすさとアクセシビリティについての詳細は、ウェブコンテンツアクセシビリティガイドライン(WCAG)を参照してください。

アイコンを明るい色に変更する

次に、[詳細設定を表示]をクリックし、次の色値を変更します。ブランドカラーのHEXコードと、指定された色名またはRGBAコードを入力します。

入力テキスト

色の値

サイドナビゲーション背景

あなたのブランドカラー

サイドナビゲーションアイコン(デフォルト)

rgba (255,255,255, 0.9)

サイドナビゲーションアイコン(ホバー)

ホワイト

サイドナビゲーションアイコンのデフォルトの背景

あなたのブランドカラー

サイドナビアイコンのデフォルトの背景ホバー

rgba (255,255,255, 0.3)

サイドナビアイコンのデフォルトテキスト 

rgba (255,255,255, 0.9)

サイドナビアイコンのデフォルトテキストのホバー

ホワイト

サイドナビアイコンが有効

ホワイト

サイドナビアイコンアクティブホバー

ホワイト

サイドナビアイコンのアクティブな背景

rgba (255,255,255, 0.3)

イベント内でテーマカラーを編集する際のテーマカラーの表示方法です。 適切なテキストボックスを探す際に時間を節約するには、<0command + F (Mac)または Ctrl + F (Windows)を使用してウェブページを検索できます。

image1.png

これらの設定がどのように適用されるかについての詳細については、高度なブランディングのご紹介ガイドをご覧ください。

CSSコードは、イベントダッシュボードのテーマページの下にある「カスタムCSS」ウィンドウで以下のように表示されます。

次に、一番下までスクロールして、カスタムCSSフィールドに次のコードを追加します。

image4.png

注: 「#HEXCODE」は、以前に見つけたメインのブランドカラーのHEXコードに置き換える必要があります。

/*sidepanel background*/
.test-id-panel-row, .side-panel_panel-header-wrapper__3TdDN, .side-panel_tab__w71zF{background-color: #HEXCODE; color: white; fill: white;}
.side-panel_tab__w71zF.side-panel_active__1kHlI, .side-panel_tab__w71zF:hover {background-color: rgba(255,255,255, 0.3); color: white;}

/*Icon*/
.side-panel-header_buttons-container__uMiUR div button svg fill path, .direct-messages-icon-styles_icon__2iXXJ svg path, .sc-hOqqkJ svg path, .notification-bell-styles_notification__nUErE svg path, .side-panel_collapse__MPQE3 svg path, .side-panel_collapse__MPQE3 svg rect{fill: white!important;}
.side-panel-header_buttons-container__uMiUR .sc-jUEnpm svg path, .event-settings-menu-styles_menu-button___-SMk svg path, .side-panel_panel-tab-icon__jU487 svg path{fill: white!important;}
.side-panel-header_online__3P6Pr span svg path{fill: white;}
.side-panel-header_online__3P6Pr span {color: white;}
.side-panel-header_buttons-container__uMiUR button svg path {fill: white;}
.side-panel_collapse__MPQE3 {background-color: transparent;}

/*icon hover*/
.side-panel_collapse__MPQE3:hover, .direct-messages-icon-styles_icon__2iXXJ:hover, .notification-bell-styles_notification__nUErE:hover, .side-panel-header_buttons-container__uMiUR button:hover {background-color: rgba(255,255,255, 0.3);}
.user-menu_avatar-wrapper__2uuRv:hover button {background-color: transparent;}

/*waiting room link*/
.waiting-page_link-button__DonIl, [class*="waiting-page_link-button"]{color: #HEXCODE;}

/*Sidepanel collapsed*/
.side-panel_collapsed__3Rg5s .side-panel_tab__w71zF {background-color: #HEXCODE;}
.side-panel_collapsed__3Rg5s .side-panel_tab__w71zF:hover {background-color: rgba(255,255,255, 0.3);}

/*22-03*/

/*Reg page button correction*/
.event-page__header-event-info button {background-color: #HEXCODE !important; border-radius:0.2 rem; border: 0.0625rem solid #HEXCODE;}
.event-page__header-event-info button:hover {color: white; background-color: #303030 !important; border-radius:0.2 rem; border: 0.0625rem solid #303030;}

変更を適用するには、[保存]をクリックすることをお忘れなく。

変更が保存されたら、右上隅にある [イベントをプレビュー]ボタンをクリックして、ハイライトテーマを適用した状態でイベントがどのように表示されるかをプレビューします。

ビデオチュートリアル

上記で概説したすべてのポイントについて、この便利なビデオチュートリアルをご覧ください。

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

Hopinプラットフォームは頻繁に更新されるため、提案されたカスタムCSSコードが古くなる可能性があります。 このガイドを最新の状態に保つために最善を尽くしています。 ただし、すべての手順に従ってこのテーマを適用したあとに一部の色が機能していないことに気づいた場合は、 support@hopin.comまでお気軽にお問い合わせください。

また、開始日の少なくとも1週間前に再度イベントをプレビューすることをお勧めします。 これにより、間違いを修正し、必要に応じて最終編集を適用するのに十分な時間が残ります。

その他のテーマ

これとは少し違うものをお探しの場合は、 シンプルテーマのイベントと ダークテーマのイベントのガイドをチェックすることをお勧めします。 

特定のCSSリクエストがある場合や、イベント作成のサポートが必要な場合は、support@hopin.comまでお気軽にお問い合わせください。

 

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