表示されている記事

スポンサーサイト

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


サイドバーに表示するおすすめ商品表示を指定する

おすすめ商品リスト

おすすめ商品リストの「サイドバー表示 / ひと言コメント」にタグが使えるようなので指定してみました。

サイドバー表示 / ひと言コメントに記述した内容は下記
</div><div class="amznMycomment">AKBがいっぱい<br>総選挙あったのですね!今後の展開が楽しみです<br>アマゾン</div><div>
テンプレートに使用しているおすすめ商品リストのHTML・CSSは下記
<div class="sideBox eidDN">
<h3>おすすめ商品</h3>
<div class="sideContents">
<!-- BEGIN amazon -->
<div class="amazon_Image">
{amazon_item}
</div>
<!-- END amazon -->
</div>
</div>
.amazon_Image {clear:left; margin:0 0 20px 0;}
.amazon_text { display:none; }
.amazon_text strong { display:none; }
.amazon_monocolle { display:none; }
.amazon_pict {width: 60px; float:left; margin:0 5px 0 0;}
.amzntxt {}
.amznMycomment {overflow: hidden; font-size:10px; border-left:1px solid #cccccc; padding:0 0 0 6px;}

画像サイズ幅を60pxに指定し自動に挿入される商品名を非表示させひと言コメントを画像の左に回りこませてています。

下記はCSSで指定した内容
  • .amazon_Image
    clear:left:商品間の回りこみを解除
    margin:0 0 20px 0:商品の下に20pxの余白を指定
  • .amazon_text .amazon_text strong .amazon_monocolle
    display:none:自動に挿入される商品名を非表示
  • .amazon_pict
    width: 60px:商品画像サイズ幅を指定
    float:left:商品画像の後に来る文字を回りこみ
    margin:0 5px 0 0:商品画像の右側に5pxの余白を設定
  • .amznMycomment
    overflow: hidden:商品画像高さより文字数が多い場合、回り込みが解除されない指定
    font-size:10px:ひと言コメントの文字サイズ指定
    border-left:1px solid #cccccc:文字の左側にボーダーを表示
    padding:0 0 0 6px:文字とボーダー間の余白を指定
  • .eidDN
    body#eid .eidDN {display: none;}として個別記事が表示されている場合に指定した部分が非表示になるように指定しています。

サイドバーではなく個別記事表示時に記事の下などにおすすめ商品を表示させてもいいかもしれません。

追記

こちらのテンプレート(http://jugemtemplate.jugem.jp/?tid=3)の記事の続き部分におすすめ商品を表示させてみました。

テンプレートと記事を指定するためのURL
http://jugemtemplate.jugem.jp/?tid=3&eid=128

スポンサーサイト


コメント
コメントする








   
この記事のトラックバックURL
トラックバック
サイドバーに表示するおすすめ商品表示を指定する | My First JUGEM Template! こちらのブログに記事を書きました。おすすめ商品もちょっとカスタマイズすると楽しいかもしれません。
  • お気楽に行こう (^。^)y-.。o○
  • 2013/06/10 4:37 PM