サイトまたはイニシアティブを作成した後、サイト エディターとそのサイド パネルを使用して、サイトの設定の構成、そのレイアウトの設計、およびページの追加を実行できます。
このトピックでは、次の作業を行う方法を説明します。
- サイト エディターで編集セッションを開始し、編集内容を保存して、変更を表示します。
- 行とカードを使用してサイトまたはページ レイアウトを設計します。
- 背景色、テキスト色、およびフォントを設定します。
- ヘッダーとフッターを構成します。
編集モードでサイトを開く
開始するには、サイトを編集モードで開きます。 ページを編集モードで開く方法については、「ページを編集モードで開く」をご参照ください。
ブラウザー ウィンドウから
ブラウザー ウィンドウから編集モードでサイトを開くには、次の手順に従います。
- 新しいブラウザー ウィンドウでサイトの URL を開き、グローバル ナビゲーション バーの [サイン イン] をクリックします。
- 編集ボタン
をクリックして、サイト エディターを開きます。注意:
サイン インしてサイトを編集するには、グローバル ナビゲーションを有効にする必要があり、かつサイトのコア チームに所属しているか、管理権限を持っているか、サイトの元の所有者である必要があります。
ArcGIS Hub から
サイトに対してグローバル ナビゲーションが無効の場合、ArcGIS Hub からサイトを開くことができます。
- hub.arcgis.com で ArcGIS Hub にサイン インします。
- [概要] ページで、[サイト] または [イニシアティブ] の下にある [管理] をクリックします。
- サイトまたはイニシアティブのタイトルをクリックして、サイト エディターを開きます。
ArcGIS Online から
ArcGIS Online から編集モードでサイトを開くには、次の手順に従います。
- ArcGIS Online にサイン インします。
- [コンテンツ] でサイトまたはイニシアティブ サイト [Hub サイト アプリケーション] を見つけます。
- アイテムをクリックしてアイテム詳細ページを開き、[アプリの構成] をクリックします。
編集の保存
サイトを編集する際、変更内容を定期的に保存します。 [保存] ボタンは編集ナビゲーション バーの右上隅にあります。 必要に応じて、他のユーザーが確認できるように、サイトをドラフトとして公開することができます。 詳細については、「サイトまたはページの公開」をご参照ください。
注意:
コア チームのメンバーがサイトを同時に編集している、またはサイトが複数のタブに開かれている場合、保存してサイトを閉じた最後のユーザーが行った編集内容が適用されます。 開かれたタブは自動的に更新されず、新しい変更内容は表示されません。そのため、一度に 1 人のコア チーム メンバーだけがサイトを編集することをお勧めします。
サイド パネルの操作と編集ナビゲーション バー
ほとんどのサイト編集ワークフローで、サイトのサイド パネルを使用します。 このパネルには、[設定]、[ヘッダー]、[テーマ]、[レイアウト]、および [フッター] メニューが含まれています。
サイド パネルを開くには、サイド パネルの切り替えボタン 
をクリックします。 パネルの上部で [カスタマイズ] の横にある戻るボタンをクリックして、ルート メニューに戻ります。
サイト エディターには、チーム、フィードバック、コンテンツ ライブラリなどの追加機能にアクセスできるレイアウト エディターの上部にある編集ナビゲーション バーも含まれます。 このバーから、サイトを保存したり、ArcGIS Online にあるサイトのアイテム詳細ページにアクセスしたりすることもできます。 その他ボタン 
をクリックして、[ArcGIS Online で編集] を選択します。
サイトのレイアウトの設計
サイトのレイアウトの設計を開始するには、サイド パネルの [レイアウト] メニューを開き、画像、テキスト、アプリ、メディアなどのコンポーネントをサイトに追加できるカードの選択にアクセスします。
サイトのデフォルトのレイアウトは、カードを組み合わせて、コンテンツを導入する前にコンテキストを提供することに重点を置いた統一感のある注釈を構築する方法を示すように設計されています。 この書式設定をそのまま採用する、その色とコンテンツを更新する、またはカードをすべて削除して空白のレイアウトで開始することができます。
サイトのレイアウトの編集についてよく理解するために、次の手順に従って新しい行カードを追加します。
- サイド パネルの [レイアウト] をクリックします。
- [行] カードをサイド パネルからレイアウト上にドラッグし、必要な場所に行を配置します。
注意:
行はレイアウトの構成要素であり、テキスト、アプリ、画像などのカードを挿入する場所で必要になります。
- カード (テキスト カードなど) をサイド パネルから新しい行にドラッグし、必要な場所にカードを配置します。
ヒント:
行内にカードを再配置するには、カードの右上隅にポインターを合わせ、位置ボタン
をクリックして、カードを移動させます。 カードの左右の矢印を使用して、サイズを変更することもできます。 - 必要に応じて、行を再配置するには、行の右上隅にポインターを合わせ、位置ボタン をクリックして、行を移動させます。
行 (それに含まれるすべてのカードを含む) をレイアウト上の新しい場所に移動できます。
- [保存] をクリックします。
- カードまたは行を削除するには、削除ボタン
をクリックします。
サイト設定
各サイトは、URL 構成、サイトの名前と概要、プライベート ダウンロードやグローバル ナビゲーションなどの対話機能など、特定のエレメントを制御できる固有の設定があります。
ヒント:
サイトの URL は最初に構成する重要な設定です。 カスタム ドメインを使用して URL を構成する、またはサイトの名前を変更するには、サイト URL の構成を検討してください。
詳細については、「サイトの設定の構成」をご参照ください。
ヘッダー、フッター、およびグローバル ナビゲーション
サイトのレイアウトの実行には、ヘッダーとフッターが重要です。 ヘッダーでは、ブランディングを追加し、訪問者がコンテンツ、ページ、および外部の Web サイトを検索するのに役立つメニューを作成して、サイトを紹介できます。 フッターは、サイトの最後を示し、組織の著作権情報、場所、連絡先情報など、役立つ情報のスペースを提供します。
さらに、新しいサイトはすべて、グローバル ナビゲーションで有効化されます。これはヘッダー上に幅が狭いコンパクトなバーを配置する機能です。 このバーにより、訪問者はキーワードやフレーズを使用してサイトのコンテンツを検索したり、ユーザー プロフィールにアクセスしたり、通知を表示したりできます。
注意:
携帯電話などの小型のデバイスでは、ヘッダーはドロップダウン メニューに折りたたまれ、グローバル ナビゲーション エレメント (イニシアティブをお気に入りに追加するための ArcGIS Hub Premium のオプションを含む) はサイド パネルにあるため、訪問者はあらゆる画面サイズでコンテンツを参照できます。
ヘッダー、フッター、およびグローバル ナビゲーション バーはサイトとそのページ全体で一貫性を保ち、訪問者は他のページへのリンクをクリックした際に元のページに確実に戻ることができます。
ヘッダーおよびフッターでカスタム コードを使用できます。 また、サイド パネルの [ヘッダー] メニューでオプションを使用して、以下を構成できます (コードを記述する必要はありません)。
- ロゴ
- ヘッダーの背景色とテキストの色
- 訪問者とソーシャル メディアのプラットフォームをつなぐためのソーシャル アイコン
- サイト ナビゲーションを作成するためのページと追加リソースへのメニュー リンク
詳細については、「ヘッダーとテーマ オプションによるサイトのブランディング」および「グローバル ナビゲーションとメニュー リンクの構成」をご参照ください。
色とフォント
サイド パネルの [テーマ] メニューを使用して、ヘッダーの色、グローバル ナビゲーション バー、ボタン、テキスト、および背景色を定義できます。 選択した色とフォントは、サイト レイアウト全体とサイトに追加されたページに適用されます。
個別の行ごとにテーマ カラーをオーバーライドして、レイアウトの色をさらに詳細に制御できます。 各行には、テキストと背景色を設定したり、画像を背景として適用したりできる固有の設定があります。
開始するには、行の右上隅にポインターを合わせ、設定ボタン 
をクリックして、以下を変更します。
- ワイドまたはボックス レイアウトの選択 - [ワイド] では、レイアウト全体に行が展開されます。 [ボックス] では、行内に固定幅でコンテンツが表示されます。
ヒント:
主にモバイル デバイス上に表示されるサイトを公開する場合、[ボックス] が推奨の設定です。
- 16 進数のカラー コードまたは色スライダーを使用するテキストと背景色の変更 - 行に表示されるテキストは、この設定で定義された色で表示されます。 これには、カードを使用して行に表示されるテキストが含まれます。 また、色を行の背景に適用することもできます。
ヒント:
行テキストの色と背景色との色のコントラストが、通常のテキストの場合は 4.5:1、大きいテキストまたはシンボルの場合は 3:1 のアクセシビリティ比を満たしている、または超えていることを確認します。 WebAIM など、色のコントラストを確認する Web サイトは数多くあります。
- 背景画像の設定 - 必要に応じて、画像をアップロードするか、ホストされた画像ファイルへのリンクを貼り付けて、行の背景として画像を設定できます。
ヒント:
背景画像を使用する場合、特にテキストや他のコンテンツをオーバーレイする場合、パターンまたは題材がシンプルな画像を選択します。
行の書式設定の詳細については、「テキストと画像の追加」および「テーマの作成」をご参照ください。
ページ
ページとは、サイトのヘッダー、フッター、カスタム ドメインを採用するサイトに追加できる追加ページです。 ヘッダーにあるメニュー リンクを使用して、追加ページにリンクできます。
注意:
iframes およびマップ カード (Web マップと Web シーン) を使用して情報の範囲をカバーするまたは複数のアイテムを表示する場合、ページを使用してテーマ別またはトピック別にコンテンツを分割することを検討してください。 これにより、サイトの読み込み速度と性能を維持し、サイト訪問者が自分のペースでコンテンツを参照しやすくなります。
サイトに追加されたすべてのページには、サイト エディターに含まれる [レイアウト] メニューと同じ [レイアウト] メニューを持つサイド パネルが含まれます。 つまり、サイトを設計するときと同じ方法でカードを使用してページのレイアウトを設計できます。
ページの詳細については、「サイトへのページの追加」をご参照ください。