スポンサーサイト

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

Google AJAX Feed APIを使ったタブの表示方法の変更

以前紹介して比較的人気があるGoogle AJAX Feed APIでRSSフィードをタブで表示ですが作者や投稿時間を表示したくないという方もいると思うので紹介します。
今回は以下のようにタイトルのみ表示してみます。
loading...
どのようにするかというとCSSを利用します。まず、google.feeds.FeedControlの構造を理解する必要があります。
<!-- The Feed Control Class (Note: Linear Mode is Shown) -->
<div class="gfc-control">

  <!-- Per Feed Container -->
  <div class="gfc-resultsRoot">

    <!-- Per Feed Header -->
    <!-- .gfc-title holds Feed's Label -->
    <div class="gfc-resultsHeader">
      <div class="gfc-title"></div>
    </div>

    <!-- Collection of Entries -->
    <div class="gfc-results">

      <!-- One .gfc-result per entry -->
      <div class="gfc-result">

        <!-- One .gf-result per entry -->
        <div class="gf-result">

          <!-- タイトル(リンク部分) -->
          <div class="gf-title">
            <a class="gf-title"></a>
          </div>

          <!-- 投稿者 -->
          <div class="gf-author"></div>

          <!-- 投稿日付 -->
          <div class="gf-relativePublishedDate"></div>

          <!-- コンテンツ(最初の部分) -->
          <div class="gf-snippet"></div>

        </div>
      </div>
      
      <div class="gfc-result"></div>
    </div>
  </div>
  
  <div class="gfc-resultsRoot"></div>

</div>
これらのクラスは以下の外部CSSで規定されています。 これをダウンロードして必要に応じて変更し自分のサーバにアップして外部ファイルとして指定してあげると完成です。具体的にどのようにするかというと、
.gf-result .gf-author,
.gf-result .gf-spacer,
.gf-result .gf-relativePublishedDate {
  color: #6f6f6f;
  display : inline;
  }
を以下に変更してあげるとタイトルのみとなります。
.gf-result .gf-author,
.gf-result .gf-spacer,
.gf-result .gf-relativePublishedDate,
.gf-result .gf-snippet {
  display : none;
  }
最後に、作り変えた外部CSSファイルは<div id="feedControl">loading...</div>の直前に入れるようにしましょう。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
リストマークが先頭に有ると見栄えが良くなると思うのですが、リストマークの指定は出来ますか。
【2009/06/22 08:58】 | pao #BFJTYZbE | [edit]
構造をご覧のとおりこれはリストでできていません。
外部CSSのクラスgf-titleを変更してあげるとリストっぽくなると思います。

具体的にはpaddingで左側に間隔を開けて背景画像を
指定してあげるとリストっぽく見えると思います。
【2009/06/23 23:24】 | 管理人 #- | [edit]
『外部CSSをダウンロードして必要に応じて変更し自分のサーバにアップして外部ファイルとして指定してあげると完成です』 
の部分が具体的にどういう手順でしたら良いのかわかりません。
いろいろ調べてみたのですがやっぱりよくわからず・・・。

Google APIを使って関連記事を表示させたいのですがつまづいてます。
Google APIを使ってもっと簡単にできる方法はないでしょうか。
もし在ればよろしくお願いします。
【2009/10/25 18:19】 | かのん #nLnvUwLc | [edit]
ちょっと分かりづらい表現かもしれないですね。
すいません。

外部ファイルにと書きましたがHTML内に直接書き込んでも大丈夫です。


<style type="text/css">
<!--

CSSの内容

-->
</style>
【2009/10/27 22:58】 | 管理人 #E2ywrYdA | [edit]
返答ありがとうございます。

個別記事ごとじゃないと上手く表示されないようなので個別記事表示にし、広告を続きを読むを開くと表示される場所に貼りました。
広告が少し下のラインからはみ出てしまうのですが調整する方法はありますか。

それから今表示されている記事を一覧から省く方法があればまたご教授願えませんか。

何度もお邪魔してすみませんm(__)m
【2009/11/03 12:40】 | かのん #nLnvUwLc | [edit]
>>今表示されている記事を一覧から省く方法

確かに省いた方が良いですよね。
いい方法が思いつかず私も省けていません。

ごめんなさい。。
【2009/11/05 22:29】 | 管理人 #E2ywrYdA | [edit]









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

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