ページ

2011年2月15日火曜日

Feed API - 7

■ CSSをカスタマイズします

■ サンプルです。

<html>
<head>
<title>
Feed API サンプル-7
</title>

■ サンプル-6のCSS部分を下のCSSに変えます。新しいCSSのオリジナルは
http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.cssで入手できます。  


■ アロー部分のイメージを残したいときには
 "garrow.gif" 部分を  http://www.google.com/uds/solutions/dynamicfeed/garrow.gif へ、
 ”arrow_close.gif” 部分を http://www.google.com/uds/css/arrow_close.gif' へ変更します。



<style type="text/css">
.gfg-root {
  width : 70%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  border: 1px dotted #9966ff;
}

.gfg-title {
  font-size: 14px;
  font-weight : bold;
  color : #663333;
  background-color: #ccff99;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 12px;
  font-weight : bold;
  color : #3366cc;
  background-color: #ccff99;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 5px;
}

.gfg-subtitle a {
  color : #663333;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* オーバーレイの正しい動作をするようにする */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
  background-image : url('http://www.google.com/uds/solutions/dynamicfeed/garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
 * フィードコントロールのカスタマイズ
 */

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
 * 水平モードにする簡単な方法は、ガジェットにjsのオプションを適応させる
 */

.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* オーバーレイの正しい動作をするようにする */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
 * フィードコントロールのカスタマイズ
 */

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry  .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('http://www.google.com/uds/css/arrow_close.gif');
}

.gfg-collapse-closed {
  background-image : url('http://www.google.com/uds/css/arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}

</style>

<!-- ここでは”キー”は必要ありません -->
 <script src="http://www.google.com/jsapi/?key=notsupplied-wizard"
    type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>

  <script type="text/javascript">
    function load() {
     var options = {
       numResults : 10,                 // 表示したい行数の指定(初期値は4)
       displayTime : 5000,              // スクロール表示の時間設定(初期値は5000)
       fadeOutTime : 800,               // フェードアウト時間(初期値は1000)
       scrollOnFadeOut : false,         // スクロールフェイドアウトの設定(初期値はfalse)
       pauseOnHover : true,     // マウスをポイントしたときに停止(初期値は false)
       linkTarget : google.feeds.LINK_TARGET_BLANK,         //リンクのターゲット設定(初期値はSELF)
       horizontal : false,              // horizontalモードを設定する(初期値はvertical)
       stacked : true,                  // stackedモードを設定する(初期値はvertical)
       title : 'タイトル'    // フィードの(固定)タイトルの設定(初期値は回収したフィードのタイトル)
    }
      var feed = [
 {title: 'インターネットラジオ',       // 回収するフィードを増やす
  url: 'http://www.radio-oh.com/rdf/whatsnew.rdf'
 },
 {title: 'Jazz is..',
  url: 'http://www.radio-oh.com/rdf/jazzis.rdf'
 }];
      new GFdynamicFeedControl(feed, "feedControl",options);

    }
    google.load("feeds", "1");
    google.setOnLoadCallback(load);
  </script>
</head>
<body>
<!-- フィードの表示セクションです -->
  <div id="body">
    <div id="feedControl">Loading...</div>
  </div>

</body>
</html>