Google feed API のCSS編集

前へ 次へ
このQ&Aのポイント
  • Google feed APIを使用してWebページの表示に反映されるCSSを編集する方法について質問です。
  • 具体的には、青いアンカーリンクや行間の調整をしたいと考えています。
  • 既存のCSSではなく、Google feed APIのデフォルトのCSSから自分が用意したCSSに変更することを想定しています。
回答を見る
  • ベストアンサー

Google feed API のCSS編集

表題にある件ですがこれはどう行えばいいのでしょうか？ もともとのままでは青いアンカーリンクや狭い行間など、CSSで編集をしたい箇所が数箇所あります。 しかし、通常のCSSへの編集とは異なり、Google feed API が反映される部分なので 私のイメージとしては、Googleが用意しているデフォルトのCSSから自分が用意するCSSへと APIのCSSの適用を変えて、そのCSSを編集していくものではないかと考えていますがこの理解で間違っていないでしょうか？ また、その場合どのようにAPIに適用するCSSを自分が指定するCSSへと連携できるのでしょうか？ こちらのサイトを見ながらやっていましたが肝心のCSSの編集の部分が書かれておらず分かりにくく感じました。 http://weboook.blog22.fc2.com/blog-entry-152.html ここでのやり方としては gfc-control等の要素を編集しているようですが ソースを見てもどこにもその要素がなく、分かりませんでした。 どうぞよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • warpspace
  • ベストアンサー率56% (83/147)
回答No.5

正しく表示されないのはエンコードがおかしいようです。 「http://tora.tonosama.jp/1.html」のソースの<head>の直下に、次の行を追加してみて 下さい。たぶん正しく表示されると思いますよ。 　　<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

その他の回答 (4)

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.4

タブ表示の例： http://weboook.blog22.fc2.com/blog-entry-152.html と 一覧表示の例： http://weboook.blog22.fc2.com/blog-entry-35.html を 混同されているようですね。 補足に記述されたソースを見ると、一覧表示を期待されていると思われる ので、これにそって解説します。 一覧表示の場合の要素構成は、単純に次のようになります。 　　<div id="feed"> 　　　<li><a href="RSSのリンク">RSSのタイトル</a> 　　　　・ 　　　　・ 　　　　・ 　　　<li><a href="RSSのリンク">RSSのタイトル</a> 　　</div> したがって、CSSは次のように指定する必要があります。 　　<style type="text/css"> 　　　#feed li { 　　　　line-height: 2em;　→この例では行間を広げています。 　　　 } 　　</style> ちなみに、 ＞この直後にCSSをこう記述しています。 ＞HTMLの記述欄にはこう書いております。 以下に記述されているCSSおよびHTML(div)はタブ表示の例の場合であり、 一覧表示には適用されません。 タブ表示の再現例： http://warpspace999.web.fc2.com/rss.html と 一覧表示の再現例： http://warpspace999.web.fc2.com/rss1.html を 作成してみましたので、これを参考にしてみてください。

ststst
質問者

補足

ご丁寧に解説を頂き誠にありがとうございます。 頂いた事例を元に http://warpspace999.web.fc2.com/rss1.html こちらのソースをそのままテストサイトに貼り付けてみたのですが 全く動作がしないようです。 http://tora.tonosama.jp/1.html ＞一覧表示の場合の要素構成は、単純に次のようになります。 　　<div id="feed"> 　　　<li><a href="RSSのリンク">RSSのタイトル</a> 　　　　・ 　　　　・ 　　　　・ 　　　<li><a href="RSSのリンク">RSSのタイトル</a> 　　</div> こちらの内容を参考に http://tora.tonosama.jp/2.html こちらにも記述してみましたがやはり難しいようです・・・ なぜwarpspaceさんのところではきちんと表示されているのに 同じソースを貼っても私のところではうまくいかないのか。 ＞以下に記述されているCSSおよびHTML(div)はタブ表示の例の場合であり、 ＞一覧表示には適用されません。 とのご教示ですが、一覧表示に適用されるデフォルトのCSSはそもそもどこに あるのだろうか？というところで頓挫しております・・・ 私のイメージでは、グーグルのfeed項目についてのCSS要素は既にあらかじめ名前が決められており、その既に設定されている要素についてCSSで各人がいじっていくものなのかと捉えています。 しかし、そうなった場合、そもそもの要素がどういった名前で初期設定されているかが分からないため、何の要素をCSSで変更すればいいのか分からないというところが今ぶつかっている壁でございます。

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.3

No.1です。 参照されているサイトの例を再現してみました。ご参考にどうぞ。

参考URL：
http://warpspace999.web.fc2.com/rss.html
  • warpspace
  • ベストアンサー率56% (83/147)
回答No.2

No.1です。 ＞　(1)HTMLソースに、<div id="feed"></div>と入れているところは同じ。 javascript中で正しく、「var feed = new google.feeds.FeedControl();」と 指定していますか？。 ＞　(2)参照サイトのHTMLとCSSをそれぞれの箇所に貼り付ける。 具体的に、実際のコーディングを見せてもらったほうが早そうです。補足に転記してくれますか？。

ststst
質問者

補足

ご丁寧に返信を頂き誠にありがとうございます。 HTMLのソースですがこのように記述しております。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://フィードURL"); feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; a.target = "_blank" ; var date = new Date(entry.publishedDate); a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> この直後にCSSをこう記述しています。 <style type="text/css"> .gfc-resultsRoot { border:1px solid #ccc; background-color:#fff; margin:10px auto; padding:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .gfc-title { font-weight:bold; } dl { margin:0; padding:0; } dt { margin:0; padding:0; color:#666; } dd { margin:0 0 5px 0; padding:0; } </style> HTMLの記述欄にはこう書いております。 <!-- 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> <div id="feedControl">loading...</div> <div id="feed"></div> </div> </div> </div> 結果として、feedで囲っているところはデフォルトのAPIが表示されているのですが<div id="feedControl">loading...</div>というところは ローディングという文字が表示されているだけとなっております・・・

  • warpspace
  • ベストアンサー率56% (83/147)
回答No.1

＞gfc-control等の要素を編集しているようですが 　ソースを見てもどこにもその要素がなく、分かりませんでした。 参照サイトの、「まず、この構造から理解しましょう。リストを使っていると 思われがちですが実はすべてdivで構成されています。」以下に表示されている ものがそれです。実際にはこの要素構造の形式で、google feed apiからフィード バックされるため、これを使用するHTMLソース中には現れません。 したがって、変更したい要素のみスタイルシートを用意してやれば良いのです。 ちなみに、参照サイトでは「そのままだと以前紹介したものになるので必要な ところだけスタイルシートを記述してみます。上のサンプルは以下のように なっています。」以下に表示されているものが、変更部分のスタイルシートを 表しています。

ststst
質問者

補足

回答を頂きありがとうございます。 ただ、まだ頂いたご説明では分かりづらく感じています。 ＞実際にはこの要素構造の形式で、google feed apiからフィード ＞バックされるため、これを使用するHTMLソース中には現れません。 ということは、やはりグーグルから来る初期値の要素（要素名はグーグルが確定している）をCSSでオリジナルに調整する必要があるものと捉えました。 やってみたこととして、以下の手順を試してみました。 (1)HTMLソースに、<div id="feed"></div>と入れているところは同じ。 (2)参照サイトのHTMLとCSSをそれぞれの箇所に貼り付ける。 それでも動作しない状況です・・・

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • google feed apiを使い分けたい

    google ajax feed apiですが、下記コードを書いて "rss_url"部分を引数にして同一ページ内でURLの違うものを複数 使用したいのですが、やり方がわかりません。 理想は<div id = "feed"></div>の id = ""の部分を変更してURLごとに使い分けたいのですが、 どうすればいいでしょうか？ google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("rss_url"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); } }); } google.setOnLoadCallback(initialize); このコードだと<div id = "feed"></div>を記述すればうまく実行されます。 試しに google.load("feeds", "1"); function initialize(rss_url, id) { var feed = new google.feeds.Feed(rss_url); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById(id); } }); } google.setOnLoadCallback(initialize); var test = new MyRssReader("rss_url", "test1"); として <div id = "test1"></div>としてみましがたうまくいきませんでした。

  • google feed api

    以下のようにブログのフィードを取得しようとしたのですが、何も出てきません。ＡＰＩキーは 間違っていないです。二つのファイルは同階層です。余分なところは省略しています。 //test.html <title>Google AJAX Feed API テスト</title> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAABuy1BFnkBh8stkm....................................."> </script> <script type="text/javascript" src="test.js"> </script> </head> <body> <p>Google AJAX Feed API テスト</p> </body> </html> //test.js google.load("feeds", "1"); function initialize() { google.feeds.lookupFeed("http://feedblog.ameba.jp/rss/ameblo/blog/rss20.xml", getFeedUrl); } function getFeedUrl(result){ if (!result.error){ if (result.url != null) { var feed = new google.feeds.Feed(result.url); feed.load(dispfeed); } }else{ var container = document.getElementById("feed"); container.innerHTML = "フィードがありません"; } } function dispfeed(result){ if (!result.error){ var container = document.getElementById("feed"); var htmlstr = ""; htmlstr += '<h2><a href="' + result.feed.link + '">' + result.feed.title + '</a></h2>'; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>'; htmlstr += "<p>" + entry.publishedDate + "</p>"; htmlstr += "<p>" + entry.contentSnippet + "</p>"; htmlstr += "</p>"; } container.innerHTML = htmlstr; }else{ alert(result.error.code + ":" + result.error.message); } } google.setOnLoadCallback(initialize);

  • Google Ajax Feed API　キャッシュ騙しの方法

    Google Ajax Feed APIでRSSフィードを読み込み表示していますが、更新反映が遅いため（修正・削除したはずのエントリーが、古いままで表示される）、以下の方法を試してみたいと思っています。 http://www.lepracaun.info/blog/2007/06/google_ajax_feed_api_2.html 現在は var feedurl = "http://glftp.main.jp/blg/?feed=rss2&cat=3"; var feed = new google.feeds.Feed(feedurl); となっているのですが、これをそのまま上記ページのように var feedurl = "http://glftp.main.jp/blg/?feed=rss2&cat=3"; var feed = new google.feeds.Feed(feedurl)+"?"+(new Date()).getTime()); としてみても何も表示されません。 完全に手探りなのですが…どこかが間違っているのでしょうか？

  • Google AJAX Feed APIについて

    ブログのRSSを使って自動的にホームページに新着ブログ記事の日付とタイトルを表示されるようにしたいと思い、Google AJAX Feed APIを使用しました。 下記のソースだとこのように表示されます。 ・タイトル(2009年6月22日) ・タイトル(2009年6月20日) 表示方法をもう少し変えたいんですが、文字サイズと行間の変更はどのようにすれば可能か、ご存知の方は教えて下さい。 1.文字サイズをもう少し小さく(10pxに)したい 2.行間がくっ付いているのでもう少し広くしたい <script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("フィードのアドレス"); feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; a.target = "_top" ; var date = new Date(entry.publishedDate); a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <div id="feed"></div>

  • google ajax feed api

    google ajax feed api　を使用してガズーブログのＲＳＳより、他のサイトに新着トピックス表示させ自動更新したいです。 下記の参考サイトのものを利用させていただきカスタマイズしましたが、なぜか日付が表示されません。 参考サイト：http://weboook.blog22.fc2.com/blog-entry-80.html 利用ＲＳＳ：https://gazoo.com/G-Blog/tam/BlogRss.aspx

  • Google AJAX Feed API でリンクを張るには？

    Google AJAX Feed API でリンクを張るには？ Google AJAX Feed API を使ってアメブロの記事一覧をリンク付きでホームページに表示させたいのですが、記事タイトルのみ表示されてリンクが張れませんでした。 entry.titleの部分をentry.linkに変えるとＵＲＬが文字情報で表示されてしまいます。 記事タイトルをクリックするとアメブロの記事に飛ぶ様にリンクを張るにはどうすればいいでしょうか？ よろしくお願いします。

  • Google AJAX Feed API でブログタイトルを

    Google AJAX Feed APIを使って見ているんですが、一つわからないことがあります。上部のスライドする部分の中にブログタイトルを含むことって可能なのでしょうか？ CSSで表示、非表示を駆使して、RSSサイトを作っているのですが、 生成されるhtmlのスライド部分自体にブログタイトル情報がきていなくて。 下部一覧部分のブログタイトルをCSSで制御しようとすると、 全ブログのタイトルが同じCSSがあたっているので、 重なったりしてしまい、うまくいきません。 タイトルがないと、複数のブログを扱った時、 どのブログのRSSなのかがわからなくてこまっています。 どなたか、ご教授おねがいします。 http://code.google.com/intl/ja/apis/ajaxfeeds/

  • Google feed API の外部jsファイル化

    Google feed API をつかって、 rssリーダーを作って実験しているのですが、 以下のjavascript部分を外部jsファイルすると、 動作しなくなってしまい困っています。 javascriptには、外部js化が出来るものと 出来ないものがあるのでしょうか？ どなたかご教授おねがいいたします。 <script type="text/javascript"> function load() { var feed = [ {title:'xxx', url:'http://xxx.com'} ]; var options = { numResults : 3, stacked : true, displayTime : 7000, fadeOutTime : 500, linkTarget : google.feeds.LINK_TARGET_BLANK } new GFdynamicFeedControl(feed, "feedControl", options); } google.load("feeds", "1"); google.setOnLoadCallback(load); </script>

  • Google Maps API

    Google Maps APIを使用しホームページに地図を載せているのですが、アンカーポイントを当社の名前を入れて表示したいのですが、調べても見つけられませんでした。どのようにして編集すればよいのか教えてください。よろしくお願いします。

  • Google AJAX Feed APIでの取得した日付の表示について

    お世話になります。 Google AJAX Feed APIにて簡単なＲＳＳのリードを作成したく奮闘しており、某サイトに非常によいサンプルがあったのでそれを利用させていただいていたのですが、1点困ったことがあり投稿させていただきました。 現在下記のようなソースを使用しているのですが、 --ソース------------------------------------------------ ※keyの部分と所得ＲＳＳ部分のアドレスは入っておりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google AJAX Feed API　テスト</title> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi?key=【キーコード】"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("【ＲＳＳアドレス】"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var date = yearNum + "."+(dd.getMonth()+1)+"."+dd.getDate()+" "; container.innerHTML += "<p>" + date +"　<a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></p>"; } } }); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="feed"></div> </body> </html> -------------------------------------------------- 取得したフィードの日付の表示が 2008.6.6 タイトル となるのですが、日にちが１桁から2桁にかわると、 2008.6.6 タイトル 2008.6.12 タイトル となり、2桁の日付がタイトルを押してしまう形になってしまいます。 そこで、日付を 2008.06.06 タイトル 2008.06.12 タイトル という具合に、 一桁の場合に頭に0を付ける形で常に幅を揃えたいと考えているので すが、javaスクリプトの方がなんとなくわかる程度で自分では 書くことができず、こまっております。 非常に図々しい質問ではございますが、javaスクリプトに詳しい 方で、どういじればよいかわかる方おられましたら、お手数ですが お教えいただけますと幸いです。 どうぞよろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する