アイテム ページ、グループの説明、マップのポップアップ、テンプレートなどにリッチ テキスト エディターが含まれている場合、ArcGIS Enterprise ポータルで HTML を使用できます。
HTML タグと属性
使用可能なサポートされている HTML タグと属性を以下の表に示します。
| タグ | 属性 |
|---|---|
a | href、style |
abbr | title |
article | style |
aside | style |
audio | autoplay、controls、loop、muted、preload |
b、strong、i、em、u、ul、ol、li、tbody、br、hr | |
blockquote | style |
code | style |
dd、dl、dt | style |
del | style |
details | style、open |
div | style、align、aria-label、aria-hidden |
figcaption | style |
figure | style |
font | size、color、style |
footer | style |
h1、h2、h3、h4、h5、h6 | style |
header | style |
img | src、width、height、border、alt、style |
main | style |
mark | style |
nav | style |
p | style |
pre | style |
section | style |
source | media、src、type |
span | style、aria-label、aria-hidden |
sub | style |
summary | style |
sup | style |
table | width、height、cellpadding、cellspacing、border、style |
| td、th | height、width、valign、align、colspan、rowspan、nowrap、style |
time | style |
tr | height、valign、align、style |
video | autoplay、controls、height、loop、muted、poster、preload、width |
HTML の注意事項
次の点に注意してください。
- 上記の表にリストされていない HTML タグはサポートされていないため、除外されます。
- href と src に対して許可されているプロトコルは https、http、tel、mailto です。
- 閉じていないタグは自動的に閉じられます。
- <>&"s は、<>&" を使用してエスケープされていない場合、適切なタグの外側にエスケープされます。
- UNC リンクはサポートされません。
- a タグが使用されると、href ターゲット URL は常に新しいブラウザー タブで開きます。
CSS プロパティー
サポートされている CSS プロパティーの表を以下に示します。
注意:
ArcGIS Enterprise ではインライン CSS のみがサポートされています。 CSS はスタイル属性内で定義されている必要があります。
背景プロパティー
サポートされている背景プロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
background | background-color | background-position |
background-attachment | background-image | background-repeat |
background-clip | background-origin | background-size |
枠線プロパティー
サポートされている枠線プロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
border | border-image-repeat | border-right-style |
border-bottom | border-image-slice | border-right-width |
border-bottom-color | border-image-source | border-spacing |
border-bottom-left-radius | border-image-width | border-style |
border-bottom-right-radius | border-left | border-top |
border-bottom-style | border-left-color | border-top-color |
border-bottom-width | border-left-style | border-top-left-radius |
border-collapse | border-left-width | border-top-right-radius |
border-color | border-radius | border-top-style |
border-image | border-right | border-top-width |
border-image-outset | border-right-color | border-width |
ボックス プロパティー
サポートされているボックス プロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
box-decoration-break | box-sizing | box-suppress |
box-shadow | box-snap | |
休憩プロパティ
サポートされているブレーク プロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
break-after | break-before | break-inside |
ディスプレイのプロパティ
サポートされている表示プロパティーの表を以下に示します。
| プロパティ | |||
|---|---|---|---|
display | display-inside | display-list | display-outside |
Flex プロパティー
サポートされている Flex プロパティーの表を以下に示します。
| プロパティ | |||
|---|---|---|---|
flex | flex-direction | flex-grow | flex-wrap |
flex-basis | flex-flow | flex-shrink | |
フォント プロパティー
サポートされているフォント プロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
font | font-size-adjust | font-variant-caps |
font-family | font-stretch | font-variant-east-asian |
font-feature-settings | font-style | font-variant-ligatures |
font-kerning | font-synthesis | font-variant-numeric |
font-language-override | font-variant | font-variant-position |
font-size | font-variant-alternates | font-weight |
格子線のプロパティー
サポートされている格子線のプロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
grid | grid-column | grid-row-start |
grid-area | grid-column-end | grid-template |
grid-auto-columns | grid-column-start | grid-template-areas |
grid-auto-flow | grid-row | grid-template-columns |
grid-auto-rows | grid-row-end | grid-template-rows |
均等割り付けのプロパティー
サポートされている均等割り付けのプロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
justify-content | justify-items | justify-self |
リスト プロパティー
サポートされているリスト プロパティーの表を以下に示します。
| プロパティ | |||
|---|---|---|---|
list-style | list-style-image | list-style-position | list-style-type |
余白のプロパティー
サポートされている余白のプロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
margin | margin-left | margin-top |
margin-bottom | margin-right | |
パディング プロパティー
サポートされているパディング プロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
padding | padding-left | padding-top |
padding-bottom | padding-right | |
テキスト プロパティ
サポートされているテキスト プロパティーの表を以下に示します。
| プロパティ | |
|---|---|
text-align | text-emphasis-style |
text-align-last | text-height |
text-combine-upright | text-indent |
text-decoration | text-justify |
text-decoration-color | text-orientation |
text-decoration-line | text-overflow |
text-decoration-skip | text-shadow |
text-decoration-style | text-space-collapse |
text-emphasis | text-transform |
text-emphasis-color | text-underline-position |
text-emphasis-position | text-wrap |
文字のプロパティー
サポートされている文字のプロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
word-break | word-spacing | word-wrap |
その他のプロパティ
サポートされているその他の CSS プロパティーの表を以下に示します。
| プロパティ | ||
|---|---|---|
align-items | gap | max-width |
align-self | height | min-height |
clear | letter-spacing | min-width |
color | lighting-color | overflow |
color-interpolation-filters | line-height | width |
float | max-height | |
従来のバナー
デフォルトでは、以前のバージョンから 10.9 にアップグレードされた ArcGIS Enterprise 組織は、従来のホーム ページ構成を使用しています。
注意:
従来のホーム ページ設定のサポートは、今後のアップグレードで廃止される予定です。 そのため、できるだけ早く既存の組織を新しいホーム ページ環境に移行することをおすすめします。
従来のホーム ページには、ページの上部に幅 960 ピクセル、高さ 180 ピクセルのバナーが含まれています。 定義済みの画像を選択するか、デスクトップからファイルをアップロードして、バナー エリア用の画像を選択するか、リッチ テキストまたは HTML を使用してカスタム デザインを作成することができます。 バナーを従来のホーム ページ設定の一部として構成します。
[カスタム デザイン] オプションを選択した場合、リッチ テキスト エディターが表示され、グラフィックスとテキストを WYSIWYG (What You See Is What You Get) 形式で配置できます。 既存のバナー コンテンツを削除して、独自のコンテンツと置き換えます。 より詳細に設定する場合は、エディターの [HTML ソースの表示] ボタンをクリックすると、独自の HTML コードを入力または貼り付けることができます。
バナーの画像だけを選択した場合、バナー画像の中にロゴが表示されます。 ホーム ページ バナーにカスタム デザインを使用する場合、(デザインにロゴを含めない限り) ロゴは表示されません。
ヒント:
組織サイトが HTTPS のみに設定されている場合、バナーで画像を表示する場合は、HTTPS を使用して設計内の画像参照にアクセスする必要があります。
例
次に、HTML で作成されたバナーの例を示します。 それぞれの例には、バナーの作成に使用されたコードが含まれています。 画像の URL を実際の URL に置き換えることができます。
次のコードには、Generic Environment Organization バナーの作成に使用された HTML および CSS が含まれています。
<div style="width: 960px; font-family: futura, helvetica, arial;
background: url(https://imagesite/generic_env.png); height: 180px">
<div style="width:680px; margin-left: 220px; margin-top: 60px; float: left;">
<span style="font-size:24px; color:#fdf77d;
font-weight:bold; text-transform:uppercase; text-shadow: 2px 2px 2px #085a00;">
Generic Environment Organization</span><br/>
<p style="color:#ffffff; font-size:14px;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ullamcorper lorem pulvinar libero ultricies.</p></div> </div>
次のコードには、Government Home バナーの作成に使用された HTML および CSS が含まれています。
<div style="width: 960px; font-family: futura;
background: url(https://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="https://www.esri.com/industries/federal/index.html/" style="background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
border-bottom:#fff 1px solid; border-left: #fff 1px solid; padding-bottom: 7px;
padding-left: 15px; padding-right: 15px; font-family: helvetica, arial, sans-serif;
color: white; font-size: 14px; vertical-align: middle;
border-top: #fff 1px solid; border-right: #fff 1px solid; text-decoration: none;
padding-top: 7px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0" target="_blank">Government Home</a></div></div>
バナー エリアが幅 960 ピクセル、高さ 180 ピクセルよりも大きいバナーを使用できますが、画像がホームページの一部 (注目のコンテンツの名前など) に重なる場合があることに注意してください。 テキストを見えやすくするには、バナーの下部をデフォルトの青に合う補色に設定するか、下部にフェード効果を追加してください。
<div id="banner-html" style="left: 0px; top: 0px; position: absolute;"><div>
<img src="https://downloads.esri.com/Blogs/learn-arcgis/ago-banner/cartography-banner.png?"
style="-webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px; margin-top:0; width:960px; height:470px;"></div></div>