- ベストアンサー
Google feed API のCSS編集
- Google feed APIを使用してWebページの表示に反映されるCSSを編集する方法について質問です。
- 具体的には、青いアンカーリンクや行間の調整をしたいと考えています。
- 既存のCSSではなく、Google feed APIのデフォルトのCSSから自分が用意したCSSに変更することを想定しています。
- ststst
- お礼率50% (20/40)
- JavaScript
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
正しく表示されないのはエンコードがおかしいようです。 「http://tora.tonosama.jp/1.html」のソースの<head>の直下に、次の行を追加してみて 下さい。たぶん正しく表示されると思いますよ。 <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
その他の回答 (4)
- warpspace
- ベストアンサー率56% (83/147)
タブ表示の例： 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 を 作成してみましたので、これを参考にしてみてください。
- warpspace
- ベストアンサー率56% (83/147)
No.1です。 参照されているサイトの例を再現してみました。ご参考にどうぞ。
- warpspace
- ベストアンサー率56% (83/147)
No.1です。 ＞ (1)HTMLソースに、<div id="feed"></div>と入れているところは同じ。 javascript中で正しく、「var feed = new google.feeds.FeedControl();」と 指定していますか？。 ＞ (2)参照サイトのHTMLとCSSをそれぞれの箇所に貼り付ける。 具体的に、実際のコーディングを見せてもらったほうが早そうです。補足に転記してくれますか？。
補足
ご丁寧に返信を頂き誠にありがとうございます。 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)
＞gfc-control等の要素を編集しているようですが ソースを見てもどこにもその要素がなく、分かりませんでした。 参照サイトの、「まず、この構造から理解しましょう。リストを使っていると 思われがちですが実はすべてdivで構成されています。」以下に表示されている ものがそれです。実際にはこの要素構造の形式で、google feed apiからフィード バックされるため、これを使用するHTMLソース中には現れません。 したがって、変更したい要素のみスタイルシートを用意してやれば良いのです。 ちなみに、参照サイトでは「そのままだと以前紹介したものになるので必要な ところだけスタイルシートを記述してみます。上のサンプルは以下のように なっています。」以下に表示されているものが、変更部分のスタイルシートを 表しています。
補足
回答を頂きありがとうございます。 ただ、まだ頂いたご説明では分かりづらく感じています。 ＞実際にはこの要素構造の形式で、google feed apiからフィード ＞バックされるため、これを使用するHTMLソース中には現れません。 ということは、やはりグーグルから来る初期値の要素（要素名はグーグルが確定している）をCSSでオリジナルに調整する必要があるものと捉えました。 やってみたこととして、以下の手順を試してみました。 (1)HTMLソースに、<div id="feed"></div>と入れているところは同じ。 (2)参照サイトのHTMLとCSSをそれぞれの箇所に貼り付ける。 それでも動作しない状況です・・・
補足
ご丁寧に解説を頂き誠にありがとうございます。 頂いた事例を元に 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で変更すればいいのか分からないというところが今ぶつかっている壁でございます。