イニシアティブまたはサイトのコア チーム メンバーは、以下のカードを使用して画像とテキストをサイトに追加できます。
- [行] カード - サイトの構成要素です。 すべてのカードは行カード内にネストする必要があります。 行カードには、画像と背景色を追加することができます。
- [テキスト] カード - このカードを行カードにドラッグして、サイトの任意の場所にテキストを追加します。 このカードを使用して、ボタン、リスト、テーブル、およびカスタム コードをサイトに追加することもできます。
- [画像] カード - スタンドアロンの画像を任意の場所で任意の行カードに追加します。
最初に、ArcGIS Hub にサイン インし、[概要] ページの [サイト] を選択してサイトのリストを表示します。 組織が ArcGIS Hub Premium のライセンスを保有している場合は、[イニシアティブ] でリストの中からサイトを検索できます。
ヒント:
サイトをブラウザーで表示しているときに編集することもできます。 ArcGIS Hub にサイン インし、サイトの左側に編集ボタンが表示されていることを確認します。
テキストの追加と書式設定
テキストは、サイトで行カードがある任意の場所に追加できます。
- サイトまたはページを編集モードで開きます。
- [テキスト] カードを行に追加し、テキストを追加します。
- 書式設定するテキストを選択します。 オプションには、スタイル (標準、コード、ヘッダーなど)、太字、斜体、リンクなどがあります。
- テキスト サイズを調整するには、スタイル ボタンを選択してヘッダー サイズを選択します。
- テキストの配置を調整するには、段落オプションを選択して配置を選択します。 1 行のテキストを移動するには、パラグラフ オプションを選択してアウトデントまたはインデントを選択します。
ヒント:
操作を誤った場合は、キーボードの Command + Z または Ctrl + Z キーを押して変更を元に戻します。 - [保存] を選択します。
注意:
読みやすさを改善し、あらゆる能力の人々が Web コンテンツにアクセスできるようにするため、2021/2022 年にすべてのサイトとページでベース フォント テキストのフォント サイズが拡大されました。詳細については、記事「FAQ: ArcGIS Hub サイトのベース フォント サイズと rem 単位の今後の変更」をご参照ください。
テキスト色の変更
サイト上にあるすべてのテキストに同じ色を適用するには、[テーマ] 設定を使用してテキスト色を変更します。 行設定を使用して、テキスト色を調整することもできます。
- サイトまたはページを編集モードで開きます。
- サイトまたはページ上にあるすべてのテキストの色を設定するには、サイド パネルを開き、[テーマ] メニューを展開します。 テーマの詳細については、「ヘッダーとテーマ オプションによるサイトのブランド化」をご参照ください。
- 特定の行に色を設定するには、その行の編集鉛筆
を選択します。 - 16 進数のカラー コードを入力するか、色を選択して、色を変更します。
ヒント:
16 進数コードを使用することで、組織のリソース全体で一貫したブランドを確保できます。 組織のブランドの詳細がわからない場合は、ドキュメントまたはブランド ガイドラインが提供されているかどうかを確認してください。 - [保存] を選択します。
フォントの変更
Google Fonts を使用して、テキストの見出しと基本テキストのフォントを変更できます。 基本テキストには、サイトのレイアウト上にあるすべてのテキストが含まれています。 このフォントは、サイトに追加されたページ、サイトの検索によってアクセスされるアイテム詳細ページ、およびイベント ビューにも適用されます。
箇条書きまたは番号付きリストの追加
次の手順に従って、リストを作成します。
- サイトまたはページを編集モードで開きます。
- [テキスト] カードを行に追加します。
- テキストを追加するか、既存のテキストを選択します。
- [順序なしリスト] リストを選択して箇条書きリストを作成するか、[番号順リスト] リストを選択して番号付きリストを作成します。
- [保存] を選択します。
スタンドアロン画像の追加
スタンドアロンの画像を任意の行カードに追加できます。 内部で共有されている画像は、サイン インしていて、コア チームまたは組織に属しているユーザーのみが表示できます。
- サイトまたはページを編集モードで開きます。
- [画像] カードを行に追加します。
- [画像] で、画像ソースを選択します。 どちらのオプションも JPG、JPEG、PNG などをサポートしています。
- URL を入力するには、[画像 URL] を選択し、サポートされている画像リンクを [URL] フィールドに貼り付けます。
- ファイルをアップロードするには、[画像のアップロード] を選択します。 ファイルをボックスまでドラッグするか、[画像の参照] を選択して、画像を追加します (最大ファイル サイズは 3 MB です)。
- アップロードした画像をカスタマイズするには、[画像のトリミング] ボタンを選択してハンドルをドラッグし、クロップ フレームのサイズを変更します。 クロップ フレームを再配置するには、点線を選択してドラッグします。 ズームを調整するには、画像の下にあるスライダーを使用します。
- [オプション] メニューから画像代替テキストを入力することで、視覚障害のあるユーザーを支援し、サイトのアクセシビリティを向上させることができます。
- 該当する場合は、画像のハイパーリンクを入力して、同じタブまたは新しいタブのどちらで開くかを設定します。
- [画像のキャプション] にテキストを入力し、テキストの配置を選択します。
- 必要に応じて [縦横比を変えて画像を全体表示] を選択し、画像の中心点を設定します。 中心点を合わせることで、さまざまな画面に合わせてサイズが変更される際に、画像を目的の位置に確実に合わせることができます。
- [保存] を選択します。
背景画像と色の追加
[行] カードを使用して、他のカードの背後に画像を追加できます。
ヒント:
画像の上にテキストまたはコンテンツを表示するには、対照的な背景色を選択します。 たとえば、明るい色のテキストを使用している場合や、明るい色のマップを表示している場合は、黒色などの暗い背景色を選択し、テキストがはっきり見える状態を保ちます。 次に、画像が見える状態を保つために、色の透過表示を調整します。
- サイトまたはページを編集モードで開きます。
- [表示設定] の下にあるレイアウトと書式設定に [行] カードを追加します。
- [背景画像] で、画像ソースを選択します。 どちらのオプションも JPG、JPEG、PNG などをサポートしています。
- URL を入力するには、[画像 URL] を選択し、サポートされている画像リンクを [URL] フィールドに貼り付けます。
- ファイルをアップロードするには、[画像のアップロード] を選択します。 ファイルをボックスまでドラッグするか、[画像の参照] を選択して、画像を追加します (最大ファイル サイズは 3 MB です)。
- 16 進数のコードを入力するか、色を選択して、[背景色] を選択します。
注意:
行カードのみが背景色をサポートします。
- [画像透過率] を調整するには、スライダーを使用するか、パーセンテージのフィールドに値を入力します。 これにより、背景色が明るくなったり、暗くなったりするので、視力が良くないユーザーにとって画像とテキストが見える状態を保つことができます。
- [保存] を選択します。
行カードの画像レイアウトの選択
すべての行カードには、画像の表示方法を指定する 2 つのレイアウト オプションがあります。
- 行カードに画像を追加した後、カードに表示される画像および他のコンテンツに対して、固定レイアウトまたはワイド レイアウトを選択できます。
- 画像を固定したままにするには、[ボックス] を選択します。
- 画像をサイトの幅全体に広げるには、[ワイド] を選択します。
- [画像の中心点] を設定することで、さまざまな画面に合わせてサイズが変更される際に、画像を目的の位置に確実に合わせることができます。
- [保存] を選択します。
ボタンの作成
セクションやページなど、他の場所へのリンクが設定されたボタンは有用なナビゲーション ツールです。 ボタンには行動喚起を含めることもできます。
- サイトまたはページを編集モードで開きます。
- レイアウトに [テキスト] カードを追加します。
- [挿入] ボタンを選択し、[ボタン] を選択します。
- [</> HTML で編集] を選択します。
- 'href' タグで、'#' の代わりに URL を入力し、'Button' の代わりにリンク テキストを入力します (カルサイト コンポーネント ガイダンス)。
- [適用] → [保存] の順に選択します。
アコーディオン メニューの作成
よくある質問を追加するのに便利なオプションである、折りたたみできるメニューを追加します。
- サイトまたはページを編集モードで開きます。
- レイアウトに [テキスト] カードを追加します。
- [挿入] ボタンを選択し、[アコーディオン] を選択します。
- [</> HTML で編集] を選択し、テキストを追加して書式設定します (カルサイト コンポーネント ガイダンス)。
- [適用] → [保存] の順に選択します。
サポートされているカルサイト コンポーネントを参照
[テキスト] カードは、次の Calcite Design System コンポーネントをサポートしています。 説明、最適な使用、例などを含むすべてのカルサイト コンポーネントのカタログをご参照ください。
|
|
|
HTML を使用したテキストの構成
下記のエレメントと属性を HTML で使用してテキストをカスタマイズします。
- サイトまたはページを編集モードで開きます。
- レイアウトに [テキスト] カードを追加します。
- [</> HTML で編集] を選択し、テキストを追加して書式設定します (カルサイト コンポーネント ガイダンス)。
- [適用] → [保存] の順に選択します。
注意:
セキュリティ上の理由から、[テキスト] カードは、埋め込み JavaScript をサポートしていません。 スクリプト タグは無視されます。
使用可能な HTML エレメント
|
|
|
|
|
|
これらのエレメントの次の属性に対応しています。 サポートされているすべての HTML エレメントで ['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']