このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

今回は、ショップ名画像を背景画像で大きく表示する方法をご紹介します。
背景画像を使用することで、既存の画像サイズよりも大きい画像を使用できます。




ショップ名画像を作成する

ショップ名に使用する画像を作成します。

各テンプレートで少しサイズは異なりますが、基本的にはサイズは自由です。
画像サイズは下記のように作成して下さい。

横幅

自由です。
※大きすぎる場合、表示に不具合が出る場合があります。推奨:350pxまで
※サンプル:350px

縦幅

自由です。
※大きすぎる場合、表示に不具合が出る場合があります。推奨:60pxまで
※サンプル:50px

画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。


サンプル画像


 
画像ファイルをアップロードする

作成した画像をアップロードします。

管理画面→デザイン管理→画像専用管理画面をクリックして下さい。

コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。

赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。


商品画像と区別するためにも、コンテンツフォルダにアップロードして下さい。整理にも役立ちます!

 
スタイルシートを編集する

スタイルシートの編集を利用して、既存のショップ名テキストまたはショップ名画像を非表示にし背景画像を設定します。
※背景画像の設定には、#headerや#container、.shoplogo、.shoptextに設定する方法がありますが、今回は、.shoplogo、.shoptextに設定する方法をご紹介します。

管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。

スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

既に、ショップ名画像を利用している場合と利用していない場合で、指定が異なります。


■ショップ名画像を利用していない場合

ショップ名画像を利用しないで、ショップ名をテキスト表示している場合は、下記の指定をご利用下さい。既存のショップ名テキストを非表示に設定し、背景画像を表示します。

.shoptext A {
display: block;
width: 350px;
height: 50px;
text-indent: -9999px;
background-image: url(image/logo.gif);
}


編集後、「登録処理を完了する」ボタンをクリックして下さい。


displayについて

display: block;
.shoptext内のAタグをブロック要素として使用するための指定です。このブロック要素に背景画像を指定しています。

widthについて

width: 350px;
横幅指定となります。
作成いただいた画像ファイルの横幅を指定して下さい。

heightについて

height: 50px;
作成いただいた画像ファイルの縦幅を指定して下さい。

text-indentについて

text-indent: -9999px;
既存のショップ名テキストを非表示に設定します。

background-image
について

background-image: url(image/logo.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。

画像URLを記載いただく際には、必ずimage/~の相対パスにて記載して下さい。http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。

記載例)
background-image: url(image/logo.gif);


Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.