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

ヘッダーの設計、テーマの作成、フッターの追加等によってサイトをカスタマイズできます。 サイトのレイアウトの実行には、ヘッダーとフッターが重要です。 ヘッダーでは、ブランディングを追加し、訪問者がコンテンツ、ページ、および外部の Web サイトを検索するのに役立つメニューを作成して、サイトを紹介できます。 フッターは、サイトの最後を示し、組織の著作権、場所、連絡先情報など、役立つ詳細情報のスペースを提供します。

ヘッダーのカスタマイズ

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

ヘッダーをカスタマイズするには、次の手順を実行します。

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

     注意:

     カスタム ヘッダーはサイトのページ間で維持されますが、プレビュー ページには表示されません。

4. [レイアウト] について、[ボックス] または [ワイド] を選択します。
5. [名前] には、ヘッダーに表示する名前を入力します。

   入力した名前はヘッダーにのみ表示され、サイトの URL やサイトのリスト上には反映されません。

6. [ショート ネーム] には、ヘッダーに追加した名前の短縮形を入力します。

   任意のデバイスでサイトの品質を確保するためにも、ショート ネームを追加するようにしてください。

   ショート ネームは、フル ネームが長すぎて、携帯電話などの小さい画面に表示できない場合に、ヘッダーに表示されます。

7. カスタム HTML または CSS を使用してサイトのヘッダーをブランディングする場合は、[カスタム HTML/CSS] を選択し、HTML テキスト ボックスと CSS テキスト ボックスにコードを入力します。

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

8. [保存] を選択します。

テーマの作成

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

ヒント:

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

テーマを作成するには、次の手順を実行します。

1. サイトを編集モードで開きます。
2. [カスタマイズ] パネルで [テーマ] を選択します。
3. 次のオプションのいずれか、またはすべてに対して色を選択するには、16 進数値のカラー コードを入力するか、カラー コード フィールドの横にあるカラー パレットから色を選択します。
   • [グローバル ナビゲーションの背景色] - サイトのグローバル ナビゲーション バーに色を適用します。
   • [グローバル ナビゲーションのテキスト色] - グローバル ナビゲーション バーのテキストに色を適用します。

     注意:

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

   • [ヘッダーの背景色] - 色をサイトのヘッダーに適用します。
   • [ヘッダーのテキスト色] - 色をヘッダー内のすべてのテキストに適用します。
   • [本文の背景色] - 色をサイトの行に適用します。 「サイト レイアウトの設計」の手順に従って、行およびテキストの色を行単位で構成することもできます。
   • [本文のテキスト色] - サイト全体のテキストに適用されます。
   • [本文のリンクの色] - 色をサイト上のリンクに適用します。

     注意:

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

4. 色を設定したら、[保存] を選択します。
5. 必要に応じて、次の手順により、フォントを、ヘッダー内のテキストおよびサイトの本文に適用します。
   • サイトの本文のフォントを選択するには、[ベース フォント] 設定ボタンを選択します。
   • サイトのヘッダーのフォントを変更するには、[見出しのフォント] 設定ボタンを選択します。

注意:

デフォルトのフォントに戻すには、[テーマ] メニューの下部にある [フォントのリセット] を選択します。

ロゴのヘッダーへの追加

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

ヘッダーにロゴを追加するには、次の手順を実行します。

1. [ロゴ] 切り替えボタンをオンにします。
2. [画像 URL] または [アップロード] を選択して、画像を追加します。

   ヒント:

   ファイルから画像をアップロードする場合、.png ファイルとして保存されている画像が最適です。 必要に応じて、画像のトリミングやズームを行います。

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

   ヒント:

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

5. [保存] を選択します。

ソーシャル メディア リンクのヘッダーへの追加

Facebook、X、Instagram、または YouTube のアカウントへのリンクとなるソーシャル メディア アイコンをヘッダーに追加するには、次の手順を実行します。

1. サイトを編集モードで開きます。
2. [カスタマイズ] パネルで [ヘッダー] を選択します。
3. [ソーシャル アイコン] を展開します。
4. ヘッダーに表示するソーシャル メディアのプラットフォームを有効にして、プラットフォームのアカウントの URL を指定します。
5. [保存] を選択します。

フッターの作成

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

1. サイトを編集モードで開きます。
2. サイド パネルの [フッター] を選択します。
3. [カスタム] 切り替えボタンをオンにします。
4. サイド パネルの CSS および HTML ボックス内のコンテンツを修正し、[保存] を選択して影響を確認します。

   注意:

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

関連コンテンツ

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

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