このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
今回は、前回の新商品に続いてトップページの中央エリアに配置した、ランキングのタイトルを画像に変更する方法をご紹介します。
※右エリアに配置した際の方法は、次号以降でまたご紹介します。
タイトルに使用する画像を作成します。
基本的にはサイズは、横幅500pxにて作成して下さい。
画像サイズは下記のように作成して下さい。
横幅 |
500ピクセル (※一部のテンプレートでは490pxの場合があります。)
※サンプル：500ピクセル |
縦幅 |
35ピクセル (※推奨)
※サンプル：35ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
※メルマガ掲載のため縮小表示
作成した画像をアップロードします。
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
|
商品画像と区別するためにも、コンテンツフォルダにアップロードして下さい。整理にも役立ちます！
|
スタイルシートの編集を利用して、タイトルを変更します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.style2_top {
width: 500px;
height: 35px;
padding: 0px;
background-image: url(image/ranking_title.gif);
text-indent: -9999px;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
width
について |
width: 500px;
タイトルの横幅となります。作成された画像ファイルの横幅を指定して下さい。
|
height
について |
height: 35px;
タイトルの縦幅となります。作成された画像ファイルの縦幅を指定して下さい。
|
padding
について |
padding: 0px;
横幅や縦幅に関連しますので、必ず0pxを指定して下さい。
|
background-image
について |
background-image: url(image/ranking_title.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/〜の相対パスにて記載して下さい。http://〜の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/ranking_title.gif);
|
text-indent
について |
text-indent: -9999px;
既存のテキストを非表示に設定します。
|
|
ランキング1位の商品については画像サイズを変更できます。2位以降と区別するためにも大きく設定することをオススメします。
|
前号へ
