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

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

ヘッダーのカスタマイズ

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

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

1. サイトを編集モードで開きます。
2. [カスタマイズ] パネルで [ヘッダー] をクリックします。

   ヒント:

   [カスタマイズ] パネルが表示されていない場合は、切り替えボタン をクリックして開きます。

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

     [カスタム HTML/CSS] を選択すると、HTML および CSS のパラメーター付きのメニューが表示されます。 [HTML コードエディターを開く] または [CSS コードエディターを開く] をクリックして、カスタマイズしたヘッダーのコードを入力します。

     注意:

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

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

4. [レイアウト] について、[ボックス] または [ワイド] を選択します。
5. [名前] および [ショート ネーム] のテキストを入力します。

   入力した名前はヘッダーにのみ表示され、サイトの URL やサイトのリスト上には反映されません。 ショート ネームは、フル ネームが長すぎて、携帯電話などの小さい画面に表示できない場合に、ヘッダーに表示されます。

   あるいは、ヘッダーにサイト名を表示したくない場合は、[名前] パラメーターを無効にします。

   注意:

   サイトには、ヘッダーに名前またはロゴのいずれかを表示する必要があります。 [名前] パラメーターをオフにするには、まず [ロゴ] パラメーターをオンにする必要があります。

6. [レイアウトの保存] をクリックします。

ロゴのヘッダーへの追加

ヘッダーに組織のロゴを追加して、サイトのブランド イメージを確立できます。 サイトのロゴのサイズと位置は、選択したヘッダー スタイル ([標準]、[大]、[カスタム HTML/CSS]) によって異なります。

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

1. サイトを編集モードで開きます。
2. [カスタマイズ] パネルで [ヘッダー] をクリックします。

   ヒント:

   [カスタマイズ] パネルが表示されていない場合は、切り替えボタン をクリックして開きます。

3. [表示設定] メニューで、[ロゴ] 切り替えボタンをクリックしてオンにします。
4. 次のどちらかを選択します。
   • URL を入力するには、[画像 URL] を選択し、サポートされている画像リンクを [URL] フィールドに貼り付けます。

     サポートされるファイルタイプは *.jpeg、*.png、*.gif です。

   • ファイルをアップロードするには、[アップロード] を選択します。

     最大ファイル サイズは 3 MB で、.jpeg、.jpg、.png ファイル タイプにのみ対応しています。

     ヒント:

     .png ファイルとして保存されている画像が最適です。

   [アップロード] を選択した場合、画像をアップロードするには、次の手順に従います:

   1. ファイルをボックスまでドラッグするか、[画像の参照] をクリックして、画像を追加します。
   2. [画像のトリミング] ボタン をクリックして、画像をトリミングまたはサイズ変更します。

      画像をトリミングするには、ハンドルをドラッグし、クロップ フレームのサイズを変更します。 クロップ フレームを再配置するには、点線をクリックしてドラッグします。 ズームを調整するには、画像の下にあるスライダーを使用します。

   3. [完了] をクリックして、変更した内容を適用します。

   ヘッダーにロゴが追加され、選択したレイアウトとロゴの配置に応じてサイズが変更されます。
5. [大] ヘッダー スタイルを使用している場合は、[ロゴの配置] の設定を選択します:
   • [水平方向のロゴ] - ロゴの高さは標準の 60 ピクセルのままです。 ヘッダーの [名前] または [ショート ネーム] に合わせて配置されます。
   • [鉛直方向のロゴ] - ロゴの高さは 130 ピクセルに拡大されます。 [名前] やメニュー リンクを含む、すべてのヘッダー コンテンツの左側に配置されます。
6. [ロゴの代替テキスト] に、アクセシビリティーの標準を満たすテキストを入力します。

   ヒント:

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

7. [レイアウトの保存] をクリックします。

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

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

注意:

[カスタム HTML/CSS] ヘッダー スタイルを使用している場合、以下の手順でソーシャル メディアへのリンクを設定することはできません。

1. サイトを編集モードで開きます。
2. [カスタマイズ] パネルで [ヘッダー] をクリックします。

   ヒント:

   [カスタマイズ] パネルが表示されていない場合は、切り替えボタン をクリックして開きます。

3. [ソーシャル アイコン] を展開します。
4. 切り替えボタンをクリックして、ソーシャル メディア アイコンを追加します。

   ソーシャル メディア アイコンはヘッダーに表示されます。

5. アイコンにリンクさせるソーシャル メディア アカウントの URL を入力します。
6. [レイアウトの保存] をクリックします。

テーマの作成

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

ヒント:

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

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

1. サイトを編集モードで開きます。
2. [カスタマイズ] パネルで [テーマ] をクリックします。

   ヒント:

   [カスタマイズ] パネルが表示されていない場合は、切り替えボタン をクリックして開きます。

3. 次のオプションのいずれか、またはすべてに対して色を選択するには、16 進数値のカラー コードを入力するか、カラー パレットから色を選択します。
   • [グローバル ナビゲーションの背景色] - サイトのグローバル ナビゲーション バーに色を適用します。
   • [グローバル ナビゲーションのテキスト色] - グローバル ナビゲーション バーのテキストおよびボタンに色を適用します。
   • [ヘッダーの背景色] - 色をサイトのヘッダーに適用します。
   • [ヘッダーのテキスト色] - 色をサイトのヘッダー内のすべてのテキストに適用します。
   • [本文の背景色] - 色をサイトの行に適用します。 背景色は行ごとに個別に設定することもできます。
   • [本文のテキスト色] - 色をサイト全体のテキストに適用します。 テキスト色は行ごとに個別に設定することもできます。
   • [本文のリンクの色] - 色をサイト上のリンクに適用します。

     注意:

     公開 Hub サイトのアクション メニューは、背景の塗りつぶしに [本文のリンクの色] の値、アイコンとテキストに [本文の背景色] の値が使用されます。

4. 必要に応じて、次の手順により、フォントを、ヘッダー内のテキストおよびサイトの本文に適用します。
   1. [ベースのフォント] または [見出しのフォント] のカスタマイズ ボタンをクリックします。

      ベースのフォントはサイト本文のテキストに使用され、見出しのフォントはサイト ヘッダーのテキストに使用されます。

      ヒント:

      ベースのフォントと見出しのフォントの両方を同じフォント ファミリーに変更する場合は、まずベースのフォントを更新し、その後、見出しのフォントの [同じフォントをベースとして使用] チェックボックスをオンにします。

   2. [@import の URL] については、フォントの埋め込みコードから @import の URL を貼り付けます。
   3. フォント ファミリーの名前を入力します。
   4. 必要に応じて、[フォントのプレビュー] をクリックして、インポートしたフォント ファミリーのプレビュー テキストを表示します。
   5. 必要に応じて、タブをクリックして 2 つ目のフォントを更新します。
   6. [適用] をクリックします。
5. [レイアウトの保存] をクリックします。

注意:

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

フッターの作成

サイトのフッターは、カスタム HTML および CSS を使用して追加できます。 フッターは、サイトの下部に表示され、そのサイトに追加されたすべてのページやビューにも表示されます。 サイトにフッターを追加するには、次の手順に従います:

1. サイトを編集モードで開きます。
2. [カスタマイズ] パネルで [フッター] をクリックします。

   ヒント:

   [カスタマイズ] パネルが表示されていない場合は、切り替えボタン をクリックして開きます。

3. [カスタム] オプションをクリックします。
4. [HTML コードエディターを開く] または [CSS コードエディターを開く] をクリックして、カスタマイズしたフッターのコードを入力します。
5. [適用] をクリックしてフッターへの変更を表示します。

   注意:

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

6. [レイアウトの保存] をクリックします。

関連リンク

• サイトの編集
• グローバル ナビゲーションとメニュー リンクの構成
• ドメイン