表示されている記事

スポンサーサイト

一定期間更新がないため広告を表示しています


{amazon_item}

現在このテンプレートで使用している{amazon_item}部分の記述は下記

<!-- BEGIN amazon -->
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<!-- {amazon_item} -->
<div class="amzn">
<div class="amznimg">
<a href="{amazon_url}" target="_blank" alt="{amazon_ProductName}" title="{amazon_ProductName} {amazon_Creator}">
<img src="{amazon_ImageUrlMedium}">
</a>
</div>
<div class="amzntxt">{amazon_ProductName}</div>
<div class="amzntxt">{amazon_Creator}</div>
<br class="clear" />
</div>
</div>
</div>
<!-- END amazon -->
.amazon {}
.amznimg {float:left;margin:0 5px 0 0;}
.amznimg img {width:60px;}
.amzntxt {font-size:10px; overflow: hidden;}

公式テンプレートなどで使われている記述は下記

<!-- BEGIN amazon -->
<div class="sideContents">
{amazon_item}
</div>
<!-- END amazon -->

これに習ってHTMLを置き換えてみる

<!-- BEGIN amazon -->
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
{amazon_item}
</div>
</div>
<!-- END amazon -->

出力されるHTMLは下記

<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div>
</div>

以前ここで書いたHTMLをもう一度確認してみる

<div class="linktitle">RECOMMEND</div>
<div class="linktext">
<!-- BEGIN amazon -->
<div class="amazon_Image">
{amazon_item}
{amazon_comment}
</div>
<!-- END amazon -->
</div>
.amazon { margin-bottom:3px; }
.amazon_text { line-height:140%; }
.amazon_pict { border:none; }/* ボーダーを表示させない */
.amazon_pict a img { border: none; }/* ボーダーを表示させない */
.amazon_Image { margin-bottom:20px; }
.amazon_text { display:none; }
.amazon_text strong { display:none; }
.amazon_monocolle { display:none; }

出力されるHTMlは下記

<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon_Image">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div>
</div>

おすすめ記事にコメントをしていないのでコメントを追加してみます

</div><br clear="both" />総選挙あったのですね!<div>

出力されるHTMLは下記

<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon_Image">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div><br clear="all">総選挙あったのですね!<div>
</div>
</div>
</div><br clear="all">総選挙あったのですね!<div>
</div>
</div>
</div>

コメントが重複して表示されています…

<div class="amazon_Image">
{amazon_item}
</div>
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<div class="amazon_Image">
<div class="amazon">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51PAsC25Z1L._SL160_.jpg" alt="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" class="amazon_pict" border="0"></a>
<div class="amazon_text">
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00524BUGW/jugem-22/ref=nosim/" target="_blank"><strong>AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)</strong></a>&nbsp;<span class="amazon_monocolle"><a href="http://jugem.jp/mono/amazon/B00524BUGW/" title="AKBがいっぱい ~ザ・ベスト・ミュージックビデオ~【初回仕様限定盤】(DVD)" target="_blank">(JUGEMレビュー ?)</a></span><br>   <br>
</div><br clear="all">総選挙あったのですね!<div>
</div>
</div>
</div>

上記のHTMLとしてCSSで表示をコントロールします

.amazon {}
.amznimg {float:left;margin:0 5px 0 0;}
.amznimg img {width:60px;}
.amzntxt {font-size:10px; overflow: hidden;}

.amazon { margin-bottom:3px; }
.amazon_text { line-height:140%; }
.amazon_pict { border:none; }/* ボーダーを表示させない */
.amazon_pict a img { border: none;}/* ボーダーを表示させない */
.amazon_Image { margin-bottom:20px; }
.amazon_text { display:none; }
.amazon_text strong { display:none; }
.amazon_monocolle { display:none; }

.amazon a img {width: 60px;} /* 表示画像の横巾を指定 */
スクリーンショット

このように表示されれています。
不要なCSSの記述もあるかもしれませんがとりあえず。

追記:2013年6月10日-2:43
サイドバー表示 / ひと言コメント

ひと言コメントを書くページ

「データ管理」→「おすすめ商品リスト」→「コメントを編集」


スポンサーサイト


コメント
コメントする








   
この記事のトラックバックURL
トラックバック