テキストと画像の追加

コア チーム メンバーは、以下のカードを使用して画像とテキストをサイトに追加できます。

• [行] カード - サイトの構成要素。 すべてのカードは行カード内にネストする必要があります。 行カードには、画像と背景色を追加することができます。 このカードを使用して、視差効果を作成することもできます。
• [テキスト] カード - このカードを行カードにドロップして、サイトの任意の場所にテキストを追加します。 このカードを使用して、ボタン、リスト、テーブル、およびカスタム コードをサイトに追加することもできます。
• [画像] カード - スタンドアロンの画像を任意の場所で任意の行カードに追加します。

最初に、ArcGIS Enterprise にサイン インし、[概要] ページの [サイト] をクリックしてサイトのリストを表示します。

ヒント:

サイトをブラウザーで表示しているときに編集することもできます。 サイン インしていて、サイトの左側に編集ボタンが表示されていることを確認してください。

テキストの追加と書式設定

テキストは、サイトで行カードがある任意の場所に追加できます。

1. サイトまたはページを編集モードで開きます。
2. [テキスト] カードを行に追加します。
3. テキストを追加します。
4. 書式設定するテキストを選択します。 書式設定のオプションには、スタイル (ヘッダー、コード スニペット、引用符の追加)、太字、斜体、リンクなどがあります。
5. テキストのサイズを変更するには、スタイル ボタンをクリックしてヘッダー サイズを選択します。
6. テキストの配置を調整するには、段落オプションをクリックして配置を選択します。 段落オプションを選択してインデントまたは逆インデントを選択することで、1 行のテキストをインデントまたは逆インデントすることもできます。

   ヒント:

   操作を誤った場合は、キーボードの Command + Z または Ctrl + Z キーを押して変更を元に戻します。

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

テキスト色の変更

サイト上にあるすべてのテキストに同じ色を適用する場合、[テーマ] 設定を使用してテキスト色を変更できます。 または、行設定を使用して、行ごとにテキスト色を調整できます。

1. サイトまたはページを編集モードで開きます。
2. サイトまたはページ上にあるすべてのテキストの色を設定するには、サイド パネルを開き、[テーマ] メニューを展開します。 テーマの詳細については、「ヘッダーとテーマ オプションによるサイトのブランド化」をご参照ください。
3. 特定の行に色を設定するには、その行の編集鉛筆 をクリックします。
4. 16 進数のカラー コードを入力するか、カラー パレットから色を選択して、色を変更します。

   ヒント:

   16 進数コードを使用することで、組織のリソース全体で一貫したブランドを確保できます。 組織のブランドの詳細がわからない場合は、ドキュメントまたはブランド ガイドラインが提供されているかどうかを確認してください。

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

フォントの変更

Google Fonts を使用して、テキストの見出しと基本テキストのフォントを変更できます。 基本テキストには、サイトのレイアウト上にあるすべてのテキストが含まれています。 このフォントは、サイトに追加されたページ、およびサイトの検索によってアクセスされるコンテンツ プレビュー ページにも適用されます。

詳細については、「ArcGIS Hub および ArcGIS Enterprise サイトでのテキストの書式設定」をご参照ください。

箇条書きまたは番号付きリストの追加

次の手順に従って、リストを作成します。

1. サイトまたはページを編集モードで開きます。
2. サイトかページ レイアウトに [テキスト] カードを追加します。
3. テキストを追加するか、既存のテキストを選択します。
4. 順不同のリストをクリックして箇条書きリストを作成するか、順序付けられたリストをクリックして番号付きリストを追加します。
5. [保存] をクリックします。

アコーディオン メニューの作成

よくある質問を追加するのに便利なオプションである、折りたたみできるメニューを追加します。

1. サイトまたはページを編集モードで開きます。
2. レイアウトに [テキスト] カードを追加します。
3. 挿入ボタンをクリックし、[アコーディオン] を選択します。
4. テキストを追加して書式を設定します。
5. [保存] をクリックします。

スタンドアロン画像の追加

ファイルから画像をアップロードするか、ホスト イメージの URL を入力して画像を追加します。 内部で共有されている画像は、サイン インしていて、コア チームまたは組織に属しているユーザーのみが表示できます。

1. サイトまたはページを編集モードで開きます。
2. [画像] カードを既存の行に追加します。
3. 画像ソースを選択します。 画像ファイルをアップロードするか、画像の URL を入力することができます。 両方のオプションとも JPG、JPEG、および PNG をサポートしています。
   • 画像ファイルをアップロードするには、[画像のアップロード] を選択してサイト エディターのボックスにファイルをドラッグするか、[画像の参照] をクリックしてファイルを特定および追加します。 ファイルの最大サイズは 3 MB です。
   • または、[画像 URL] を選択し、サポートされている画像リンクを [URL] フィールドに貼り付けて画像の URL を入力します。
4. 画像ファイルを使用している場合は、クロップ ボタンをクリックしてハンドルをドラッグし、クロップ フレームのサイズを変更することで、アップロードされた画像をカスタマイズできます。 クロップ フレームは、点線をクリックしてドラッグすることで再配置できます。 画像の下にあるスライダーを調整してズームしたり、クロップ フレーム内をクリックして画像を再配置したりできます。
5. [オプション] メニューから画像代替テキストを入力することで、視覚障害のあるユーザーを支援し、サイトのアクセシビリティを向上させることができます。
6. 画像のハイパーリンクを入力して、同じタブまたは新しいタブのどちらで開くかを選択します。

   注意:

   アクセシビリティ ガイドライン (3.2.2 入力時および達成方法 G201) では、詳細な警告を表示しない限り、新しいタブまたはウィンドウでリンクを開かないようにすることを推奨しています。

7. [画像のキャプション] にテキストを入力し、テキストの配置を選択します。
8. 必要に応じて [縦横比を変えて画像を全体表示] をクリックし、画像の中心点を設定します。 中心点を合わせることで、さまざまな画面に合わせて画像サイズが変更される際に、画像を目的の位置に確実に合わせることができます。
9. [保存] をクリックします。

ボタンの作成

セクションやページなど、他の場所へのリンクが設定されたボタンは有用なナビゲーション ツールです。 ボタンには行動喚起を含めることもできます。

1. サイトまたはページを編集モードで開きます。
2. レイアウトに [テキスト] カードを追加します。
3. [挿入] ボタンをクリックし、[ボタン] を選択します。
4. 行動喚起に含めるボタンのテキストを編集します。
5. 追加したボタンをクリックし、リンク ボタンをクリックします。
6. [表示するテキスト] テキスト ボックスに、テキストを追加します (まだ追加していない場合)。
7. [URL] テキスト ボックスに、ユーザーがボタンをクリックしたときの移動先となるリンクを貼り付けます。
8. [リンクの挿入] をクリックして、変更内容を確定します。
9. [保存] をクリックします。
ボタンの色については、「テーマの作成」をご参照ください。

背景画像と色の追加

[行] カードを使用して、他のカードの背後に画像を追加できます。

ヒント:

画像の上にテキストまたはコンテンツを表示する場合は、明るい背景色か暗い背景色を選択します。 たとえば、明るい色のテキストを使用している場合や、明るい色のマップを表示している場合は、黒色などの暗い背景色を選択し、テキストがはっきり見える状態を保ちます。 次に、画像が見える状態を保つために、色の透過表示を調整します。

1. サイトまたはページを編集モードで開きます。
2. レイアウトに [行] カードを追加します。
3. [背景画像] で、画像ソースを選択します。 画像ファイルをアップロードするか、画像の URL を入力することができます。 両方のオプションとも JPG、JPEG、および PNG をサポートしています。
   • 画像ファイルをアップロードするには、[画像のアップロード] を選択してサイト エディターのボックスにファイルをドラッグするか、[画像の参照] をクリックしてファイルを特定および追加します。 ファイルの最大サイズは 3 MB です。
   • または、[画像 URL] を選択し、サポートされている画像リンクを [URL] フィールドに貼り付けて画像の URL を入力します。
4. 画像を追加したら、16 進数コードを入力するかカラー パレットを使用して、[行設定] の下にある [背景色] の色を選択します。

   注意:

   行カードのみが背景色をサポートします。

5. [表示設定] で、スライダーを使用するか、パーセンテージのフィールドに値を入力して、画像の透過表示を調整します。 画像の透過表示を調整すると、調整方法に応じて背景色が明るくなったり暗くなったりします。 この調整は、視力が良くないユーザーに対して、画像とテキストが見える状態を保つ有効な手法です。
6. [保存] をクリックします。

行カードの画像レイアウトの選択

すべての行カードには 2 つのレイアウト オプションがあり、画像の表示方法を選択できます。

1. 行カードに画像を追加した後、カードに表示される画像および任意のコンテンツに対して、ワイド レイアウトまたは固定レイアウトを選択できます。
   • 画像をサイトの幅全体に広げるには、[ワイド] を選択します。
   • 画像を固定したままにするには、[固定] を選択します。
2. [画像の中心点] を設定することで、さまざまな画面に合わせて画像サイズが変更される際に、画像を目的の位置に確実に合わせることができます。
3. [保存] をクリックします。

HTML を使用したテキストの構成

HTML を使用してテキストをカスタマイズする場合は、次の HTML 要素を使用できます。

1. サイトまたはページを編集モードで開きます。
2. レイアウトに [テキスト] カードを追加し、[HTML で編集] をクリックします。
3. コードを入力して [保存] をクリックします。

注意:

セキュリティ上の理由から、テキスト カードは、埋め込み JavaScript をサポートしていません。 スクリプト タグは無視されます。

次の HTML 要素に対応しています。

'a', 'abbr', 'acronym', 'address', 'article', 'audio', 'b',
	'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite',
 'code', 'col',
 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt',
	'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font',
	'footer', 'frameset',
	'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
 'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', 'p',
	'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp',
	'section', 'small', 'source', 'span', 'strike', 'strong', 'style'
 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'textarea',
	'th', 'thead', 'time', 'title', 'tr', 'track, 'tt', 'u','ul',

これらの要素の次の属性に対応しています。

All supported HTML elements allow : ['class', 'style'],
 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle',
 'name', 'rel', 'style', 'target'],
	'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload'],
 'blockquote': ['cite'],
	'button' : ['name', 'value', 'data-toggle', 'data-target',
	'data-dismiss'],
 'col' : ['span', 'width'],
 'colgroup' : ['span', 'width'],
	'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
	'font': ['size', 'color', 'style'],
 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title',
	'width'],
 'ol' : ['align', 'start', 'type'],
	'p' : ['style'},
 'q' : ['cite'],
	'source' : ['media', 'src', 'type'], 
	'span' : [style],
 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height',
	'style', 'summary', 'width'],
 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width'],
 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width']
 'tr' : [alignt, 'height', style', valign'],
 'ul' : ['type']