このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、左エリアカートの中身のアイコン画像を変更する方法をご紹介します。
アイコンに使用する画像を作成します。
画像サイズは下記のように作成して下さい。
横幅 |
25ピクセル(※サンプル25ピクセル) |
縦幅 |
20ピクセル(※サンプル20ピクセル)
|
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
作成した画像をアップロードします。
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
下記の箇所を編集して下さい。
編集いただく箇所は、.shopc_in_title内のbackground-imageの行のみとなります。
他の指定については、変更の必要はありません。
.shopc_in_title {
width: ***;
height: ***;
margin: ***;
padding-left: ***;
padding-top: ***;
background-image: url(image/cart_icon.gif);
background-repeat: ***;
background-position: ***;
color: ***;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
background-image
について |
background-image: url(image/cart_icon.gif);
背景画像を変更します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/cart_icon.gif);
|
前号へ
