このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
今回は、左エリアのショッピングカート、ログイン部分のタイトルを画像に変更する方法をご紹介します。
既存テキストを非表示にして、アイコンを入れた画像にします。
タイトルに使用する画像を作成します。
各テンプレートで少しサイズは異なりますが、基本的には横幅160ピクセルで作成して下さい。
画像サイズは下記のように作成して下さい。
横幅 |
160ピクセル
※サンプル：160ピクセル |
縦幅 |
自由です。
※サンプル：30ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
作成した画像をアップロードします。
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
|
商品画像と区別するためにも、コンテンツフォルダにアップロードして下さい。整理にも役立ちます！
|
スタイルシートの編集を利用して、タイトルを変更します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.shopc_title {
background-image: url(image/cart_title.gif);
}
.member .shopc_title {
background-image: url(image/login_title.gif);
}
.shopc_title h3 {
text-indent: -9999px;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
.shopc_title
について |
background-image: url(image/cart_title.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/cart_title.gif);
|
.member .shopc_title
について |
ログイン部分のタイトルについては、カート部分のタイトルと同様のクラス名を利用しているため、この指定を追加しない場合、同じ画像が表示されます。
必ず.memberを親要素に指定しログイン用画像指定を行って下さい。
background-image: url(image/login_title.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/login_title.gif);
|
.shopc_title h3
について |
text-indent: -9999px;
既存のタイトル名を非表示に設定します。 |
|
上記でも説明していますが、.memberを親要素に指定することで、ログイン部分のみのデザインを指定することができます。タイトルだけでなく内容部分でも利用できますので活用下さい。
|
前号へ
