このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、ログイン部分のタイトル画像をログイン前とログイン後で変える方法をご紹介します。
※デモサイトでの表示確認には、下記のメールアドレスとパスワードをご利用下さい。
メールアドレス：info@ocnk.net、パスワード：demo
タイトルに使用する画像を作成します。
各テンプレートで少しサイズは異なりますが、基本的には横幅160ピクセルで作成して下さい。
横幅 |
160ピクセル
※サンプル：160ピクセル |
縦幅 |
自由です。
※サンプル：30ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
下記の指定をコピーして貼り付けて下さい。※貼り付け位置は、最下部にお願い致します。
.member .shopc_title {
background-image: url(image/login_title.gif);
}
#st_login .shopc_title {
background-image: url(image/loginuser_title.gif);
}
.member .shopc_title h3 {
text-indent: -9999px;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
既にログインをタイトル画像にされている場合は、#st_login .shopc_titleの指定のみをご利用下さい。
.member .shopc_title
について |
ログイン前のタイトル画像指定です。
ログインのタイトルについては、カートのタイトルと同様のクラス名(.shopc_title)を利用しているため、必ず.memberを親要素に指定下さい。
background-image: url(image/login_title.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/login_title.gif);
|
#st_login .shopc_title
について |
ログイン後のタイトル画像となります。
ログイン前同様にカートのタイトルと同様のクラス名(.shopc_title)を利用しているため、必ず#st_loginを親要素に指定しログイン後の画像指定を行って下さい。
#st_loginがログイン後用の個別指定クラス名となります。
background-image: url(image/loginuser_title.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/loginuser_title.gif);
|
.member .shopc_title h3
について |
text-indent: -9999px;
既存のタイトル名を非表示に設定します。 |
前号へ
