ArcGIS Online 組織サイト設定 Tips の第 2 弾では、HTML コードを追加して画像や文字の色を調整する方法をご紹介します。
HTML コードの入力
管理者権限のユーザーでサイン インし、[組織] → [サイト設定] → [ホームページ] をクリックします。 [バナー] 欄で [HTML] を選択し、[HTML ソースの表示] をクリックすると、このボックスに HTML コードを入力できます。
「ArcGIS Online 組織サイト設定 Tips 1:ホームページのメイン画像を設定する」ブログ記事では、[イメージの挿入] でメイン画像を設定する方法をご紹介しましたが、HTML コードに下記のように入力して画像を指定することも可能です。
<div style=”width: 960px;
height: 470px;
background: url(画像の URL)>
</div>
背景画像の角を丸くする
コードを追加することで、背景画像の角を丸くした表現に変えることができます。下記の画像は、通常の角が四角い状態です。
これに赤字部分のコードを追加すると、角が丸くなります。
<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>
ギャラリー リボン上のアイテム名の色を変更する
トップ ページの画像の色合いによっては、ギャラリー リボン上に表示されるマップやアプリケーションの名前が見えにくいことがあります。下記のコードを追加することで、文字の色を変更できます。
<style>
#featuredMaps
.galleryNode .galleryLabelContainer {color: #FFFFFF}
</style>
今回は、白色(#FFFFFF)を指定しましたが、下記の HTML カラー コード ページなどを参考にして好きな色を指定できます。
(参考)原色大辞典
このように、数行のコードを追加するだけで、ArcGIS Online の組織サイトのホームページの見栄えを整えることができますので、ぜひお試しください。
■関連リンク
・ArcGIS Online 製品ページ
・原色大辞典