ECCUBEのスライドパネルをamazon的にし、CSS Spriteを学ぶ
この記事は最終更新日から1年以上が経過しています。
スライドパネルは設置してますか
結構以前の記事でEC-CUBEでamazonのような、スライドするお薦め商品パネルの設置というものを書きました。
これと同じようにスライドパネルを使っているものとして、説明します。
まず、以下の画像が3枚です。
lr_bt.gif・・・スライドさせるときのボタン。押した時の動作分の画像も含まれます。
carousel_side_bg.gif・・・左右の辺の直線。
carousel_bg.gif・・・四隅の丸角と上下の辺、上部の薄い色付き部分になります。
あまり詳しくありませんが、本来、これらは一枚の画像でするらしいのですが、そうなると背景画像のリピート表示が使えなくなってしまうので、このように3つに分けたのだと推測しています。
で、この画像を設置するために、まずはアップロードから。
/html/user_data/packages/default/img/background/に枠画像二枚。
/html/user_data/packages/default/img/button/にボタン画像を。
では、一気に表示行きます。
パネルを設置し、尚且つEC-CUBEに手間いらずの半自動お薦めブロックを作成を参考にしてカスタマイズした場合に、適用できるtplファイルコードが以下です。
/data/Smarty/templates/default/frontparts/bloc/pickup.tpl
全部総とっかえ。
<script type="text/javascript">
$(function() {
$(".jCarouselLite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
scroll: 3,
visible : 3,
speed: 400,
easing: "linear"
});
});
</script>
<!-- //////////////////////////////////// javascript //////////////////////////////////// -->
<!--{if count($arrFlagProducts) > 0}-->
<div class="bloc_outer clearfix">
<table id="carousel_table" width="100%" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="carousel-sprite carousel-tl" width="10"></td>
<td class="carousel-sprite carousel-tc">
<div class="carousel_header">
<span id="carousel_main_head">チェックした商品の履歴</span>
<span id="carousel_learn_more" class="tiny">(<a href="#">詳細はこちら</a>)</span>
</div>
</td>
<td class="carousel-sprite carousel-tr" width="10"></td>
</tr>
<tr>
<td class="carousel-side-sprite carousel-box-l" width="10"> </td>
<td>
<div style="zoom: 1;">
<table class="block_table" cellspacing="0" cellpadding="0" border="0" style="margin-top: 10px; margin-bottom:0; width: 100%;">
<tr>
<td class="block_table_l">
<div class="rhfHistoryWrapper">
<span>
<strong class="carousel_check_title">最近チェックした商品はありません。</strong>
</span>
<p>商品詳細ページや検索結果を表示した後、興味のあるページに戻る方法についてはこちらを参照してください。</p>
</div>
</td>
<td class="block_table_r">
<div class="carousel">
<div class="continues_shopping">
<strong>ショッピングを続ける: </strong>
<a href="#">おすすめ商品</a>
</div>
<div class="pagination">
<span> </span>
<span>
ページ:
<span class="page-number">1 </span>
/
<span class="num-pages">1 </span>
</span>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="jCarouselLite">
<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; list-style-type: none; z-index: 1; width: 2880px; left: -800px; ">
<!--{section name=cnt loop=$arrFlagProducts step=1}-->
<li>
<div class="product_item clearfix">
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[cnt].product_id|u}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrFlagProducts[cnt].main_list_image|sfNoImageMainList|h}-->&width=135&height=135" alt="<!--{$arrFlagProducts[cnt].name|h}-->" />
<h3>
<!--{$arrFlagProducts[cnt].name|mb_truncate:10:"..."}-->
</h3>
</a>
<!--{* ▼メーカー *}-->
<div class="maker"> 大八社 </div>
<!--{* ▲メーカー *}-->
<!--{* ▼星ー *}-->
<div class="rating"><img src="<!--{$TPL_URLPATH}-->img/icon/stars-3.gif"> <a href="#">(1)</a></div>
<!--{* ▲星 *}-->
<!--{* ▼商品カテゴリー *}-->
<div class="product_category"> カテゴリー </div>
<!--{* ▲商品カテゴリー *}-->
<!--{assign var=price01 value=`$arrFlagProducts[cnt].price01_min`}-->
<!--{assign var=price02 value=`$arrFlagProducts[cnt].price02_min`}-->
<p class="sale_price"><!--{$smarty.const.SALE_PRICE_TITLE}-->
<span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--></span>
</p>
<div class="reason-text">
<a href="#">おすすめ商品を修正</a>
</div>
</div>
</li>
<!--{/section}-->
</ul>
</div>
</div>
</td>
</tr>
</table>
</td>
<td class="carousel-side-sprite carousel-box-r" width="10"> </td>
</tr>
<tr>
<td class="carousel-sprite carousel-bl" width="10"> </td>
<td class="carousel-sprite carousel-bc"> </td>
<td class="carousel-sprite carousel-br" width="10"> </td>
</tr>
</table>
</div>
<!--{/if}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jcarousellite_1.0.1.pack.js"></script>
ここまでで、レイアウトはどうあれ、文字とか画像が表示されていれば、十分です。
ちなみに、{* ▲メーカー *}とか、{* ▲星 *}とかは、なんとなくamazonに似せる為に入れただけです。
なくてもいいです。
本命のCSS Sprite流し込み
まず、以下をご覧ください。
後、解説してみます。
/*-----全体レイアウト------*/
table#carousel_table,
table.block_table
{
border:0;
padding:0;
}
table#carousel_table td{
border:0;
padding:0;
}
.carousel {
margin: 0px;
position: relative;
padding-left:10px;
}
.jCarouselLite {
position: relative;
overflow: hidden;
margin: auto;
padding-top:10px;
}
.jCarouselLite li {
float: left;
height: 286px !important;
overflow: hidden;
width: 15em;
margin: 0 auto;
}
.jCarouselLite li .product_item {
text-align:left;
margin-left:15px;
}
/*-----内部テーブルレイアウト------*/
table#carousel_table td table.block_table td.block_table_l{
border-right: 1px solid #D3D3D3;
vertical-align: top;
width: 240px;
}
.carousel_check_title{
color: #666666;
font-family: Arial;
font-size: 13px;
}
.continues_shopping{
color: #666666;
font-family: Arial;
font-size: 13px;
}
.pagination{
color: #666666;
padding: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
width: 14em;
}
/*-----テキスト周り------*/
.carousel_header{
padding: 10px 10px 0;
text-align: left;
}
#carousel_main_head{
color: #E47911;
font-family: Arial;
font-size: 17px;
font-weight: bold;
}
.tiny{
font-family: arial,helvetica,osaka,"MS PGothic",sans-serif;
font-size: x-small;
}
.product_item h3{
font-weight:normal;
font-size: 12px;
}
.product_item .sale_price{
font-size: 14px;
}
.maker{
color: #000000;
font-size: 11px;
}
.product_category{
color: #666666;
font-size: 11px;
}
.reason-text{
font-size: 11px;
margin-top: 3px;
}
/*-----背景スプライト指定------*/
.carousel-sprite{
background-image: url("../img/background/carousel_bg.gif");
}
.carousel-side-sprite{
background-image: url("../img/background/carousel_side_bg.gif");
}
.carousel-tl {
background-position: 0 0;
background-repeat: no-repeat;
}
.carousel-tc {
background-position: 0 -41px;
background-repeat: repeat-x;
}
.carousel-tr {
background-position: 0 -81px;
background-repeat: no-repeat;
}
.carousel-box-l {
background-position: -7px 0;
background-repeat: repeat-y;
}
.carousel-box-r {
background-position: 9px 0;
background-repeat: repeat-y;
}
.carousel-br {
background-position: 0 -123px;
background-repeat: no-repeat;
}
.carousel-bc {
background-position: 0 -139px;
background-repeat: repeat-x;
}
.carousel-bl {
background-position: 0 -158px;
background-repeat: no-repeat;
}
/*-----スライドボタン------*/
a.prev {
float: left;
margin: 55px 2px 0 0;
width: 25px;
height: 50px;
background: url(../img/button/lr_bt.gif) no-repeat;
cursor: pointer;
}
a.prev:active {
background-position:left bottom;
}
a.next {
float: right;
margin: 55px 0 0 2px;
width: 25px;
height: 50px;
background: url(../img/button/lr_bt.gif) no-repeat;
background-position:right top;
cursor: pointer;
}
a.next:active {
background-position:right bottom;
}
まず、枠に背景画像をくっつけるところの解説から。
.carousel-sprite これが、四隅のと上下のTDタグで、6か所設置されています。
そして、CSSで背景画像を指定。
すると、この6か所にcarousel_bg.gifの一番上の部分、四分の一の円が表示されるでしょう。
ここまでくれば、ほぼ完成です。
あとは、background-position画像を上下させればいいだけです。
場所によっては、リピートも使ったりしています。
.carousel-side-spriteも同じ事です。
こちらは、画像を左右させることで、表示させます。
続いて、ボタンですが、これも同じようなものですね。
表示させてるボタンをa:activeの時に移動させればいいということです。
簡単な説明ですが、これを応用させれば、一枚絵の背景画像の表示もやっていけるのではないでしょうか。
総括
結構書き換えましたが、amazonのソースを見てみると、ものすごい量のDIVがあったり、TABLEの中にTABLEタグがあったりと、今までやったことのないような書き方がなされていました。
デザインそのままの流用はいけないですが、勉強用に、このようにソースを参考にして、表示の仕組みを学ぶというのはいいことだと考えます。
タグのルールというのもあるらしいですが、自分には勉強不足ですね。
色々とマネして、今後も学んでいければいいかな、と思っています。
