表示されている記事

スポンサーサイト

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


記事の続きにおすすめ商品を表示させる

サイドバーにおすすめ商品を常時表示させるより記事内に表示させたほうが目にとまる事が多いと思うので記事の続き(<!-- BEGIN entry_sequel_items -->〜<!-- END entry_sequel_items -->)内に表示させてみました。

ブログの表示別に設定するための準備:参照
<body onload="javascript:initval();" id="{eid}{page}{cid}{month}{day}{search}{pid}{index}">

bodyダグに上記のid="{eid}{page}{cid}{month}{day}{search}{pid}{index}"を追記する。

設置したHTMLの部分
<!-- 続きを読むのカスタマイズ -->
<div class="entryMore">
<!-- BEGIN entry_sequel_link -->
<a href="./?eid={entry_sequel_id}#sequel">read more</a>
<!-- END entry_sequel_link -->
<!-- BEGIN entry_sequel_items -->

<div class="amazon_List">
<h3>recommend</h3>
<!-- BEGIN amazon -->
<div class="amazon_Image">
{amazon_item}
</div>
<!-- END amazon -->
</div>
<br clear="both">

{entry_sequel_text}
<!-- END entry_sequel_items -->
</div>
<!-- END 続きを読むのカスタマイズ -->

今回設置したテンプレートは続きを読むをカスタマイズしているので<!-- BEGIN entry_sequel_items -->〜<!-- END entry_sequel_items -->内に<!-- BEGIN amazon -->〜<!-- END amazon -->を設置しています。

このままではブログトップ表示でも記事の下におすすめ商品が表示されてしまうのでCSSでブログトップ表示には表示されないようにします。表示させても良いとは思いますがあえてブログ記事表示時のみ表示させるようにしてみます。

.amazon_List {display:none;}
body#eid .amazon_List {display:block;}
.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 0 0 0; padding: 0 10px 0 0; border-right:1px dotted #EC6698;}
.amzntxt {}
.amznMycomment {overflow: hidden; font-size:10px; padding:0 0 0 6px;}
  • .amazon_List {display:none;}
    としておすすめ商品を非表示にする
  • body#eid .amazon_List {display:block;}
    としておすすめ商品をブログ記事表示時のみ表示させる

設定したテンプレート記事はこちらです。

おすすめ商品を横並びにしてもいいかもしれません。


スポンサーサイト


コメント
コメントする








   
この記事のトラックバックURL
トラックバック
記事の続きにおすすめ商品を表示させる | My First JUGEM Template! こちらのブログに記事を書きました。テンプレートのカスタマイズ方法などはこちたのブログで進めていこうかと思います。
  • お気楽に行こう (^。^)y-.。o○
  • 2013/06/10 4:42 PM