以下のブログのような商品画面にしたいです(こちらは、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>';
知恵をかしていただけると幸いです。
No.1
1036
126
350pt
下記のような感じでいかがでしょう。
変数 $ret に出力したい文字列が入ります。
7
6
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;
}
1
1
1
deflationさん、理想の回答です！！！
すばらしい回答をしていただき、ありがとうございました！