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

解決済みの質問

RSSで取得したURLに文字列を追加と配置?

現在googleのAPIを使いRSSからURLと画像を取得しています。
それで質問なんですが、その取得した(それぞれの)URL末尾に指定した同一の英数字を付加と、
表示する画像のレイアウト(現在は縦一列表示)を4×4とかにしたいとですがうまく出来ません><

複数のURLだと、どの段階で??どう振り当てて組み込んだら良いのか??

レイアウトもCSSで試みましたが一括で処理されるので途中で区切っての配置が出来ず;;
複数の画像だとどうやって振り当てていくのかが判りません><

初心者で申し訳ありませんがよろしく願いします。<m(__)m>



<script type="text/javascript" src="googleのapiキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize()
{ var feed = new google.feeds.Feed("RSSのURL");
  feed.setNumEntries(16);
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 gazo = entry.content.match("<img.*jpg.*?>")
if(gazo != null){container.innerHTML += "<p><a href='" + entry.link + "'>" + gazo +"</a></p>" }
var div = document.createElement("div");
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>



<body onload="OnLoad()">
<div id="feed" ></div>

投稿日時 - 2011-05-11 03:29:35

QNo.6729104

困ってます

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

最終的なHTMLを確認してみればわかると思いますが、container( =<div id="feed" ></div> )の中に、

<div id="feed" >
<p><a href="link1"><img src="gazo1" alt="alt1"></a></p>
<p><a href="link2"><img src="gazo2" alt="alt2"></a></p>
   ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
</div>
のようなソースが追加された形になっているはずです。

このままでも、CSSで #feed p のサイズを指定してfloat:leftなどとしておき、div#feedの幅をその4倍に設定しておくことで4列のレイアウトになると思います。
画像のサイズが指定のサイズより大きかったりすると、レイアウトが乱れる原因となるので、overflowを設定しておくか、先にタグ内でサイズを指定しておくか、あるいはスクリプトで個々にサイズを調整するかなどが必要かも知れません。

文章の段落ではなくなるので、マークアップは<p>よりも
<ul>
<li><a href="link1"><img src="gazo1" alt="alt1"></a></li>
   ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
</ul>
などの方が一般的かも知れません。
まあ、リストにしなくても<div>~</div>でもよいのかも。

おすすめではありませんが、<table>を利用して表示すれば、サイズ調整などをしなくても確実に4×4にできるという意味では簡単かも知れません。

他の考え方としては、現状の縦一列の表示を4個ごとに<div>でくくっておいて、これをフロートさせるというのもありかと。
見え方としては、1番目から順に横に並んでゆくのと、縦に並んでゆくのの違いとなります。

投稿日時 - 2011-05-11 12:47:56

お礼

回答ありがとうございます。
サイズ指定とoverflowを使えばよかったんですね。
float:leftで回りこみまでは出来たんですが、
そのあと、どうやって折り返せば?と悩んでいました。

英数字を付加は自己解決しましたw
寝しなにすると頭が回りが悪かったようでw

ありがとうございました<m(__)m>

投稿日時 - 2011-05-11 20:39:57

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

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

回答(1)

あなたにオススメの質問