スタイルシートを編集する
＜目次＞
○ 部分的に編集する ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 2
部分的な編集方法
編集箇所の特定方法
○希望が多い部分的の編集例 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 6
お店の名前・キャッチコピーの大きさを変更する
お店の名前・キャッチコピーの色を変更する
お店の背景色・背景画像を変更する
お店の全体を中央寄せにする
各コンテンツの見出しの文字を中央寄せ、文字色変更、背景画像を変更する
ヘッダーの高さを調整する
ヘッダーメニュー、フッターメニューを削除する
商品価格の大きさや色を変更する
○ テーマのインポートで全体的に編集する ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 18
事前の準備
テーマをインポートする
スタイルシートのカスタマイズはサポートしておりません
スタイルシートのカスタマイズについては、ストアーデスクでサポートいたしかねます。
こちらでご案内している内容以外については、ご自身でお調べいただくか、制作代行サービスをご利用ください。
Ｅストアー制作代行
http://clubestore.jp/service/produce/top.html
メニューに無い内容でもお見積りのうえ、承ることができます。
1 / 19
部分的に編集する
部分的な編集方法
■編集画面を開きます
「利用中の（編集中がある場合はその）テーマから作成」ボタンをクリック
します。ボタンの下部に編集画面が開きます。
保存してあるカスタムテーマを「編集」ボタンからを開いて編集すると、上
書きされてしまいます。
バックアップはありませんので、編集前にご自身で、メモ帳などのテキス
トエディタにバックアップを取ったうえで作業を行ってください。
保存できるカスタムテーマの最大数５に達していると、「利用中の（編集中
がある場合はその）テーマから作成」ボタンを押しても編集画面は現れま
せん。いずれか不要なテーマを削除してから作業してください。
■スタイルシートを編集します
① 適宜、必要箇所の記述を変更します。
② 「保存して適用」もしくは「保存」ボタンをクリックします。
「保存」ボタンで保存した場合は、後ほど別途「適用」ボタンを押す必要
があります。
■お店ページを更新します
管理画面の左上にある「お店ページを更新する」をクリックします。
2 / 19
■更新します
① 「注意事項に同意する」にチェックを入れます。
② 「編集中のテーマでお店ページを更新する」ボタンをクリックします。
更新作業がすべて終わるまでお待ちください。
更新が完了したら、お店ページを確認してみましょう。
画面上部の「利用中のテーマでお店ページを更新する」ボタンでは、
編集内容は反映されませんので、お気をつけください。
編集箇所の特定方法
スタイルシートを編集してカスタマイズするには、カスタマイズしたい箇所にスタイルシートのどのクラスが適用されているかを調べる必要があります。
ここでは、ページの HTML ソースから適用クラスを調べる方法をご案内します。
■お店ページを開きます
自分のお店ページをブラウザで開きます。
3 / 19
■開発者ツールを開きます
お店ページ上で右クリックし、メニューから開きます。
ブラウザによってメニュー名は異なりますが、同様の機能があります。
右の画面は GoogleChrome のものです。
GoogleChrome →「検証」
FireFox
→「要素を調査」
InternetExplorer →「要素の検査」
画面下部に開発者ツールが開きます。
■要素の選択ボタンをクリックします
開発者ツールのメニュー左端「要素の選択」ボタンをクリックします。
ブラウザによって、若干のデザインの違いはありますが、
ほとんど同じデザイン、同じ位置にあります。
■変更したい箇所をクリックします
「要素の選択」ボタンをクリックした後、お店ページの上でマウスを動かす
と、マウスが乗っている箇所の色が反転するので、変更したい箇所を選
び、クリックします。
ここでは例として、トップページのセンターエリアに表示している、新着商
品コーナーの見出しのスタイルを変更することにします。
4 / 19
■クラス名を確認します
画面右下に、選択した箇所のクラス名が表示されるので、
それを確認します。
これで、トップページセンターエリアに表示している、新着商品コーナー
の見出しのクラスは、以下の通りとわかりました。
section .newItem h2, section .pickup h2, section .ranking h2,
section .group h2, section .category h2
右下に表示されたクラス名はクリックできるので、コピーしておくと便利で
す。
■該当するクラスを編集します
① 管理画面で該当するクラス名を探し、内容を変更します。
コピーしておいたクラス名で、ブラウザのページ内を検索すると簡単
に探せます。
② 「保存して適用」もしくは「保存」ボタンをクリックします。
続けて、お店ページを更新します。
「編集中のテーマでお店ページを更新する」の方のボタンをご利用く
ださい。
5 / 19
希望が多い部分的の編集例
オレンジの文字が修正する箇所です。
青文字の箇所が修正、もしくは追記した内容です。それぞれの値は希望に応じて変更してください。
お店の名前・キャッチコピーの大きさを変更する
■大きさを変更する記述
ベーシックテンプレートのみが対象です。
カスタムテンプレートはお店の名前、キャッチコピーをページ内に標準で
は表示していないため。
編集前
.siteName { /* サイト名 h1 （テキスト） */
margin:0px;
padding:10px 10px 0px 0px;
font-size:120%;
font-weight:900;
line-height:1em;
}
.siteName a { color:#000000;text-decoration:none;}
.siteName a:hover {color:#FF0000;text-decoration:underline;}
.sitecopy{ /* サイトコピー h2 （ロゴがテキストの場合使用）*/
padding:5px 10px 2px 0px;
margin:0px;
line-height:120%;
font-weight:normal;
}
.sitecopy a {color:#666666;text-decoration:none;}
.sitecopy a:hover {color:#282828;text-decoration:underline;}
編集後
.siteName { /* サイト名 h1 （テキスト） */
margin:0px;
padding: 5px 10px 3px 0px;
font-size:180%;
font-weight:900;
line-height:1em;
}
.siteName a { color:#000000;text-decoration:none;}
.siteName a:hover {color:#FF0000;text-decoration:underline;}
.sitecopy{ /* サイトコピー h2 （ロゴがテキストの場合使用）*/
padding:5px 10px 2px 0px;
margin:0px;
line-height:120%;
font-size:130%; ←追記
font-weight:normal;
}
.sitecopy a {color:#666666;text-decoration:none;}
.sitecopy a:hover {color:#282828;text-decoration:underline;}
6 / 19
お店の名前・キャッチコピーの色を変更する
■色を変更する記述
ベーシックテンプレートのみが対象です。
カスタムテンプレートはお店の名前、キャッチコピーをページ内に標準で
は表示していないため。
編集前
.siteName { /* サイト名 h1 （テキスト） */
margin:0px;
padding:10px 10px 0px 0px;
font-size:120%;
font-weight:900;
line-height:1em;
}
.siteName a { color:#000000;text-decoration:none;}
.siteName a:hover {color:#FF0000;text-decoration:underline;}
.sitecopy{ /* サイトコピー h2 （ロゴがテキストの場合使用）*/
padding:5px 10px 2px 0px;
margin:0px;
line-height:120%;
font-weight:normal;
}
.sitecopy a {color:#666666;text-decoration:none;}
.sitecopy a:hover {color:#282828;text-decoration:underline;}
編集後
.siteName { /* サイト名 h1 （テキスト） */
margin:0px;
padding: 5px 10px 3px 0px;
font-size:180%;
font-weight:900;
line-height:1em;
}
.siteName a { color:#BA7C1F;text-decoration:none;}
.siteName a:hover {color:#FF0000;text-decoration:underline;}
.sitecopy{ /* サイトコピー h2 （ロゴがテキストの場合使用）*/
padding:5px 10px 2px 0px;
margin:0px;
line-height:120%;
font-size:130%;
font-weight:normal;
}
.sitecopy a {color:#BA7C1F;text-decoration:none;}
.sitecopy a:hover {color:#282828;text-decoration:underline;}
色は#と６桁の数字で表現する「カラーコード」で指定します。
検索エンジンで「カラーコード」と検索すると、カラーコードの一覧表を
掲載したサイトが多数見つかるので、ご活用ください。
マウスを当てた時の色も変えたければ、
「.siteName a:hover」や「.sitecopy a:hover」のカラーコードも合わせて変更します。
7 / 19
お店の背景色・背景画像を変更する
■色を変更する記述
【カスタムテンプレート】
カスタムテンプレート
テーマ名「E-ホワイト」を使った例です。他のテーマでは異なります。
編集前
#wrapper {
width: 100%;
min-width: 960px;
background-color: #FFF;
min-height: 100%;
}
～～～～～ 省略 ～～～～～～～～～～
header #header-inner{
<!--{if $hfdesign.h_bgurl}-->
background:url(<!--{$hfdesign.h_bgurl}-->) <!--{$hfdesign.h_bgurlp|background_pos}-->
no-repeat;
<!--{/if}-->
}
～～～～～ 省略 ～～～～～～～～～～
#gnav div.cart-nav,
#gnav nav {
width: 960px;
margin: 0 auto;
border-top: 1px dotted #111;
border-bottom: 1px dotted #111;
overflow: hidden;
*zoom: 1;
}
～～～～～ 省略 ～～～～～～～～～～
#contents {
width: 960px;
margin: 0 auto;
padding-top: 20px;
overflow: auto;
*zoom: 1;
padding-bottom: 57px;
}
編集後
#wrapper {
width: 100%;
min-width: 960px;
background-color: #7b0f0f;
min-height: 100%;
}
～～～～～ 省略 ～～～～～～～～～～
header #header-inner{
<!--{if $hfdesign.h_bgurl}-->
background:url(<!--{$hfdesign.h_bgurl}-->) <!--{$hfdesign.h_bgurlp|background_pos}-->
no-repeat;
background-color:#ffffff;
←追記
<!--{/if}-->
}
～～～～～ 省略 ～～～～～～～～～～
#gnav div.cart-nav,
#gnav nav {
width: 960px;
margin: 0 auto;
border-top: 1px dotted #111;
border-bottom: 1px dotted #111;
background-color:#ffffff;
←追記
overflow: hidden;
*zoom: 1;
}
～～～～～ 省略 ～～～～～～～～～～
#contents {
8 / 19
width: 960px;
margin: 0 auto;
padding-top: 20px;
overflow: auto;
*zoom: 1;
padding-bottom: 57px;
background-color:#ffffff;
←追記
}
ページ全体の背景色を指定し、合わせてヘッダー、グローバルナビ、コン
テンツ部分の背景色に 「白」を指定しています。これら各所は色の指定
がないため、指定しないとページ全体の背景色が透けて見えます。
また、ヘッダーの backgroud-color は、background:url よりも下側に記述してく
ださい。上側ではうまく反映しません。
【ベーシックテンプレート】
テーマ名「カラー・ホワイト」を使った例です。他のテーマでは異なります。
編集前
ベーシックテンプレート
body{
font-family:"ＭＳ Ｐゴシック", Osaka,monospace;
text-align:center;
margin:0;
margin-left:auto;
margin-right:auto;
padding:0px;
font-size:80%;
line-height:135%;
color:#000000;
/*background:#C9D1D1;*/
}
編集後
body{
font-family:"ＭＳ Ｐゴシック", Osaka,monospace;
text-align:center;
margin:0;
margin-left:auto;
margin-right:auto;
padding:0px;
font-size:80%;
line-height:135%;
color:#000000;
background-color:#7b0f0f;
←追記
/*background:#C9D1D1;*/
}
色は#と６桁の数字で表現する「カラーコード」で指定します。
検索エンジンで「カラーコード」と検索すると、カラーコードの一覧表を
掲載したサイトが多数見つかるので、ご活用ください。
9 / 19
■背景に画像を指定するには
初期値で記述されている、以下のいずれかの記述を変更します。テーマによって異なります。
background:#ffffff; ⇒ 背景色を指定
background-color:#ffffff; ⇒ 背景色を指定
background: url: (../img/body_img.gif) repeat; ⇒ 背景に画像を指定
このように指定します。使用する画像はあらかじめ画像台帳に登録してください。
background: url(<EBUserThemeImg>画像ファイル名) repeat;
<EBUserThemeImg> ⇒画像台帳から画像を呼び出す特殊タグ
repeat ⇒画像を繰り返して表示
画像の呼出しをパスで記述しないでください。
カートで画像が表示されない、またはセキュリティ警告メッセージが表示されます。
× http://sampleshop.es.shopserve.jp/pic-labo/ファイル名
× ../pic-labo/ファイル名
10 / 19
お店の全体を中央寄せにする
■中央寄せにする記述
ベーシックテンプレートのみが対象です。
カスタムテンプレートはあらかじめ中央寄せです。
また、ベーシックテンプレートにもあらかじめ中央寄せのものが一部に
あります。
編集前
/* 大枠テーブル（固定） */
#container {
width:860px;
/*margin-left:auto;
margin-right:auto;*/
text-align:left;
border-top:10px #000000 solid;
/*border-left:1px solid #333333;
border-right:1px solid #333333;*/
background:/* url(../img/container.gif) */ #ffffff;
}
編集後
/* 大枠テーブル（固定） */
#container {
width:860px;
/*margin-left:auto;
margin-right:auto;*/
text-align:left;
margin: 0px auto;
←追記
border-top:10px #000000 solid;
/*border-left:1px solid #333333;
border-right:1px solid #333333;*/
background:/* url(../img/container.gif) */ #ffffff;
}
テーマによって、body の項目にも「text-align:center;」を追記してください。
お客さんの環境によっては中央寄せにならない場合があります。
また、ショッピングカートのみ中央寄せにならない場合もあります。
11 / 19
各コンテンツの見出しの文字を中央寄せ、文字色変更、背景色変更をする
■変更する記述
ベーシックテンプレートのみが対象です。
カスタムテンプレートの見出しは、コンテンツごとに異なるクラスが割り
当てられています。前章の「編集箇所の特定方法」を参考に、編集したい
箇所のクラスを特定のうえ、変更してください。
変更できる対象の箇所
テーマ名「カラー・ホワイト」を使った例です。他のテーマでは異なります。
編集前
それぞれの記述の上の囲みは、対象となる見出しです。
カテゴリの見出し ／ おすすめ商品 ／ ショップからのお知らせ ／ サイドバー
用フリーエリア ／ QR コード ／ フリーページ ／ メルマガ登録 ／ ショッピン
グカート ／ マイページログイン ／ ご利用案内 ／ お問い合せ ／ お客様
の声 ／ サイトマップ ／ お店案内 ／ カレンダー ／ 特定商取引法の表示
／ 個人情報の取り扱いについて ／ 商品一覧ページ ／ 商品詳細ページ
.title1{ /* タイトル 2 h1 */
padding:15px 0px 12px 8px;
margin:0px;
width:auto;
line-height:100%;
font-weight:bold;
font-size:12px;
vertical-align:middle;
letter-spacing:0.2em;
color:#000000;
background-color:#D6D6D6;
}
新着商品 ／ センター用フリーエリア ／ 店長紹介 ／ リンク集 ／ リンク設
定の背景
.title2{ /* タイトル 2 h1 */
padding:15px 0px 12px 8px;
margin:0px;
width:auto;
line-height:100%;
font-weight:bold;
font-size:12px;
vertical-align:middle;
letter-spacing:0.2em;
color:#000000;
background-color:#D6D6D6;
}
人気ランキング
.title3{ /* タイトル 2 h1 */
padding:15px 0px 12px 8px;
margin:0px;
width:auto;
color:#FF286F;
line-height:100%;
font-weight:bold;
font-size:12px;
vertical-align:middle;
letter-spacing:0.2em;
color:#000000;
background-color:#D6D6D6;
}
12 / 19
編集後
3 か所とも記述は同じです。
.title1{ /* タイトル 2 h1 */
padding:15px 0px 12px 8px;
margin:0px;
width:auto;
line-height:100%;
font-weight:bold;
font-size:12px;
vertical-align:middle;
letter-spacing:0.2em;
color:#000000;
background-color:#D6D6D6;
text-align:center;
背景は色を変えるだけでなく、画像を指定することもできます。
記述方法については、本マニュアル内の項目「お店の背景色・背景画像
を変更する」の最後、「背景に画像を指定するには」をご覧ください。
13 / 19
ヘッダーの高さを調整する
ヘッダーの高さと背景画像の高さがあっていないため、すき間が空いてしまう時の対処方法です。
ヘッダーの高さを調整して空白を無くします。
■高さを調整する記述
ベーシックテンプレートのみが対象です。
また、テーマによって html の構成が異なるため、ここでご案内する項目
とは違う項目を編集する必要がある場合があります。
カスタムテンプレートは登録したお店のロゴ画像や背景画像によって自
動的に可変します。
テーマ名「グレー」を使った例です。他のテーマでは異なります。
編集前
/* ヘッダー */
#header{
width:100%;
height:85px;
padding-bottom:2px;
background:url(<EBHfBgurl>) <EBHfBgurlp> no-repeat;
}
td>#header { /* IE7 Safari Firefox 用 */
height:auto;
min-height:85px;
}
～～～～～ 省略 ～～～～～～～～～～
.shoplogo{ /* サイトロゴブロック（設定の場合） */
padding:15px 5px 5px 0px;
margin:0px;
width:100%;
}
編集後
/* ヘッダー */
#header{
width:100%;
height:70px;
padding-bottom:2px;
background:url(<EBHfBgurl>) <EBHfBgurlp> no-repeat;
}
td>#header { /* IE7 Safari Firefox 用 */
height:auto;
min-height:70px;
}
～～～～～ 省略 ～～～～～～～～～～
.shoplogo{ /* サイトロゴブロック（設定の場合） */
padding:0px 5px 0px 0px;
margin:0px;
width:100%;
}
背景画像の高さはあらかじめ控えておき、その数値を入力します。
14 / 19
ヘッダーメニュー、フッターメニューを削除する
ヘッダーのグローバルメニューとフッターメニューを削除する方法です。
いくつかやり方がありますが、ここでご案内する方法は厳密にはグローバルメニューとフッターメニューを非表示にしています。
■メニューを削除する記述
【カスタムテンプレート】
テーマ名「E-ホワイト」を使った例です。
編集前
#gnav div.cart-nav,
#gnav nav {
width: 960px;
margin: 0 auto;
border-top: 1px dotted #111;
border-bottom: 1px dotted #111;
overflow: hidden;
*zoom: 1;
}
～～～～～ 省略 ～～～～～～～～～～
#footer-inner {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
編集後
#gnav div.cart-nav,
#gnav nav {
width: 960px;
margin: 0 auto;
border-top: 1px dotted #111;
border-bottom: 1px dotted #111;
overflow: hidden;
display:none;
←追記
*zoom: 1;
}
～～～～～ 省略 ～～～～～～～～～～
#footer-inner {
width: 960px;
margin: 0 auto;
overflow: hidden;
display:none;
←追記
}
15 / 19
【ベーシックテンプレート】
テーマ名「グレー」を使った例です。
編集前
.headnavi { /* ヘッダーメニューテキスト */
padding:5px 5px 5px 1px;
/*color:#C8C8C8;*/
font-weight:normal;
text-align:right;
background-color:#414141;
background-image:url(../img/headnavi_bg.gif);
color:#FFFFFF;
}
～～～～～ 省略 ～～～～～～～～～～
.footnavi { /*フッターメニューテキスト設定*/
padding:15px 20px 5px 20px;
color:#414141;
}
編集後
.headnavi { /* ヘッダーメニューテキスト */
padding:5px 5px 5px 1px;
/*color:#C8C8C8;*/
font-weight:normal;
text-align:right;
background-color:#414141;
background-image:url(../img/headnavi_bg.gif);
color:#FFFFFF;
display:none;
←追記
}
～～～～～ 省略 ～～～～～～～～～～
.footnavi { /*フッターメニューテキスト設定*/
padding:15px 20px 5px 20px;
color:#414141;
display:none;
←追記
}
16 / 19
商品価格の大きさや色を変更する
商品ページの商品価格の大きさと色を変更します。
■価格の大きさと色を変更する記述
カスタムテンプレートのみが対象です。
ベーシックテンプレートは管理画面のメニューから変更できますので、そ
ちらをご利用ください。
デザイン設定 ＞ 商品詳細ページ ＞ 価格のデザイン
テーマ名「E-ホワイト」を使った例です。
編集前
section#itemDetail-wrap table.price td {font-size: 80%;}
table.price tr.fx_price span.strike span.fixed_price,
table.price span.strike {text-decoration: line-through;}
table.price tr.price span.selling_price,
table.price tr.price span.taxin,
table.price tr.price span.discount_rate,
table.price tr.sp_price span.special_price,
table.price tr.sp_price span.taxin,
table.price tr.sp_price span.discount_rate {
color: #FF0000;
font-size: 120%;
font-weight: bold;
margin-bottom: 3px;
}
編集後
section#itemDetail-wrap table.price td {font-size: 80%;}
table.price tr.fx_price span.strike span.fixed_price,
table.price span.strike {text-decoration: line-through;}
table.price tr.price span.selling_price,
table.price tr.price span.taxin,
table.price tr.price span.discount_rate,
table.price tr.sp_price span.special_price,
table.price tr.sp_price span.taxin,
table.price tr.sp_price span.discount_rate {
color: #00E600;
font-size: 200%;
font-weight: bold;
margin-bottom: 3px;
}
17 / 19
テーマのインポートで全体的に編集する
高度なスタイルシートの知識を持っている方向けに、インポート機能を用意しています。
テキストエディタなどで編集したスタイルシートと、必要なすべての画像をまとめてインポートします。
・インポートで変更できるのはスタイルシートのみで、ＨＴＭＬは変更できません。
ＨＴＭＬは、インポートしたテーマを反映させる直前まで利用していたテーマのものが利用されます。
・本ページでご案内している範囲のみのサポートとなりますので、ご了承ください。
事前の準備
■インポートするファイルを作成します
作成したスタイルシートと、使用する画像をひとつのフォルダにまとめ、
ZIP 形式で圧縮して作成します。
・スタイルシートのファイル名は「default.css」としてください。
・圧縮するフォルダ名は半角英数字にしてください。
・自分で用意した画像を使用する場合は、以下を参考にスタイルシートを
記述してください。「○○○.gif」の部分だけをファイル名に変更します。
「<EBBlogThemeImgBase>」はそのままにして変更しません。
background: url(<EBBlogThemeImgBase>/○○○.gif);
・複数の画像を使用する場合でも、画像だけを１つのフォルダに集めず、
スタイルシートと画像をまとめて１つのフォルダに入れて、そのまま圧縮
してください。
・圧縮フォルダのアップロードは 2M が限度です。
・インポートしたテーマを適用後、お店ページで画像が×印になっている
場合、圧縮フォルダに必要な画像が含まれていなかった可能性があり
ますので、ご確認ください。
18 / 19
テーマをインポートする
■インポートするファイルを登録します
① インポートするテーマの名前を入力します。
登録したテーマを自分が識別するためのものなので、
どんな名前でも構いません。
② 「参照」ボタンをクリックし、インポートするＺＩＰファイルを選択します。
③ 「登録」ボタンをクリックします。
下のインポートテーマの一覧表に、入力したテーマの名前が表示され
ます。
■インポートしたテーマを設定します
① インポートしたテーマ名の左側にある、ラジオボタンにチェックを入れ
ます。
② プルダウンから「標準」か「右サイドバー」なしを選びます。
右サイドバーを表示できるのはトップページのみです。
また、カスタムテンプレートは右サイドバーがないため、カスタムテン
プレートがベースになっていると、プルダウンは選択できません。
③ 「テーマを設定する」をクリックします。
■お店ページを更新します
① 画面右上の「お店ページを更新する」をクリックします。
② 画面下部の「注意事項に同意する」にチェックします。
③ 「編集中のテーマでお店ページを更新する」ボタンをクリックします。
画面上部の「利用中のテーマでお店ページを更新する」ボタンとお間
違えないようにお気をつけください。
以上で、お店ページに反映されるので、確認します。
19 / 19
© Copyright 2024 ExpyDoc
