1

ここのガイドに従ってGoogle Feed APIを使用しています

私の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://feeds.ign.com/ign/game-reviews");
        feed.setNumEntries(20);
        feed.load(function (result) {
            if (!result.error) {
                var container = document.getElementById("feed0");
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var card = document.getElementById("card");
                    card.appendChild(document.createTextNode(entry.title));
                    card.appendChild(document.createTextNode(entry.contentSnippet));
                    card.appendChild(document.createTextNode(entry.link));
                    container.appendChild(card);
                }
            }
        });
    }
    google.setOnLoadCallback(initialize);
</script>

そして、私が持っている体に：

<article id="feed0">
    <div id="card"></div>
</article>

CSS で各フィード エントリを 1 つの「カード」として個別にスタイル設定しようとしています。最終的な目標は、Google+ フィードのようなものを作成することです。

#feed0, #feed1{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
}
#card{
    border:1px solid gainsboro;
    background-color:white;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
    font:10px Tahoma;
    margin:8px;
    padding:15px;
}

各フィードの結果にスタイルを適用する代わりに、適切にスタイル設定された 1 つのボックスが得られますが、その中にすべてのフィードが含まれています。

すべてのフィード結果をまとめて適用するのではなく、個々のフィード結果にスタイルを適用するにはどうすればよいですか?

4

1 に答える 1