楽天市場のAPIを使い、商品情報を取得した際に出てくる商品画像と説明文が簡易すぎるので、見栄えをよくしたい。


以下のブログのような商品画面にしたいです(こちらは、Wordpressのプラグインを使用
http://blog.newf.jp/myplugin/wp-rakuten-link/

表示したいものは「商品画像」「商品名」「説明文」です。
楽天Webサービスの記載は、別のところにしますので、必要ありません。

1)商品画像は左、右には商品名と説明文
2)説明文は、100文字を越えたら、「・・・」に
3)幅は、500pixel
4)大枠としてボーダー(線)で囲む
5)商品画像や説明文の周りには余白が欲しい(各要素がくっつかないように)
6)商品画像と商品名には、商品ページへのリンクを貼りたい

現在は以下のように、簡易な感じです。

//Item数だけ繰り返す
foreach($Items as $Item){
$ret .= '<a href="'.$Item->affiliateUrl.'">';
$ret .= '<img src="'.$Item->mediumImageUrl.'" alt="'.$Item->itemName.'">';
$ret .= "</a>\n";
$ret .= '<p>【商品名】'.$Item->itemName.'</p>';
$ret .= '<p>【商品説明】'.$Item->itemCaption.'</p>';
}

//divタグを閉じる
$ret .= '</div>';


知恵をかしていただけると幸いです。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2011/03/28 09:42:10
  • 終了:2011/03/28 11:06:59

ベストアンサー

id:deflation No.1

deflation回答回数1036ベストアンサー獲得回数1262011/03/28 10:44:36

ポイント350pt

下記のような感じでいかがでしょう。

変数 $ret に出力したい文字列が入ります。

foreach($Items as $Item) {
    $cap = (mb_strlen($Item->itemCaption) <= 100) ? $Item->itemCaption : mb_strcut($Item->itemCaption, 1, 100) . '...';
    $ret .=<<< EOD
<div style="width:500px; border-style:solid; border-color:light-blue; padding:4px;">
<a href="{$Item->affiliateUrl}">
<img style="border-style:none; margin:2px; float:left;" src="{$Item->mediumImageUrl}" alt="item image" />
</a>
<h3><a href="{$Item->affiliateUrl}">{$Item->itemName}</a></h3>
<p>{$cap}</p>
<br clear="left" />
</div>

EOD;
}
id:love-peanut

deflationさん、理想の回答です!!!

すばらしい回答をしていただき、ありがとうございました!

2011/03/28 11:04:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません