忘れないようにちょっとした記録です。
おすすめ等の文字サイズ
/* ************************************************
main
* ************************************************ */
#main div.box {
clear: both;
margin-bottom: 40px;
}
#main div.box h3 {
margin-bottom: 20px;
font-size: 20px;
}
フォントサイズを13pxに変更
左サイドカテゴリー等の背景色
/* ************************************************
side
* ************************************************ */
#side div.box {
clear: both;
margin-bottom: 20px;
}
#side div.box h3 {
margin-bottom: 10px;
padding: 5px;
background: #f5f5f5;
text-align: center;
}
#f5f5f5を#aed3e3に変更
背景 #d7eaee
フォントカラー #668899
商品詳細 説明文 フォントサイズ
/* ************************************************
* product_detail_page
* ************************************************ */
div.product_description {
font-size: 14px;
line-height: 24px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
clear: both;
word-wrap: break-word;
}
font-size: 14px;
↓↓↓
font-size: 12px;
商品詳細 商品名 フォントサイズ
/* ************************************************
* product_detail_page
* ************************************************ */
h2.product_name {
font-size: 20px;
margin-bottom: 15px;
}
font-size: 20px;
↓↓↓
font-size: 17px;
画像を載せてリンク
<a href="ページのURL"><img src="リンク画像のURL"></a>
左サイドカテゴリー等の背景画像
/* ************************************************
* side
* ************************************************ */
#side div.box {
clear: both;
margin-bottom: 20px;
}
#side div.box h3 {
margin-bottom: 10px;
padding: 5px;
background: #aed3e3;
text-align: center;
background: #aed3e3;を background:transparent url() 0px 0px no-repeat;に
カッコ内は背景画像URL
repeat
縦横に背景画像を繰り返す。
repeat-x
横方向にのみ背景画像を繰り返す。
repeat-y
縦方向にのみ背景画像を繰り返す。
no-repeat
背景画像を一回だけ表示して繰り返さない。
カート固定
<script type="text/javascript" src="http://img.shop-pro.jp/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://img.shop-pro.jp/js/stickysidebar.jquery.js"></script>
<script>
$(window).load(function () {
$(function () {
var product_images_height = $('.product_images').height();
$('.product_detail_area').css('height',product_images_height);
$(".add_cart").stickySidebar({
timer: 400
, easing: "easeInOutQuad"
, constrain: true
});
});
});
</script>
を削除する。
販売価格の文字を赤色にする
商品詳細ページにて
<!-- 販売価格 -->
<strong class="price"><{$product.sales}>
↓ ↓ ↓ ↓
<!-- 販売価格 -->
<strong class="price"><span style="color:#ff0000;"><{$product.sales}></strong><br />
定価に打ち消し線を入れる
商品詳細ページにて
<th>定価</th>
<td><{$product.price}></td>
↓ ↓ ↓ ↓
<th>定価</th>
<td><s><{$product.price}></s></td>
スマートフォンショップ設定
販売価格の文字を赤色にする
トップ CSS編集
.box .box-price {
font-weight: bold;
margin: 0 0 5px;
color: #212121;
#ff0000にする
商品詳細
<!-- 値段 -->
<div class="prices">
<th>販売価格</th>
<{if $members_login_flg && $product.discount_flg}>
↓ ↓ ↓ ↓
<!-- 値段 -->
<div class="prices">
<th>販売価格</th>
<span style="color:#ff0000;"><{if $members_login_flg && $product.discount_flg}>
定価を表示する
<!-- // 商品名 -->
<div class="section-inner">
<!-- 値段 -->
↓ ↓ ↓ ↓
<!-- // 商品名 -->
<div class="section-inner">
<!-- 定価 -->
<th>定価</th>
<td><s><{$product.price}></s></td>
</tr>
<{/if}>
<{if $product.sales != ""}>
<tr>
<!-- 値段 -->
販売価格（文字）を表示
<!-- 値段 -->
<div class="prices">の下に<th>販売価格</th>を追加
