 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、商品詳細ページ画像をスライドにしてる場合に表示される左右スライドの矢印アイコンを小さくする方法をご紹介します。
 |
|
 |
 |
スタイルシートを編集する
デザイン管理→スタイルシートの編集から下記指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願いします。
横幅840px以下(タブレット、スマートフォン)の場合は、左右アイコンは表示されませんので、横幅840px以上(※パソコン表示)で適用される指定となります。
widthとheightがアイコン全体の横幅、
background-sizeが＞アイコン画像サイズで、横幅、縦幅の順に指定します。
@media screen and (min-width: 840px) {
.main_photo_slide .has_outside_controller .upper_slider_controller .swiper-button-prev,
.main_photo_slide .has_outside_controller .upper_slider_controller .swiper-button-next {
width: 15px;
height: 40px;
padding: 10px;
background-size: 12px 27px;
}
}
なお、お問い合わせは下記ページからお願い致します。
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.