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

今回は以下のようにタイトルのみ表示してみます。 どのようにするかというと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>の直前に入れるようにしましょう。