コア チーム メンバーは、以下のカードを使用して画像とテキストをサイトに追加できます。
- [行] カード - サイトの構成要素。バナー カードを除くすべてのカードは、行カード内にネストする必要があります。行カードには、画像と背景色を追加することができます。このカードを使用して、視差効果を作成することもできます。
- [テキスト] カード - このカードを行カードにドロップして、サイトの任意の場所にテキストを追加します。このカードを使用して、ボタン、リスト、テーブル、およびカスタム コードをサイトに追加することもできます。
- [バナー] カード - このカードを使用してセクションを作成し、サイト エレメントを分割します。このカードには、オプションの検索バーも用意されています。
- [画像] カード - スタンドアロンの画像を任意の場所で任意の行カードに追加します。
操作を開始するには、Portal for ArcGIS にサイン インし、[概要] ページの [サイト] をクリックしてサイトのリストを表示します。
ヒント:
サイトをブラウザーで表示しているときに編集することもできます。サイン インしていて、サイトの左側に編集ボタンが表示されていることを確認してください。
テキストの追加と書式設定
テキストは、サイトで行カードがある任意の場所に追加できます。
- [テキスト] カードを既存の行にドラッグします。
- カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
- テキストを追加します。
- 書式設定するテキストを選択します。書式設定のオプションには、スタイル (ヘッダー、コード スニペット、引用符の追加)、太字、斜体、リンクなどがあります。
- テキストのサイズを変更するには、スタイル ボタンをクリックしてヘッダー サイズを選択します。
- テキストの配置を調整するには、パラグラフ オプションをクリックして配置を選択します。パラグラフ オプションを選択してインデントまたは逆インデントを選択することで、1 行のテキストをインデントまたは逆インデントすることもできます。
ヒント:
操作を誤った場合は、キーボードの Command + Z または Ctrl + Z キーを押して変更を元に戻します。 - [保存] をクリックします。
テキスト色の変更
次の手順に従ってテキストの色を変更します。
- テキスト カードがネストされている行カードにポインターを合わせ、行カードの設定ボタンをクリックします。
- 16 進数のカラー コードを入力するか、カラー パレットから色を選択して、色を変更します。
ヒント:
16 進数コードを使用することで、組織のリソース全体で一貫したブランドを確保できます。組織のブランドの詳細がわからない場合は、ドキュメントまたはブランド ガイドラインが提供されているかどうかを確認してください。 - [保存] をクリックします。
フォントの変更
Google Fonts を使用して、テキストの見出しと基本テキストのフォントを変更できます。基本テキストには、サイトのレイアウト上にあるすべてのテキストが含まれています。このフォントは、サイトに追加されたページ、サイトの検索によってアクセスされるアイテム詳細ページ、およびイベント ビューにも適用されます。
詳細については、「ArcGIS Hub および ArcGIS Enterprise サイトでのテキストの書式設定」をご参照ください。
箇条書きまたは番号付きリストの追加
次の手順に従って、リストを作成します。
- テキストを追加するか、既存のテキストを選択します。
- 箇条書きリストを作成するには、順不同のリストを選択します。
- 番号付きリストを追加するには、順序付けられたリストを選択します。
- [保存] をクリックします。
スタンドアロン画像の追加
ファイルから画像をアップロードするか、ホスト イメージの URL を入力して画像を追加します。内部で共有されている画像は、サイン インしていて、コア チームまたは組織に属しているユーザーのみが表示できます。
- [画像] カードを既存の行にドラッグします。
- カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
- 画像ソースを選択します。画像ファイルをアップロードするか、画像の URL を入力することができます。両方のオプションとも JPG、JPEG、および PNG をサポートしています。
- 画像ファイルをアップロードするには、[画像のアップロード] を選択して [サイト エディター] のボックスにファイルをドラッグするか、[画像の参照] をクリックしてファイルを特定および追加します。ファイルの最大サイズは 3 MB です。
- または、[画像 URL] を選択し、サポートされている画像リンクを [URL] フィールドに貼り付けて画像の URL を入力します。
- 画像ファイルを使用している場合は、クロップ ボタンをクリックしてハンドルをドラッグし、クロップ フレームのサイズを変更することで、アップロードされた画像をカスタマイズできます。クロップ フレームは、点線をクリックしてドラッグすることで再配置できます。画像の下にあるスライダーを調整してズームしたり、クロップ フレーム内をクリックして画像を再配置したりできます。
- [オプション] メニューから画像代替テキストを入力することで、視覚障害のあるユーザーを支援し、サイトのアクセシビリティを向上させることができます。
- 画像のハイパーリンクを入力して、同じタブまたは新しいタブのどちらで開くかを選択します。
- [画像のキャプション] にテキストを入力し、テキストの配置を選択します。
- 必要に応じて [縦横比を変えて画像を全体表示] をクリックし、画像の中心点を設定します。中心点を合わせることで、さまざまな画面に合わせて画像サイズが変更される際に、画像を目的の位置に確実に合わせることができます。
- [保存] をクリックします。
背景画像と色の追加
行カードとバナー カードを使用して、他のカードの背後に画像を追加できます。これらの画像に色を追加すると、テキストが見やすくなります。
ヒント:
画像の上にテキストまたはコンテンツを表示する場合は、明るい背景色か暗い背景色を選択します。たとえば、明るい色のテキストを使用している場合や、明るい色のマップを表示している場合は、黒色などの暗い背景色を選択し、テキストがはっきり見える状態を保ちます。次に、画像が見える状態を保つために、色の透過表示を調整します。
- [バナー] または [行] カードをサイトにドラッグします。
- カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
- [背景画像] で、画像ソースを選択します。画像ファイルをアップロードするか、画像の URL を入力することができます。両方のオプションとも JPG、JPEG、および PNG をサポートしています。
- 画像ファイルをアップロードするには、[画像のアップロード] を選択して [サイト エディター] のボックスにファイルをドラッグするか、[画像の参照] をクリックしてファイルを特定および追加します。ファイルの最大サイズは 3 MB です。
- または、[画像 URL] を選択し、サポートされている画像リンクを [URL] フィールドに貼り付けて画像の URL を入力します。
- 画像を追加したら、16 進数コードを入力するかカラー パレットを使用して、[行設定] の下にある [背景色] の色を選択します。
メモ:
行カードのみが背景色をサポートします。
- [表示設定] で、スライダーを使用するか、パーセンテージのフィールドに値を入力して、画像の透過表示を調整します。画像の透過表示を調整すると、調整方法に応じて背景色が明るくなったり暗くなったりします。この調整は、視覚障害のないユーザーに対して、画像とテキストが見える状態を保つ有効な手法です。
- [保存] をクリックします。
行カードの画像レイアウトの選択
すべての行カードには 2 つのレイアウト オプションがあり、画像の表示方法を選択できます。
- 行カードに画像を追加した後、カードに表示される画像および任意のコンテンツに対して、ワイド レイアウトまたは固定レイアウトを選択できます。
- 画像をサイトの幅全体に広げるには、[ワイド] を選択します。
- 画像を固定したままにするには、[固定] を選択します。
- [画像の中心点] を設定することで、さまざまな画面に合わせて画像サイズが変更される際に、画像を目的の位置に確実に合わせることができます。
- [保存] をクリックします。
HTML を使用したテキストの構成
HTML を使用してテキストをカスタマイズする場合は、次の HTML 要素を使用できます。
- [テキスト] カードを既存の行にドラッグします。
- カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
- [コード ビュー] オプションをクリックします。
- コードを入力します。
- [保存] をクリックします。
注意:
セキュリティ上の理由から、テキスト カードは、埋め込み 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']