ArcGIS Online 組織サイト設定 Tips 2:ホームページの画像や文字の色を調整する

ArcGIS Online 組織サイト設定 Tips の第 2 弾では、HTML コードを追加して画像や文字の色を調整する方法をご紹介します。

HTML コードの入力
管理者権限のユーザーでサイン インし、[組織] → [サイト設定] → [ホームページ] をクリックします。 [バナー] 欄で [HTML] を選択し、[HTML ソースの表示] をクリックすると、このボックスに HTML コードを入力できます。

Image_00_2

「ArcGIS Online 組織サイト設定 Tips 1:ホームページのメイン画像を設定する」ブログ記事では、[イメージの挿入] でメイン画像を設定する方法をご紹介しましたが、HTML コードに下記のように入力して画像を指定することも可能です。

<div style=”width: 960px;
height: 470px;
background: url(画像の URL)>
</div>

背景画像の角を丸くする
コードを追加することで、背景画像の角を丸くした表現に変えることができます。下記の画像は、通常の角が四角い状態です。

Image_02_4


これに赤字部分のコードを追加すると、角が丸くなります。

<div style=”width: 960px;
height: 470px;
background: url(画像の URL);
-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”></div>

Image_03_2


ギャラリー リボン上のアイテム名の色を変更する

トップ ページの画像の色合いによっては、ギャラリー リボン上に表示されるマップやアプリケーションの名前が見えにくいことがあります。下記のコードを追加することで、文字の色を変更できます。

<style>
#featuredMaps
.galleryNode .galleryLabelContainer {color: #FFFFFF}
</style>

今回は、白色(#FFFFFF)を指定しましたが、下記の HTML カラー コード ページなどを参考にして好きな色を指定できます。

(参考)原色大辞典

Image_04_3

このように、数行のコードを追加するだけで、ArcGIS Online の組織サイトのホームページの見栄えを整えることができますので、ぜひお試しください。


関連リンク
ArcGIS Online 製品ページ
原色大辞典