ページ

2011年2月19日土曜日

Themes API - 1

■ iGoogle用テーマのカスタマイズです。

■ ヘッダーの背景色だけの設定をした場合です。■ サンプルです。 





<?xml version="1.0" encoding="UTF-8"?>
<ConfigMaps>
  <!-- Metadata;自分のテーマに関する情報 テーマディレクトリーに追加する場合はすべて必須  -->
  <ConfigMap type="Skin">
    <Meta name="title">The Theme's title</Meta>
    <Meta name="description">A description about my theme, how it changes over time, etc.</Meta>
    <Meta name="author">Author's name</Meta>
    <Meta name="author_email">info@mysite.com</Meta>
    <Meta name="thumbnail">http://www.mysite.com/theme/thumbnail410x70.jpg</Meta>
    <Meta name="screenshot">http://www.mysite.com/theme/screenshot680x116.jpg</Meta>
  </ConfigMap>

  <!-- Skins - configMapを含むシングルスキンはiGoogle用デザインのひとつ -->
  <ConfigMap type="Skin">
    <!-- TimeOfDayはスキンの表示時刻を制御する 指定すると一日に異なるデザインのスキンを表示することが可能 -->
    <!-- 表示時間は時刻に沿って指定 最初の時刻は最終時刻の前に 【11pm-3am】という表記はできない -->
    <Trait name="TimeOfDay">12am-6am</Trait>
    <Trait name="TimeOfDay">12pm-6pm</Trait>

    <!-- ページの一番目のレイヤーは背景色 イメージの背景や 透過イメージなど -->
    <!-- すべてのカラー指定は【#xxxxxx】で 正確な色調を得るために hex color値を利用できる -->
    <Attribute name="header.background_color">#ccff33</Attribute><!-- 今回はここだけ -->

    <!-- タイルイメージは一番上の背景色の上にヘッダーの幅まで繰り返されて表示される -->
    <!-- 最初のタイルはタイルが両端まで押しやられてページの中央に表示される -->
    <!-- もしタイルイメージの指定が無いときは背景色が中央イメージの両端に現れる -->
    <!-- 高さは175pxであること 幅は中央の画像と均等にすること -->
<!--    <Attribute name="header.tile_image.url">http://www.mysite.com/theme/header_tile1.jpg</Attribute> -->

    <!-- 中央の画像はページ上では一番上の背景色とタイルの上に表示される -->
    <!-- 高さは175px 少なくとも640pxの幅が必要 -->
    <!-- タイルが指定されている場合でも幅はタイルの倍数でなければならない -->
<!--    <Attribute name="header.center_image.url">http://www5d.biglobe.ne.jp/~pog/api/themes/plant.jpg</Attribute> -->

    <!-- ヘッダー領域のリンク用とテキスト用のカラー指定 -->
    <Attribute name="header.link_color">#xxxxxx</Attribute>
    <Attribute name="header.text_color">#xxxxxx</Attribute>

    <!-- どのようなGoogleのロゴにするかはAPI referenceから選ぶ  ロゴはスキン内ではっきりと表示されるようにする -->
    <Attribute name="header.logo">original</Attribute>

    <!-- ユーザーの利用しているiGoogleのヴァージョンによって左ナビゲーションとタブの見え方を指定 両方とも指定した方が良い -->
    <!-- ナビバーはページの左側に表示されてすべてのタブとがジェットがリスティングされている -->
    <Attribute name="navbar.background_color">#xxxxxx</Attribute>
    <Attribute name="navbar.border_color">#xxxxxx</Attribute>

    <!-- API referenceで利用可能なアイコンカラーを選択する -->
    <Attribute name="navbar.icons.icon_color">#xxxxxx</Attribute>

    <!-- 選択されたタブは白色背景色上に表示され, 白の非選択タブはナビバーの背景色上に表示される -->
    <Attribute name="navbar.tab.selected.link_color">#xxxxxx</Attribute>
    <Attribute name="navbar.tab.unselected.link_color">#xxxxxx</Attribute>
    <Attribute name="navbar.tab.unselected.border_color">#xxxxxx</Attribute>

    <!-- チャットとカードはナビバーの下部に表示される -->
    <Attribute name="navbar.contacts.contact_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.status_color">#xxxxxx</Attribute>

    <!-- マウスオーバー時の連絡先の背景色 -->
    <Attribute name="navbar.contacts.hover_background_color">#xxxxxx</Attribute>

    <!-- カードと連絡先情報は連絡先にマウスオーバー時に表示される -->
    <Attribute name="navbar.contacts.card.border_color">#xxxxxx</Attribute>

    <!-- When a user invites someone to chat, the invited user can see a themed invite -->
    <Attribute name="navbar.contacts.invite.background_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.invite.border_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.invite.text_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.invite.link_color">#xxxxxx</Attribute>

    <!-- これらの値はチャット時の色を制御するガジェットの右下部に表示される -->
    <Attribute name="gadget_area.chat.header.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.chat.header.highlight.background_color">#xxxxxx</Attribute>

    <!-- チャットやナビバーを利用しない代わりにタブを使うユーザーのために利用 gadget_area.tab.attributeの変更でタブテーマを指定 -->
    <!-- 選択、非選択タブ用の枠の色 -->
    <Attribute name="gadget_area.tab.border_color">#xxxxxx</Attribute>

    <!-- タブの背景色とタブ上のテキスト用の色 -->
    <Attribute name="gadget_area.tab.selected.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.selected.text_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.unselected.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.unselected.text_color">#xxxxxx</Attribute>

    <!-- タブ間のライン色とgadget_area、the gadget_areaのフッター用 -->
    <Attribute name="gadget_area.border_color">#xxxxxx</Attribute>

    <!-- ガジェットのタイトルバーとタイトルテキスト用の色 -->
    <Attribute name="gadget_area.gadget.header.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.gadget.header.text_color">#xxxxxx</Attribute>

    <!-- ガジェット周りの四角形フレーム枠の色の -->
    <Attribute name="gadget_area.gadget.border_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.gadget.hover.border_color">#xxxxxx</Attribute>

    <!-- ガジェット内のリンクの色 -->
    <Attribute name="gadget_area.gadget.body.link_color">#xxxxxx</Attribute>

    <!-- ガジェットのタイトルバー内にあるアイコンの色 API referenceから利用できるものを選択する  -->
    <Attribute name="gadget_area.icons.icon_color">#xxxxxx</Attribute>

    <!-- ヘッダーに同様 フッターイメージ(透過)の背後に表示される色を指定できる -->
    <Attribute name="footer.background_color">#xxxxxx</Attribute>

    <!-- 背景色の上にタイルイメージがフッターの横幅まで反復表示される -->
    <!-- 最初のタイルはページの中央に表示され、幅の両脇まで引き伸ばされる -->
    <!-- もしイメージが指定されなければ中央イメージの両側に背景色が表示される -->
    <!-- 140pxの高さが必要 横幅は中央のイメージと均等にする -->
<!--    <Attribute name="footer.tile_image.url">http://www.mysite.com/theme/footer_tile1.jpg</Attribute>-->

    <!-- 中央イメージはページ中央に背景色やタイルの上に表示される -->
    <!-- 高さ140pxで横幅は少なくとも640px必要 -->
    <!-- タイルが指定されている場合は横幅はタイルの倍数でなければならない -->
<!--    <Attribute name="footer.center_image.url">http://www.mysite.com/theme/footer_center1.jpg</Attribute>-->

    <!-- フッター領域のリンクの色 -->
    <Attribute name="footer.link_color">#xxxxxx</Attribute>
    <Attribute name="footer.text_color">#xxxxxx</Attribute>

    <!-- 属性イメージの詳細はプロラムポリシーに従うこと -->
    <!-- Must be 50 px in height and 100 px wide.  Shown in the upper right corner of the footer. -->
<!--    <Attribute name="attribution.image.url">http://www.mysite.com/theme/attribution.jpg</Attribute> -->
  </ConfigMap>

  <!-- その日の異なる時間帯で利用する二つ目のスキン コメントは表示されない -->
  <ConfigMap type="Skin">
    <Trait name="TimeOfDay">6am-12pm</Trait>
    <Trait name="TimeOfDay">6pm-12am</Trait>
    <Attribute name="header.background_color">#xxxxxx</Attribute>
<!--    <Attribute name="header.tile_image.url">http://www.mysite.com/theme/header_tile2.jpg</Attribute> -->
<!--    <Attribute name="header.center_image.url">http://www.mysite.com/theme/header_center2.jpg</Attribute> -->
    <Attribute name="header.link_color">#xxxxxx</Attribute>
    <Attribute name="header.text_color">#xxxxxx</Attribute>
    <Attribute name="header.logo">white</Attribute>
    <Attribute name="navbar.background_color">#xxxxxx</Attribute>
    <Attribute name="navbar.border_color">#xxxxxx</Attribute>
    <Attribute name="navbar.icons.icon_color">#xxxxxx</Attribute>
    <Attribute name="navbar.tab.selected.link_color">#xxxxxx</Attribute>
    <Attribute name="navbar.tab.unselected.link_color">#xxxxxx</Attribute>
    <Attribute name="navbar.tab.unselected.border_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.contact_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.status_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.hover_background_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.card.border_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.invite.background_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.invite.border_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.invite.text_color">#xxxxxx</Attribute>
    <Attribute name="navbar.contacts.invite.link_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.chat.header.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.chat.header.highlight.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.border_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.selected.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.selected.text_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.unselected.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.tab.unselected.text_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.border_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.gadget.header.background_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.gadget.header.text_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.gadget.border_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.gadget.hover.border_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.gadget.body.link_color">#xxxxxx</Attribute>
    <Attribute name="gadget_area.icons.icon_color">#xxxxxx</Attribute>
    <Attribute name="footer.background_color">#xxxxxx</Attribute>
<!--    <Attribute name="footer.tile_image.url">http://www.mysite.com/theme/footer_tile2.jpg</Attribute>-->
<!--    <Attribute name="footer.center_image.url">http://www.mysite.com/theme/footer_center2.jpg</Attribute>-->
    <Attribute name="footer.link_color">#xxxxxx</Attribute>
    <Attribute name="footer.text_color">#xxxxxx</Attribute>
<!--    <Attribute name="attribution.image.url">http://www.mysite.com/theme/attribution.jpg</Attribute>-->
  </ConfigMap>

</ConfigMaps>