バニティ URL のブランディング設定をカスタマイズする


概要

注: ウェブデザイン（HTML と CSS）を経験してから、ブランディング設定のカスタマイズを行うことを強くおすすめします。 Zoom サポートにお問い合わせいただいた場合、最善を尽くして対応にあたりますが、解決を保証するものではありません。 HTML/CSS の問題については、ウェブ デベロッパーにご相談ください。

バニティ URL が承認されれば、組織のブランディングに合わせてカスタマイズできます。 Zoom ロゴやマーケティング資料を使用してページをカスタマイズする前に、弊社のブランディング ガイドラインを確認してください。

ブランディングの変更は、貴社のバニティ URL（例: yourorganization.zoom.us）から Zoom ウェブポータルにアクセスする場合にのみ適用されます。 zoom.us からウェブポータルにアクセスする場合、ブランディングは適用されません。

注: 現在、カスタム ブランディングでは Javascript はサポートされていません。

前提条件

この記事の内容: 

ブランディング設定へのアクセス

  1. Zoom ウェブポータルにサインインします。
  2. ナビゲーション メニューで、[詳細設定]、次に [ブランディング] の順にクリックします。

画像のアップロード

ブランディングをカスタマイズする前に、背景画像や組織のロゴなど、使用する画像をアップロードします。

  1. Zoom ウェブポータルにサインインします。
  2. ナビゲーション メニューで、[詳細設定]、次に [ブランディング] の順にクリックします。
  3. [画像] タブをクリックします。
  4. コンピュータを参照し、アップロードする画像を選択します。
  5. アップロードすると、ファイルがリストに表示されます。 画像の URL が [パス] 列に表示されます。

ランディング ページのカスタマイズ

ランディング ページは、組織のバニティ URL のメインページです。デフォルトでは、ランディング ページは次のようになります。

ランディング ページの HTML とインライン CSS をカスタマイズするには、次の手順を実行します。

  1. Zoom ウェブポータルにサインインします。
  2. ナビゲーション メニューで、[詳細設定]、次に [ブランディング] の順にクリックします。
  3. [ランディング ページ] タブをクリックします。
  4. 以下のセクションに従って、組織のブランディングに合わせて、ランディング ページを変更します。
    注: 以下の属性をすばやく見つけるには 、Ctrl + F キーを押して属性名を入力します。 次に、指示に従って属性を更新します。

背景画像

属性名: background-image

背景画像を変更するには、アップロードされた背景画像の URL を使用して、引用符の間の URL を更新します。 背景画像の URL を見つけるには、[画像] タブに移動し、[パス] 列にリンクをコピーします。

サンプル:

background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg");

コンテンツのテキスト色

ランディング ページのコンテンツのテキスト色（ボタンを含まない）を変更するには、.content-body { } に color 属性を追加します。 背景が暗い場合は明るい色を使用します。

サンプル:

.content-body {
 display: table-cell;
 vertical-align: middle;
 color: white;
}

ページ タイトル

属性名: title

ページ タイトルは、ページ名のブラウザ タブに表示される内容を変更します。 <title> と </title> の間にページタイトルを入力してください。

サンプル:

<title>ビデオ カンファレンス、ウェブ カンファレンス、オンライン ミーティング、画面共有</title> <!--customize landing page title-->

branding-edittitle.gif

 

ボタンの色

属性名: background-color（.button の下にある background-color 属性を探します）

3 つのボタン（参加、ホスト、サインイン）の背景色を変更するには、色を 16 進数で指定する必要があります。たとえば、#FFFFFF は白です。 カラー ピッカーを使用して、16 進数で色を識別および選択します。

.button {
 width: 80px;
 background-color: #000000; /*customize button color */
 border-color: #2D8CFF;
 padding: 12px 20px;
 display: inline-block;
 text-align: center;
 margin: 10px 0;
 transition: .3s ease;
}

マウスを置いたときのボタンの色

属性名: background-color（.button.hover にネスト）

マウスを置いたときのボタンの色を変えるには、16 進数で色を指定します。たとえば、#FFFFFF は白です。 カラー ピッカーを使用して、16 進数で色を識別および選択します。

サンプル:

.button:hover {
  background-color: #eb9834; /*customize button color */
 }

ボタンのテキスト色

属性: color（.btn-text の下にネスト）

ボタン内のテキスト色を変更します。 ボタンに濃い色を使用した場合は、属性を白に設定してください。 ボタンの色が薄い場合は、属性を黒に設定してください。カスタムで 16 進数を指定することもできます。カラー ピッカーを使用して、16 進数で色を識別および選択します。

サンプル:

.btn-text {
 color: #008BFF; /*customize button font color */
 font-size: 17px;
}

ロゴ

3 つのボタンの上に表示されるロゴを変更します。ロゴの URL を見つけるには、[画像] タブを開き、[パス] 列のリンクをコピーします。

注: デフォルトでは、ロゴのサイズは 140× 31.5px に変更されます。 これにより、カスタムロゴが歪む場合があります。 歪みを解消するには、ランディング ページ HTML の画像 URL の後の class="zoom-logo" を 削除します。

サンプル:

<div class="row">
  <img src="https://zoom.us/account/branding/p/1c7dfaf5-2646-4224-92e0-5abef82036b1.png" alt="Zoom Logo"> <!--customize company logo-->
<div class="row">

 

ウェブポータルのヘッダー、フッター、サイドバーのカスタマイズ

バニティ URL からアクセスしたときにウェブポータル全体に表示されるヘッダーとフッターをカスタマイズすることができます。

注: これらの設定はランディング ページには影響しません。

  1. Zoom ウェブポータルにサインインします。
  2. ナビゲーション メニューで、[詳細設定]、次に [ブランディング] の順にクリックします。
  3. [ヘッダー/フッター/サイドバー] タブをクリックします。
  4. 以下のセクションに従ってください。
<div id="footer" class="container">
</div>

カスタム CSS の使用

ウェブポータルで使用する CSS をカスタマイズできます。

注: カスタム CSS はランディング ページには適用されません。 ランディング ページのインライン CSS をカスタマイズできます。

  1. Zoom ウェブポータルにサインインします。
  2. ナビゲーション メニューで、[詳細設定]、次に [ブランディング] の順にクリックします。
  3. [カスタム CSS] タブをクリックします。
  4. カスタマイズしたい CSS セレクタの [編集] をクリックします。
  5. カスタム CSS を使用して、他の CSS セレクタを定義します。

メール テンプレートのカスタマイズ

ユーザーによるパスワードのリセット、あるいはサインアップの際に送信されるメールなど、一般的な管理用メール テンプレートをカスタマイズできます。

  1. Zoom ウェブポータルにサインインします。
  2. ナビゲーション メニューで、[詳細設定]、次に [ブランディング] の順にクリックします。
  3. [メール] タブをクリックします。
  4. 編集したいテンプレートの横にある [編集] をクリックします。
    注: テンプレートには、カスタムメール変数を使用することができます。

ミーティングの招待メール テンプレートのカスタマイズ

アカウントやグループレベルでミーティング招待メールのテンプレートをカスタマイズすることもできます。

  1. Zoom ウェブポータルにサインインします。
  2. ナビゲーション メニューでアカウントまたはグループ設定にアクセスします。
  3. [ミーティング] タブをクリックします。
  4. [招待メールのブランディング] セクションで、更新するメール テンプレートの [編集] をクリックします。ミーティングのメール テンプレートのスケジュールについては、こちらをご覧ください。
  5. [変更の適用] をクリックし、[完了] をクリックします。