概要
ブランディングの設定をカスタマイズする場合、Webデザイン(HTMLとCSS)に精通している担当者が行うことを推奨します。HTML/CSSに問題がある場合は、Web開発者に相談してください。
組織のブランディングに合わせてランディングページをカスタマイズするには、バニティ URLを申請し、承認されている必要があります。Zoom のロゴや、他のマーケティング資料を使ってランディングページをカスタマイズする前に、ブランディングのガイドラインを確認してください。
ブランディングに加えられた変更は、バニティ URL(例:yourorganization.zoom.us)から Zoom ウェブポータルにアクセスする場合にのみ適用されます。zoom.us からウェブポータルにアクセスした場合は、ブランディングは適用されません。
Note: ブランディングのカスタマイズでは、Javascriptはサポートされていません。
ブランディングをするために必要な要件
- ビジネスライセンス、教育ライセンス、またはAPIプラン
- ガイドラインに準拠したバニティURLの承認済
- HTML/CSSに精通しているIT / Webマスター
目次
- ブランディング設定へのアクセス
- 画像のアップロード
- ランディングページのカスタマイズ
- ウェブポータルのヘッダー、フッター、サイドバーのカスタマイズ
- カスタムCSSの使用
- 電子メールテンプレートのカスタマイズ
- 会議の招待メールのテンプレートをカスタマイズする
ブランディング設定へのアクセス
- Zoom Web ポータルにサインインします。
- ナビゲーションメニューで、[詳細] をクリックし、[ブランディング] をクリックします。
画像をアップロードする
ブランディングをカスタマイズする前に、背景画像や組織のロゴなど、使用する画像をアップロードしてください。
- Zoomウェブポータルにサインインします。
- ナビゲーションメニューで、[詳細] をクリックし、[ブランディング] をクリックします。
- [画像]タブをクリックします。
- コンピュータをブラウズして、アップロードする画像を選択します。
- アップロードされると、ファイルがリストに表示されます。画像の URL は、[パス] 列に表示されます。
ランディングページのカスタマイズ
ランディングページは、組織のバニティURLのメインページです。デフォルトでは、ランディングページはこのようになっています。
ランディング ページの HTML とインライン CSS をカスタマイズするには、次の手順に従います。
- Zoom Web ポータルにサインインします。
- ナビゲーションメニューで、[詳細] をクリックし、[ブランディング] をクリックします。
- [ランディングページ] タブをクリックします。
- 以下のセクションに従って、ランディング ページに基本的な変更を加えて、組織のブランディングと一致するようにします
Note: 以下の属性をすばやく見つけるには、Ctrl + F キーを押しながら属性名を入力します。その後、指示に従って属性を更新してください。
背景画像
属性名:background-image
背景画像を変更するには、引用符の間のURLをアップロードした背景画像のURLに更新します。背景画像のURLは、「画像」タブの「パス」欄にあるリンクをコピーしてください。
サンプル
background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg");
コンテンツテキストの色
ランディングページのコンテンツ(ボタンを含まない)のテキストの色を変更するには、.content-body { } の中に色の属性を追加します。背景が暗い場合は明るい色を使用してください。
サンプル
.content-body {
display: table-cell;
vertical-align: middle;
color: white;
}
ページタイトル
属性名:title
ページタイトルは、ページ名に対してブラウザのタブで表示されるものが変わります。<title>と</title>の間にページタイトルを入力してください。
サンプル
<title>Video Conferencing, Web Conferencing, Online Meetings, Screen Sharing</title> <!--customize landing page title-->
ボタンの背景色
属性名: background-color (.buttonの下に入れ子になっているbackground-color属性を探してください)
ボタンの背景色を変更するには、色の16進数で色を指定する必要があります(例えば、#FFFFFFFは白)。16進数で色を識別して選択するにはColorpickerを使用します。
.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進数で色を指定します。(例えば、#FFFFFFFは白)。16進数で色を識別して選択するにはColorpickerを使用します。
サンプル
.button:hover {
background-color: #eb9834; /*customize button color */
}
ボタンのテキスト色
属性名: color ( .btn-text の下に入れ子になっている)
ボタン内のテキストの色を変更します。ボタンの背景色に暗い色を使用している場合は、属性を白に設定します。背景色を明るめの色にしている場合は、属性を黒に設定します。 また、カスタムの16進数値を指定することもできます。16進数で色を識別して選択するにはColorpickerを使用します。
サンプル
.btn-text {
color: #008BFF; /*customize button font color */
font-size: 17px;
}
ロゴマーク
表示されるロゴを変更します。ロゴのURLを探すには、「画像」タブに移動し、「パス」欄にあるリンクをコピーしてください。
注意:デフォルトでは、ロゴは140px x 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 からアクセスしたときにウェブポータル全体に表示されるヘッダーとフッターをカスタマイズすることができます。
注:これらの設定は、ランディングページには影響しません。
- Zoom ウェブポータルにサインインします。
- ナビゲーションメニューで、[詳細] をクリックし、[ブランディング] をクリックします。
- [ヘッダー/フッター/サイドバー] タブをクリックします。
- 以下のセクションに従ってください。
- ロゴ URL:ヘッダーのロゴをカスタマイズします。アップロードした画像のURLを貼り付けます。画像を外部に保存したい場合は、外部画像のURLを貼り付けることができます。
- ヘッダーのHtml:フローティングヘッダーバーをカスタマイズします。
-
フッターHtml:組織のバニティURLからZoom情報とリンクを持つフッターを削除することができます。フッターを削除するには、フッター部分のコードをすべて削除して、以下のように置き換えます。
<div id="footer" class="container"> </div>
- 左のサイドバーに頻繁に使用されるリンクを表示します:左側のナビゲーションメニューに表示するリンクを変更します。
カスタムCSS
Webポータルで使用するCSSをカスタマイズすることができます。
注:カスタムCSSはランディングページには適用されません。ランディングページのインライン CSS をカスタマイズすることができます。
- Zoom ウェブポータルにサインインします。
- ナビゲーションメニューで、[詳細] をクリックし、[ブランディング] をクリックします。
- [CSS] タブをクリックします。
- [Edit] をクリックして、カスタマイズする CSS を選択します。
-
[カスタムCSS]を使用して、他の CSS セレクタを定義します。
電子メール テンプレートのカスタマイズ
ユーザーがパスワードをリセットしたときやサインアップしたときに送信される電子メールなど、一般的な管理用電子メールのテンプレートをカスタマイズすることができます。
- Zoom ウェブポータルにサインインします。
- ナビゲーションメニューで、[詳細] をクリックし、[ブランディング] をクリックします。
- [メール] タブをクリックします。
- 編集するテンプレートの横にある [編集] をクリックします。
注: テンプレートでは、メール変数のカスタムを使用できます。
会議の電子メールの招待状のテンプレート
アカウントまたはグループレベルで会議招待メールのテンプレートをカスタマイズすることもできます。
- Zoom ウェブポータルにサインインします。
-
ナビゲーションメニューで、アカウントまたはグループの設定にアクセスします。
- アカウント:「アカウント管理」>「アカウント設定」をクリックします。
-
グループ:「ユーザー管理」>「グループ管理」の順にクリックします。グループのグループ名をクリックするか、新しいユーザーグループを作成します。
- アカウント:「アカウント管理」>「アカウント設定」をクリックします。
- 「ミーティング」 タブをクリックします。
- 「招待メールのブランディング」 セクション
- 更新したいメールテンプレートの「編集」をクリックします。詳細については、こちらをご覧くださいスケジュール会議のメールテンプレートの詳細
- 変更を適用してから「完了」をクリックします。
この記事のオリジナルを確認したい場合は、Getting Started With Brandingをご参照ください。