blog*citron

sb / Serene Bachでオススメ商品を複数表示した場合、テンプレートによってはタイトルのRecommendから繰り返されてしまうことがあります。 これはオススメ商品のブロックにタイトル部分も含まれているせいですが、こうしておかないとオススメ商品の機能を使わない場合もタイトルだけ表示されてしまうためです。
滅多に使わない人、たくさん並べる人、買い物リストにしたい人。
自分のスタイルに合わせて色々アレンジしてみましょう。

2006.09.01 : 記事内容の見直し＆サンプル追加。

HTMLテンプレートでamazonの独自ブロックの位置調整がポイントです。
繰り返される部分は<!-- BEGIN amazon -->と<!-- END amazon -->で囲まれた部分ということを把握しておけばあとはお好みで自由自在。

基礎編

ブロックごと繰り返す

オススメ商品を複数表示した場合、RECOMMENDというタイトル部も一緒にリピートされてしまいますが、公開中のオススメ商品が無い場合はきちんとブロックごと非表示になります。
時々しか使わない人、1点しか表示しない人向け。

<!-- BEGIN amazon -->
<dl class="recommend">
<dt id="recomname">Recommend</dt>
<dd id="recomlist">
<a href="{amazon_url}" title="{amazon_ProductName}"><img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" /></a>
<p><a href="{amazon_url}" title="{amazon_ProductName}">{amazon_ProductName}</a><br />
{amazon_comment}</p>
</dd>
</dl>
<!-- END amazon -->

オススメ商品のみ繰り返す

オススメ商品を複数表示した場合、RECOMMENDのタイトルは１つのみ固定で中身だけリピートしますが、公開中のオススメ商品が無い場合もRECOMMENDのタイトルが残り空のスペースが表示されたままになります。
常時表示で1個～複数の商品を登録する人向け。折り畳みスクリプト使用時もこちら。

<dl class="recommend">
<dt id="recomname">Recommend</dt>
<dd id="recomlist">
<!-- BEGIN amazon -->
<a href="{amazon_url}" title="{amazon_ProductName}"><img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" /></a>
<p><a href="{amazon_url}" title="{amazon_ProductName}">{amazon_ProductName}</a><br />
{amazon_comment}</p>
<!-- END amazon -->
</dd>
</dl>

応用編

画像だけを並べるサムネイルタイプ

コメントや名前などテキストは無し。デザインの良い本のカバーやCDのジャケットを並べればデザインのアクセントにもなるかも。ここでは画像サイズをsmallにしていますが、デザインが許せば大きいサムネイルを選んでも見栄えが良さそうです。

<dl class="recommend">
<dt id="recomname">Recommend</dt>
<dd id="recomlist">
<!-- BEGIN amazon -->
<p><a href="{amazon_url}" title="{amazon_ProductName}">
<img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" />
</a></p>
<!-- END amazon -->
</dd>
</dl>

画像無しでテキストだけのリストタイプ

発売日: 商品名という形のリスト。リンクの貼られた商品名にカーソルを乗せると販売価格とコメントが表示されます。自分の読書予定やお買い物リストとしても。

<dl class="recommend">
<dt id="recomname">Recommend</dt>
<dd id="recomlist">
<ul>
<!-- BEGIN amazon -->
<li>{amazon_ReleaseDate}: <a href="{amazon_url}" title="{amazon_OurPrice} : {amazon_comment}">{amazon_ProductName}</a></li>
<!-- END amazon -->
</ul>
</dd>
</dl>