ヘッダーおよびテーマ オプションを使用したサイトのブランディング

各サイトには、サイトの上部 (グローバル ナビゲーション バーの下) およびサイトに追加されたすべてのページとビューに表示されるヘッダーがあります。 ヘッダーはサイトのタイトル、ロゴ、メニュー リンクで構成されます。 ヘッダーは削除できませんが、そのデザインを選択できます。

ヘッダー

ヘッダーのデザインを選択するには、次の手順に従います。

1. サイトを編集モードで開きます。
2. 切り替えボタン をクリックして、サイド パネルを開きます。 必要に応じて、[ヘッダー] をクリックするオプションが表示されるまで、パネルの上部で [カスタマイズ] の横にある戻る矢印をクリックしてルート メニューに戻ります。
3. [表示設定] メニューをクリックして、次の [ヘッダー] スタイルの 1 つを選択します。
   • [標準] - このデザインは、すべての新しいサイトのデフォルトになっており、ロゴ (60 ピクセル)、ソーシャル メディア、およびメニュー リンクのスペースが用意された幅が狭くコンパクトなバーです。
   • [大] - このデザインは、大きなロゴ (120 ピクセル) と追加のメニュー リンクのスペースを増やします。
   • [カスタム HTML/CSS] - 構文に対応したコード エディターを使用し、カスタム コードでヘッダーを構成します。

     注意:

     カスタム ヘッダーはサイトのページ間で維持されますが、コンテンツ ビューには表示されません。 詳細については、「[コンテンツの探索] ビューのブランディングの外観が異なる理由」をご参照ください。

4. [ブランディング] メニューをクリックして、次のオプションを適用します。
   • [名前] - サイトのヘッダーに表示する名前を入力します。 このフィールドに入力した名前はヘッダーにのみ表示され、サイトの URL やサイトのリスト上には反映されません。
   • [ショート ネーム] - ヘッダーに追加したタイトルの短いバージョンを入力します。 ショート ネームは、ヘッダーが長すぎて、携帯電話などの小さい画面に表示できない場合のみヘッダーに適用されます。

     ヒント:

     インターネットへのアクセスにモバイル デバイスを使用するユーザーが増えています。 任意のデバイスでサイトの品質を確保するためにも、ショート ネームを追加するようにしてください。

5. [レイアウト] オプション ([ボックス] または [ワイド]) を選択します。
6. カスタム HTML または CSS を使用してサイトのヘッダーをブランディングする場合は、[カスタム HTML/CSS] を選択し、[HTML] ボックスと [CSS] ボックスにコードを入力します。

   注意:

   ヘッダー HTML は、埋め込み JavaScript をサポートしていません。 スクリプト タグは無視されます。

7. [保存] をクリックします。

ロゴのヘッダーへの追加

サイトのロゴのサイズと位置は、選択したヘッダー スタイルによって異なります。

1. サイド パネルの [ヘッダー] の下にある [ブランディング] メニューをクリックして展開します。
2. [ロゴ] 切り替えボタンをクリックしてオンにします。
3. [画像 URL] を選択するか、ファイルから画像をアップロードして、画像を追加します。

   ヒント:

   ファイルから画像をアップロードする場合、PNG ファイルとして保存されている画像が最適です。 [カスタマイズ] パネルにあるカードの [画像設定] セクションで、画像をトリミングおよびズームできます。

4. [大] ヘッダーを使用している場合は、[画像の配置] 設定を選択できます。
5. [ログの代替テキスト] に、アクセシビリティの標準を満たすテキストを入力します。

   ヒント:

   ロゴにテキストが含まれている場合、代替テキストを会社名にすることができます。 ロゴがロゴマーク デザインである場合、そのデザインを装飾と見なして代替テキストに “” を入力することができます。

6. [保存] をクリックします。

ソーシャル メディア アイコンの追加

ヘッダーにソーシャル メディア アイコンを追加します。

1. サイトを編集モードで開きます。
2. サイド パネルの [ヘッダー] の下にある [ブランディング] メニューをクリックして展開します。
3. [ソーシャル アイコン] メニューをクリックします。
4. 切り替えボタンをクリックし、Facebook、Twitter、Instagram、または YouTube のソーシャル メディア アイコンを追加します。
5. お使いのプラットフォームのアカウントへの URL を入力します。
6. [保存] をクリックします。

テーマの作成

サイトのテーマを設定するには、サイトのヘッダー、テキスト、ボタンの色を選択します。 サイトの [テーマ] メニューで選択した色がサイト全体に適用されます。 特定の行の色を構成することによって、これらの選択をオーバーライドできます。 詳細については、「色とフォント」をご参照ください。

ヒント:

色を選択する際は、組織のブランド ガイドラインを確認してください。 多くのブランド ガイドラインでは、Web サイトやロゴなどのコンテンツに対して正確なカラー コードを提供しています。 ブランド ガイドラインが存在しない場合は、チームや関係者と相談し、サイトのテーマで組織が適切に反映されていることを確認してください。

1. サイトを編集モードで開きます。
2. 切り替えボタン をクリックして、サイド パネルを開きます。 必要に応じて、[テーマ] をクリックするオプションが表示されるまで、パネルの上部で [カスタマイズ] の横にある戻る矢印をクリックしてルート メニューに戻ります。
3. 次のオプションのいずれかに対して色を選択するには、16 進数のカラー コードを入力するか、カラー コード フィールドの横にあるカラー パレットから色を選択します。
   • [グローバル ナビゲーションの背景色] は、サイトのグローバル ナビゲーション バーに色を適用します。
   • [グローバル ナビゲーションのテキスト色] は、グローバル ナビゲーション バーのテキストに色を適用します。

     注意:

     グローバル ナビゲーションの詳細については、「グローバル ナビゲーションとは」をご参照ください。

   • [ヘッダーの背景色] は、色をサイトのヘッダーに適用します。
   • [ヘッダーのテキスト色] は、色をヘッダー内のすべてのテキストに適用します。
   • [本文の背景色] は、色をサイトの行に適用します。 「色とフォント」で説明されている手順に従って、行およびテキストの色を行単位で構成することもできます。
   • [本文のテキスト色] は、サイト全体のテキストに適用されます。
   • [本文のリンクの色] は、サイトにあるすべてのリンク、および [枠付き] に設定された [ボタンのスタイル] を使用するボタンに色を適用します。

     注意:

     共有ボタンを含む垂直タブでは、背景の塗りつぶしに [本文のリンクの色]、アイコンまたはテキストに [本文の背景色] が使用されます。

   • [ボタンの背景色] は、[塗りつぶしの背景] に設定された [ボタンのスタイル] を使用するサイト上のボタンのほか、サイド パネル タブにあるアイコンに色を適用します。
   • [ボタンのテキスト色] は、サイト上にあるすべてのボタンのテキストに色を適用します。
4. 色を設定したら、[変更を適用] をクリックします。
5. フォントを、ヘッダー内のテキストおよびサイトの本文に適用することもできます。
   • サイトの本文のフォントを選択するには、[ベース フォント] 設定ボタンをクリックします。
   • サイトのヘッダーのフォントを変更するには、[ヘッダーのフォント] 設定ボタンをクリックします。

注意:

最初からやり直すか、デフォルトの色に戻すには、[テーマ] メニューの下部にある [デフォルトにリセット] を選択します。

フッターの作成

カスタム HTML を使用して、サイトに追加されたページで持続性のあるサイトにフッターを追加できます。

1. サイトを編集モードで開きます。
2. サイド パネルの [フッター] メニューを展開します。
3. [カスタム] の横にある切り替えボタンをクリックします。
4. サイド パネルの CSS および HTML ボックスを修正し、[変更を適用] をクリックして HTML への効果を確認します。

   注意:

   フッター HTML は、埋め込み JavaScript をサポートしていません。 スクリプト タグは無視されます。

関連コンテンツ

サイトまたはイニシアティブのブランディングを高めるには、次の手順を実行できます。

• メニュー リンクを追加し、グローバル ナビゲーションが有効になっていることを確認します。 詳細については、「メニュー リンクとグローバル ナビゲーションの構成」をご参照ください。
• すべてのサイトまたはイニシアティブ サイトには URL (Web アドレス) が含まれています。 組織にカスタム ドメインが存在する場合、この URL を構成してサイトのブランディングをさらに高めることができます。 詳細については、「ドメインに関する FAQ」をご参照ください。