こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

投稿日時 - 2009-06-22 15:28:47

QNo.5065364

困ってます

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

スクリプトタグの上あたりに以下を記述。

<style type="text/css">
#feed {
font-size:10px;
}
#feed li {
height: 2em;
}
</style>


このぐらいなら FeedControl を使うほうがラクですけど。

<script type="text/javascript" src="http://www.google.com/jsapi?key=********"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize(){
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("URL", "");
feedControl.draw(document.getElementById("feed"));
}
google.setOnLoadCallback(initialize);
</script>

無駄な部分は CSS で消せますし。

投稿日時 - 2009-06-23 04:07:55

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問