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

組織のロゴと色でサイトをブランディングすることで、コンテンツを信頼できる正式な情報として発信できます。サイトを組織の他の Web コンテンツと融合させるのにも役立ちます。このトピックでは、管理者とコア チーム メンバーが以下の操作を行う方法について説明します。

• サイトのヘッダーおよびタイトルを選択する。
• サイトのヘッダーにロゴを追加する。
• サイトのヘッダー、ボタン、テキスト、および背景の色を変更する。

操作を開始するには、Portal for ArcGIS にサイン インし、[概要] ページの [サイト] をクリックしてサイトのリストを表示します。

ヒント:

ブラウザーで表示する際、サイトを編集することもできます。サイン インしていることを確認し、サイトの左側にある編集ボタンを見つけます。

ヘッダー スタイルの選択

サイトのヘッダーを使用して、サイトにロゴをブランディングしたり、メニュー リンクに他のリソースへのナビゲーションを作成したり、ソーシャル メディア アカウントにリンクしたりできます。

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

     メモ:

     ロゴを追加するには、次のセクションに記載されている手順に従います。

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

     ヒント:

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

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

   メモ:

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

6. サイド パネルの CSS ボックスを修正し、[変更を適用] をクリックして、コードが有効であることを確認します。
7. [保存] をクリックします。

ロゴのヘッダーへの追加

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

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

   ヒント:

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

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

   ヒント:

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

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

テーマの作成

サイトのテーマを作成するには、サイトのヘッダー、テキスト、ボタンの色を選択します。

ヒント:

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

1. 次のオプションのいずれかに対して色を選択するには、カラー コードを入力するか、カラー コード フィールドの横にあるカラー パレットから色を選択します。
   • [グローバル ナビゲーションの背景色] は、サイトのグローバル ナビゲーション バーに色を適用します。
   • [グローバル ナビゲーションのテキスト色] は、グローバル ナビゲーション バーのテキストに色を適用します。

     メモ:

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

   • [ヘッダーの背景色] は、色をサイトのヘッダーに適用します。
   • [ヘッダーのテキスト色] は、色をヘッダー内のすべてのテキストに適用します。
   • [本文の背景色] は、色をサイトの行に適用します。「行カードを使用した最初のカードの追加」で説明されている手順に従って、行およびテキストの色を行単位で構成することもできます。
   • [本文のテキスト色] は、サイト全体のテキストに適用されます。
   • [本文のリンクの色] は、色をサイト上で提供されているリンクに適用します。
   • [ボタンの背景色] は、色をサイト上で提供されているボタンに適用します。
   • [ボタンのテキスト色] は、サイト上で提供されているすべてのボタン上のテキストに適用されます。
2. 色を設定したら、[変更を適用] をクリックします。
3. フォントを、ヘッダー内のテキストおよびサイトの本文に適用することもできます。
   • サイトの本文のフォントを選択するには、[ベース フォント] 設定ボタンをクリックします。
   • サイトのヘッダーのフォントを変更するには、[ヘッダーのフォント] 設定ボタンをクリックします。

メモ:

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

フッターの作成

[サイト エディター] のデフォルトには、フッターがありません。サイトのすべてのページに永続的なフッターがあるようにするには、カスタム フッターを作成する必要があります。

1. [フッター] セクションから [カスタム] を選択します。

   デフォルトのフッターがページに表示され、CSS ボックスがサイド パネルに表示されます。

2. フッターの右下にある設定ボタンをクリックして、HTML を編集します。
3. 設定ボタンをもう一度クリックして、変更を表示します。
4. サイド パネルの CSS ボックスを修正し、[変更を適用] をクリックして HTML への効果を確認します。

ヒント:

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

次の手順

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

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