2013年12月11日水曜日

タグ記録

忘れないようにちょっとした記録です。


おすすめ等の文字サイズ
/* ************************************************
 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>を追加