スタイルシートでGoogle AJAX Feed APIの表示方法をカスタマイズ

以前Google AJAX Feed APIでRSSフィードをタブで表示ということで紹介しましたが、スタイルシートで表示方法をカスタマイズしてみます。
といっても以前も同じような記事を書いています。で、今回は投稿日時と投稿者を表示せず、タイトルと記事内容の表示をちょっと変えてみました。このようにすると結構見やすくないでしょうか?
loading...
まず、この構造から理解しましょう。リストを使っていると思われがちですが実はすべてdivで構成されています。
<!-- 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>
そのままだと以前紹介したものになるので必要なところだけスタイルシートを記述してみます。上のサンプルは以下のようになっています。
<style type="text/css">
<!--
#feedControl .gf-author,
#feedControl .gf-spacer,
#feedControl .gf-relativePublishedDate {
    display : none;
  }

#feedControl .gf-result {
    padding-top:5px;
}

#feedControl .gf-snippet {
    padding :5px 5px 5px 8px;
    border-top : 1px solid #DCDCDC; 
}

#feedControl .gf-title a {
    padding : 3px 0 2px 5px;
    border-left : 3px solid #4682B4;
}
-->
</style>
これで自分のサイトに合ったものにカスタマイズできるのでぜひお試しください。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









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

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加