人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


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

●質問者: うんこ
●カテゴリ:ウェブ制作
✍キーワード:API as Webサービス wordpress いもの
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● deflation
●350ポイント ベストアンサー

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

変数 $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;
}
◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ