HTML を使用したホーム ページ バナーの作成

サブスクリプション:

ホーム ページ バナーを作成するには、ArcGIS Online の組織に属しているアカウントが必要です。詳細については、「基本操作」をご参照ください。

組織の管理者は、Web サイトをカスタマイズして組織にとって重要な地理情報を紹介することができます。HTML を使用してホーム ページ用のバナーを作成するオプションもあります。Web サイトに関する他の構成オプションについては、「Web サイトの構成について」をご参照ください。

バナーについて

ホーム ページには、ページの上部に幅 960 ピクセル、高さ 180 ピクセルのバナーが含まれています。定義済みの画像を選択するか、デスクトップからファイルをアップロードして、バナー エリア用の画像を選択するか、HTML を使用してバナーのコンテンツを作成することができます。詳細については、「Web サイトの一般設定の構成」をご参照ください。

ロゴがバナー画像内に表示されます。HTML を使用してホーム ページ バナーを設定する場合、（HTML にロゴを含めない限り）ロゴは表示されません。

ヒント:

組織が SSL のみに設定されている場合、バナーで画像を表示するには、HTTPS を使用して HTML 内の画像参照にアクセスする必要があります。詳細については、「セキュリティ設定の構成」をご参照ください。

サポートされている HTML

次の表に、カスタム バナーの作成に使用できる HTML タグを示します。

タグ	属性
a	href、target、style
img	src、width、height、border、alt、style
span	style
table	width、height、cellpadding、cellspacing、border、style
div	style
font	size、color、style
tr	height、valign、align、style
td、th	height、width、valign、align、colspan、rowspan、nowrap、style
b、strong、i、em、br、p、li、ul、tbody

HTML を使用する場合のヒント

• 上記の表にリストされていない HTML タグはサポートされていないため、除外されます。
• href および src に対して許可されているプロトコルは http および mailto です。
• 閉じていないタグは自動的に閉じられます。
• 「<>&'」は、「&lt; &gt; &amp; &quot」を使用してエスケープされていない場合、適切なタグの外側にエスケープされます。

例

次に、HTML で作成されたバナーの例を示します。それぞれの例には、バナーの作成に使用されたコードが含まれています。

HTML で作成されたバナーを含むホーム ページの例

次のコードには、Generic Environment Organization バナーの作成に使用された HTML および CSS が含まれています。

<div style="width: 960px; font-family: futura, helvetica, arial; 
background: url(http://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>

HTML で作成されたバナーを含むホーム ページの例

次のコードには、Government Home バナーの作成に使用された HTML および CSS が含まれています。

<div style="width: 960px; font-family: futura;
 background: url(http://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="http://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>