お気に入り | 日本語 | ログイン

リファレンス

このドキュメントは Themes API のリファレンスです。テーマは、メタデータやデザイン要素のキー値のペアを含む XML ファイルに実装されます。

目次

  1. メタデータ属性
  2. デザイン属性
  3. iGoogle ロゴ
  4. ガジェット タイトル バー アイコン

メタデータ属性

テーマの指定の一番上のセクションには、タイトルや作成者といったテーマのメタデータ属性のリストが含まれます。 

<?xml version="1.0" encoding="UTF-8" ?> 
<ConfigMaps> 
  <ConfigMap type="Skin"> 
    <Meta name="title">Simple Theme</Meta> 
    <Meta name="description">Simple theme example.</Meta> 
    <Meta name="author">Rowan</Meta>
    <Meta name="author_email">rowan@doggiemail.com</Meta>
    <Meta name="thumbnail">http://www.example.com/thumbnail.jpg</Meta> 
    <Meta name="screenshot">http://www.example.com/screenshot.jpg</Meta>
  </ConfigMap> 
  <ConfigMap type="Skin"> 
    ...attributes... 
  </ConfigMap>
</ConfigMaps>

ConfigMap は、必要な条件をすべて備えたスキンの 1 つを表します。つまり、1 つの表示状態に適用されるすべての属性を持つスキンを表します。ただしこの概念は、実際にはもっと一般化されています。実際には、各 ConfigMap は、属性の任意のセットに対応するすべてのスキン属性を説明します。「実際の」スキンは、適用できるすべての ConfigMaps から算出されます。テーマの指定には少なくとも 2 つの <ConfigMap> セクションが必要です。1 つはメタデータを含むセクションで、もう 1 つは少なくとも 1 つのスキンのデザイン属性を含むセクションです。

次の表に、メタデータ セクションに含めることができる属性の一覧を示します。テーマを iGoogle テーマ ディレクトリに登録するには、すべてのメタデータ属性をテーマに含める必要がありますが、メタデータ属性がなくてもテーマはテストできます。テーマを iGoogle テーマ ディレクトリに登録する予定なら、洗練され完成したデザインで、プログラム ポリシーのガイドラインに従っている必要があります。

メタデータ セクションでは、<Trait name="Language">xx</Trait> 要素と <Trait name="Country">xx</Trait> 要素を使って、title、description、thumbnail、screenshot の各フィールドをローカライズできます。詳しくはテーマのローカライズをご覧ください。

属性 説明 タイプ 値
title テーマ ディレクトリに表示されるタイトル 文字列 0～30 文字
description テーマと、どう変化するかの説明 文字列 0～300 文字
author テーマ ディレクトリに表示される作成者の名前 文字列 0～50 文字
author_email 作成者のメール アドレス (Google やユーザーが連絡を取るために使用されます)。 文字列 0～100 文字で「@」を必ず含めます。
author_location 「Mountain View , CA, USA」など、作者の所在地を示します。 文字列 0～100 文字
thumbnail テーマのプレビューをユーザーに表示するためにテーマ ディレクトリで使用するサムネイルです。全体は表示せず、テーマのデザインをとらえられるようにする必要があります。URL は相対パスではなく、絶対パスを指定する必要があります。robots.txt によってブロックされていない公開ウェブサイト上に置く必要があります。Google ロゴは含めないでください。品質と一貫性を考慮して、Google がテーマのサムネイルを独自に作成することがあります。 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。410 (幅) x 70 (高さ)
screenshot テーマ ディレクトリ内のそのテーマに関するページではスクリーンショットが使用されます。サイズの変更やトリミングはしないでください。品質と一貫性を考慮して、Google がテーマのスクリーンショットを独自に作成することがあります。 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。680 (幅) x 116 (高さ)

デザイン属性

次の表に、特定のスキンのデザインを詳細に定義するために使用する属性の一覧を示します。厳密には、これらの要素はいずれも必須ではありません。つまり実行時のチェックは行われません。ただし、テーマを iGoogle テーマ ディレクトリに登録する場合、洗練され完成したデザインで、プログラム ポリシーのガイドラインに従っている必要があります。

属性セクションでは、<Trait name="TimeOfDay">xx-xx</Trait> 要素を使って、特定のスキンを表示する時刻を指定できます。詳しくは動的テーマの作成をご覧ください。

属性 説明 タイプ 値
header.background_color  ヘッダーの背景色です。タイルが指定されていない場合に、透明な画像の背後と、中央の画像の両側に表示されます。 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
header.center_image.url ページの中央で、検索ボックス、リンク、iGoogle ロゴの背後、タイル画像の前面に表示される画像です。 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。
幅: 640 ピクセル以上で、上限はなし
高さ: 175 ピクセル固定
header.tile_image.url 検索ボックス、リンク、iGoogle ロゴ、center_image の背後でヘッダー全体にタイルとして敷きつめる画像です。 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。
幅: center_image の幅の約数
高さ: 175 ピクセル固定
header.logo iGoogle ロゴ画像です。 28 種類のセットの中から選択します。 ページ上ではっきり見えるようにする必要があります。 文字列 iGoogle ロゴに掲載されているいずれかのラベルに一致する必要があります。
header.link_color ヘッダー内の次のリンクの色:
検索オプション
設定
言語ツール
このページをカスタマイズ		 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
header.text_color ヘッダー内の次のテキストの色: テーマを選択 (クリック後)
米国以外のページ:
ウェブ
[ラジオボタン] 「ウェブ全体から検索」 [ラジオボタン] 「日本語のページを検索」		 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.background_color 左ナビゲーションの背景の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.border_color 左ナビゲーションの輪郭の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.icons.icon_color 左ナビゲーションにある元に戻すアイコン、最小化アイコン、メニュー アイコンの色 文字列  
navbar.tab.selected.link_color 左ナビゲーションの選択されたタブ内のリンクの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.tab.unselected.link_color 左ナビゲーションの選択されていないすべてのタブ内のリンクの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.tab.unselected.border_color 選択されていないタブ間の線の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.contact_color チャット リスト内の連絡先の名前の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.status_color チャット リスト内の連絡先の状態の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.hover_background_color マウスカーソルを連絡先の上に移動したときにハイライト表示される背景の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.card.border_color マウスカーソルを連絡先の上に移動したときに表示されるカードの輪郭の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.invite.background_color 連絡先招待状の背景の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.invite.border_color 連絡先招待状の輪郭の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.invite.text_color 連絡先招待状のテキストの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
navbar.contacts.invite.link_color 連絡先招待状内のリンクの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.chat.header.background_color チャット会話の背景の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.chat.header.highlight.background_color 新しいメッセージを含むチャット会話の背景の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.tab.border_color
(ユーザーの iGoogle バージョンによる) 		タブの両方 (選択されているタブと選択されていないタブ) の輪郭の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.tab.selected.background_color
(ユーザーの iGoogle バージョンによる)		 タブの四角の背景色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.tab.selected.text_color
(ユーザーの iGoogle バージョンによる)		 タブ名のテキストの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.tab.unselected.background_color
(ユーザーの iGoogle バージョンによる)		 タブの四角の背景色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.tab.unselected.text_color
(ユーザーの iGoogle バージョンによる)		 タブ名のテキストの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.border_color ガジェット領域とヘッダーの間を分ける線の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.gadget.border_color ガジェットの境界 (ガジェットの周りのフレーム) の色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.gadget.hover.border_color ガジェットの境界 (ガジェットの周りのフレーム) の色 (マウスカーソルをガジェットの上に移動した場合) 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.gadget.header.background_color ガジェットの上部に表示されるガジェット タイトルバーの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.gadget.header.text_color タイトルバーに表示されるガジェットのタイトルの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.gadget.body.link_color ガジェットの内部の特定のリンクの色 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
gadget_area.icons.icon_color ガジェットのタイトルバー内のボタンの色 文字列 使用可能な値の 16 進の #xxxxxx。使用可能なボタンの値は以下をご覧ください。
gadget_area.menu_icon.image.url
(推奨されません)		 ガジェットのタイトルバーとアクティブなタブにあるメニュー ボタンの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
gadget_area.menu_icon.hover_image.url
(推奨されません)		 ガジェットのタイトルバーとアクティブなタブにあるメニュー ボタンの、マウスを上に移動したときの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
gadget_area.delete_icon.image.url
(推奨されません)		 ガジェットのタイトルバーの削除ボタンの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
gadget_area.delete_icon.hover_image.url
(推奨されません)		 ガジェットのタイトルバーにある削除ボタンの、マウスを上に移動したときの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
gadget_area.collapse_icon.image.url
(推奨されません)		 ガジェットのタイトルバーと RSS フィードのガジェットにある最小化ボタンの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
gadget_area.collapse_icon.hover_image.url
(推奨されません)		 ガジェットのタイトルバーと RSS フィードのガジェットにある最小化ボタンの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
gadget_area.expand_icon.image.url
(推奨されません)		 ガジェットのタイトルバーと RSS フィードのガジェットにある元に戻すボタンの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
gadget_area.expand_icon.hover_image.url
(推奨されません)		 ガジェットのタイトルバーと RSS フィードのガジェットにある元に戻すボタンの画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。 12 (幅) x 12 (高さ)
footer.background_color フッターの背景色。タイルが指定されていない場合に、透明な画像の背後と、中央の画像の両側に表示されます。 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
footer.center_image.url ページの中央で、リンクの背後、タイル画像の前に表示されます。 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。
幅: 640 ピクセル以上で、上限はなし
高さ: 140 ピクセル固定
footer.tile_image.url リンクと center_image の背後でフッター全体に敷きつめるタイルとなる画像 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。幅: center_image の幅の約数
高さ: 140 ピクセル固定
footer.link_color フッター内の次のリンクの色:
広告掲載
ビジネス ソリューション
プライバシー ポリシー
ヘルプ
Google について
モバイル		 文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
footer.text_color フッター内の次のテキストの色:
©2008 Google 		文字列 16 進の #xxxxxx、RGB(x,x,x)、色の名前 (aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow) のいずれかです。
attribution.image.url 作成者の名前やマークの画像フッターの右側で、中央画像とタイル画像の前に表示されます。 JPG (推奨) への URL。GIF と PNG も使用可能 相対パスではなく絶対パスの URL です。
幅: 100 ピクセル固定
高さ: 50 ピクセル固定

iGoogle ロゴ

どのテーマにも iGoogle ロゴを含める必要があり、ロゴはページ上ではっきり見える必要があります。たとえば次の行は、テーマのヘッダー領域に白い iGoogle ロゴを追加します。

<Attribute name="header.logo">white</Attribute>

次の表に、サポートされているロゴの色の一覧を示します。header.logo 属性の値として、フォーマット color または beveled_color を指定できます。

値 ロゴ
original オリジナルのロゴ
beveled_original 立体的なオリジナルのロゴ
white 白いロゴ
beveled_white 立体的な白いロゴ
purpleblue 青紫のロゴ
beveled_purpleblue 立体的な青紫のロゴ
red 赤いロゴ
beveled_red 立体的な赤いロゴ
orange オレンジのロゴ
beveled_orange 立体的なオレンジのロゴ
yellow 黄色いロゴ
beveled_yellow 立体的な黄色いロゴ
yellowgreen 黄緑のロゴ
beveled_yellowgreen 立体的な黄緑のロゴ
green 緑のロゴ
beveled_green 立体的な緑のロゴ
bluegreen 青緑のロゴ
beveled_bluegreen 立体的な青緑のロゴ
blue 青いロゴ
beveled_blue 立体的な青いロゴ
purpleblue 青紫のロゴ
beveled_purpleblue 立体的な青紫のロゴ
purple 紫のロゴ
beveled_purple 立体的な紫のロゴ
purplered 立体的な赤紫のロゴ
beveled_purplered 立体的な赤紫のロゴ

ガジェット タイトル バー アイコン

テーマでは、各ガジェットのタイトル バーに表示されるアイコンの色を指定できます。たとえば次の行は、アイコンの色を #ffaa00 に変更します。

<Attribute name="gadget_area.icons.icon_color">#ffaa00</Attribute>

注: このバージョンの Themes API では、薄い色のデフォルト アイコンが追加されています。以前のバージョンでは、より色の濃い、マウスを置かれたときのアイコンがデフォルトとして使われていました。

次の表に、サポートされるアイコンの色の一覧を示します。

カラー コード デフォルト アイコン マウスを置かれたときのアイコン クリック時のアイコン
000000
0000ff
002aff
0054ff
007fff
00a9ff
00d4ff
00feff
00ff00
00ff2a
00ff55
00ff7f
00ffaa
00ffd4
2a00ff
2aff00
54ff00
5500ff
7f00ff
7fff00
9c785e
a9ff00
aa00ff
c6bda5
d400ff
d4ff00
feff00
ff0000
ff002a
ff0054
ff007f
ff00a9
ff00d4
ff00fe
ff2a00
ff5500
ff7f00
ffaa00
ffd400
ffffff

トップへ戻る