スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Dynamic Feed Control(Google AJAX Feed API)のCSSカスタマイズ

以前紹介した「Google AJAX Feed API - Dynamic Feed ControlでRSSを表示」ですが、タブ表示するものと同様にCSSでのカスタマイズが可能です。

設置方法やJavaScript部分については「Google AJAX Feed API - Dynamic Feed ControlでRSSを表示」をご覧ください。で、今回は以下のようにカスタマイズしてみました。

Loading...

とりあえずコードを載せてみます。APIキーを取得すればコピペで動くはずです。

<script src="http://www.google.com/jsapi/?key=取得したAPIキー"
  type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
  type="text/javascript"></script>

<style type="text/css">

  @import url("gfdynamicfeedcontrol.css");

#feedControl { 
    width : 480px;
  }

</style>

<script type="text/javascript">
  function load() {
    var feed = [
      {title:'JavScript',
       url:'http://japaninternetcom.pheedo.jp/f/japaninternetcom'}];
         var options = {
            numResults : 10,
            stacked : true,
            title: "Japan.internet.com",
            displayTime : 5000,
            fadeOutTime : 500,
            linkTarget : google.feeds.LINK_TARGET_BLANK
          }
        new GFdynamicFeedControl(feed, "feedControl", options);
      }
  google.load("feeds", "1");
  google.setOnLoadCallback(load);
</script>

<div id="feedControl">Loading...</div>
本来CSSはGoogleのサーバに直リンクしているのですが今回は自分のサーバにgfdynamicfeedcontrol.cssという名前でアップします。gfdynamicfeedcontrol.cssの中身は以下のとおりです。
.gfg-root {
  width : 100%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  border: 1px solid #BCCDF0;
}

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

.gfg-subtitle {
  display : none;
}

.gfg-root .gfg-entry .gf-result {
  position : relative;
  float : left;
  background-color : white;
  width : 40%;
  height : 100%;
  padding : 5px 5px 5px 10px;
  text-align : left;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
  padding-top : 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-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: 13px;
  margin-bottom : 3px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}
今後この仕組みについての詳しい説明や他のカスタマイズを紹介していければと思います。
Dynamic Feed Controlの構造を解説してみました。
Dynamic Feed Control(Google AJAX Feed API)の仕組みについて
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。