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