うんこ回答ポイント 350pt

楽天市場の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>';

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

deflation2011/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;
}

スター

うんこ 2011/03/28 11:04:40

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

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

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

ベストアンサー

deflation2011/03/28 10:44:36
満足350pt

うんこ 2011/03/28 11:04:40

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

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

ベストアンサー

deflation2011/03/28 10:44:36 満足350pt

うんこ 2011/03/28 11:04:40

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

deflation2011/03/28 10:44:36
満足350pt