このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、商品詳細ページの販売価格の左横にアイコン画像を表示させる方法をご紹介します。SALEや特価などご自身で作成されたアイコン画像を表示することができます。
※ただし、基本的には全商品に表示されますので、売価を指定しないに設定している場合や、会員販売価格の設定時にも表示されます。
画像サイズは下記のように作成して下さい。
横幅 |
自由
※画像サンプル：25ピクセル |
縦幅 |
自由
※画像サンプル：15ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
スタイルシートを編集します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.detail_page_body .priceb {
padding-left: 30px;
background-image: url(image/icon.gif);
background-repeat: no-repeat;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
padding-left
について |
padding-left: 30px;
アップロードされた画像ファイル横幅+5ピクセルでの指定を推奨します。
例では、横幅25ピクセルの画像を利用しておりますので、30ピクセルを指定しています。
|
background-image
について |
background-image: url(image/icon.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/icon.gif);
|
background-repeat
について |
background-repeat: no-repeat;
必ず指定して下さい。この指定がない場合、アイコン画像が繰り返し表示されます。
|
|
簡単なマークを表示しても面白いかと思います。
アイコンだけでなく、背景色や全体に背景画像を入れることも可能です。
|
前号へ
