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

○ 部分的に編集する
- 部分的な編集方法
- 編集箇所の特定方法
○ 希望が多い部分的の編集例

お店の名前・キャッチコピーの大きさを変更する
お店の名前・キャッチコピーの色を変更する
お店の背景色・背景画像を変更する
お店の全体を中央寄せにする
各コンテンツの見出しの文字を中央寄せ、文字色変更、背景画像を変更する
ヘッダーの高さを調整する
ヘッダーメニュー、フッターメニューを削除する
商品価格の大きさや色を変更する

○ テーマのインポートで全体的に編集する

事前の準備
テーマをインポートする

ＨＴＭＬやＣＳＳの記述方法については、ストアーデスクでサポートいたしかねます。

こちらでご案内しているスタイルシートの内容以外については、貴社でお調べください。
貴社で制作が難しい場合は、Ｅストアー制作代行をご用意しておりますので、ストアーデスクまでご相談ください。

部分的に編集する

部分的な編集方法

■編集画面を開きます

「利用中の（編集中がある場合はその）テーマから作成」ボタンをクリックします。ボタンの下部に編集画面が開きます。

保存してあるカスタムテーマを「編集」ボタンからを開いて編集すると、上書きされてしまいます。
バックアップはありませんので、編集前にメモ帳などのテキストエディタにバックアップを取ったうえで作業を行ってください。

保存できるカスタムテーマの最大数５に達していると、「利用中の（編集中がある場合はその）テーマから作成」ボタンを押しても編集画面は現れません。いずれか不要なテーマを削除してから作業してください。

■スタイルシートを編集します

適宜、必要箇所の記述を変更します。
「保存して適用」もしくは「保存」ボタンをクリックします。
「保存」ボタンで保存した場合は、後ほど別途「適用」ボタンを押す必要があります。

■お店ページを更新します

管理画面の左上「お店ページの更新へ」ボタンをクリックします。
「注意事項に同意する」にチェックを入れます。
「編集中のテーマでお店を更新」ボタンをクリックします。
サイト更新が完了するまでお待ちください。
更新が完了したら、お店ページを確認してみましょう。

ベーシックテンプレートをご利用の場合は「更新を開始」ボタンをクリックします。

カスタムテンプレートをご利用の場合、デザイン設定の左メニュー「テーマの選択」から「ヘッダとＳＥＯの設定」までは、画面下部の「編集中のテーマでお店を更新」ボタンで、お店ページに反映します。

編集中のテーマでお店を更新
テンプレートの切り替えや、ＨＴＭＬやＣＳＳのカスタマイズしたデザイン設定をお店ページに反映する時に利用します。「利用中のテーマ」から「編集中のテーマ」に切り替えて更新するため、注意事項に同意してから更新する必要があります。

利用中のテーマでお店を更新
トップページのお知らせの更新、フリーエリア、サイドバーの表示、商品カテゴリ表示などの反映ができます。また、お店運営中にカスタマイズしている「編集中のテーマ」があっても「利用中のテーマ」のまま、お店ページの更新をする際に利用します。

お店ページを更新しても反映されない場合の対処方法

キーボードの「Ctrl」＋「F5」キーを押して最新の状態を読み込みましょう。

画面上部の「利用中のテーマでお店を更新」ボタンでクリックしていないか、ボタンの下に表示される「最終更新日時」で確認してみましょう。

編集箇所の特定方法

スタイルシートを編集してカスタマイズするには、カスタマイズしたい箇所にスタイルシートのどのクラスが適用されているかを調べる必要があります。
ここでは、ページの HTML ソースから適用クラスを調べる方法をご案内します。

■お店ページを開きます

自分のお店ページをブラウザで開きます。

■開発者ツールを開きます

お店ページ上で右クリックし、メニューから開きます
ブラウザによってメニュー名は異なりますが、同様の機能があります。
右の画面は GoogleChrome のものです。

    GoogleChrome →「検証」
    FireFox →「要素を調査」
    InternetExplorer →「要素の検査」

画面下部に開発者ツールが開きます。

■要素の選択ボタンをクリックします

開発者ツールのメニュー左端「要素の選択」ボタンをクリックします。
ブラウザによって、若干のデザインの違いはありますが、
ほとんど同じデザイン、同じ位置にあります。

■変更したい箇所をクリックします

「要素の選択」ボタンをクリックした後、お店ページの上でマウスを動かすと、マウスが乗っている箇所の色が反転するので、変更したい箇所を選び、クリックします。

ここでは例として、トップページのセンターエリアに表示している、新着商品コーナーの見出しのスタイルを変更することにします。

■クラス名を確認します

画面右下に、選択した箇所のクラス名が表示されるので、
それを確認します。

これで、トップページセンターエリアに表示している、新着商品コーナーの見出しのクラスは、以下の通りとわかりました。

section .newItem h2, section .pickup h2, section .ranking h2,
section .group h2, section .category h2

右下に表示されたクラス名はクリックできるので、コピーしておくと便利です。

■該当するクラスを編集します

管理画面で該当するクラス名を探し、内容を変更します。
コピーしておいたクラス名で、ブラウザのページ内を検索すると簡単
に探せます。
「保存して適用」もしくは「保存」ボタンをクリックします。
続けて、お店ページを更新します。
「編集中のテーマでお店を更新」の方のボタンをご利用ください。

希望が多い部分的の編集例

オレンジの文字が修正する箇所です。
青文字の箇所が修正、もしくは追記した内容です。それぞれの値は希望に応じて変更してください。

お店の名前・キャッチコピーの大きさを変更する

■大きさを変更する記述

ベーシックテンプレートのみが対象です。
カスタムテンプレートはお店の名前、キャッチコピーをページ内に標準では表示していないため。

編集前

.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;}

お店の名前・キャッチコピーの色を変更する

■色を変更する記述

ベーシックテンプレートのみが対象です。
カスタムテンプレートはお店の名前、キャッチコピーをページ内に標準では表示していないため。

編集前

編集後

.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;
}

.siteName a { color:#BA7C1F;text-decoration:none;}
.sitecopy a:hover {color:#282828;text-decoration:underline;}

色は#と６桁の数字で表現する「カラーコード」で指定します。
検索エンジンで「カラーコード」と検索すると、カラーコードの一覧表を掲載したサイトが多数見つかるので、ご活用ください。

マウスを当てた時の色も変えたければ、
「.siteName a:hover」や「.sitecopy a:hover」のカラーコードも合わせて変更します。

お店の背景色・背景画像を変更する

■色を変更する記述

【カスタムテンプレート】

テーマ名「E-ホワイト」を使った例です。他のテーマでは異なります。

編集前

#wrapper {
               width: 100%;
               min-width: 960px;
               background-color: #FFF
               min-height: 100%;
}
～～～～～省略～～～～～～～～～～
header #header-inner{
               
               background:url() 
               no-repeat;
               
}
～～～～～省略～～～～～～～～～～
#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{
               
               background:url() 
               no-repeat;
               background-color:#ffffff; ←追記
               
}
～～～～～省略～～～～～～～～～～
#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 {
               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;*/
}

編集後

色は#と６桁の数字で表現する「カラーコード」で指定します。
検索エンジンで「カラーコード」と検索すると、カラーコードの一覧表を掲載したサイトが多数見つかるので、ご活用ください。

カスタムテンプレート

■背景に画像を指定するには

初期値で記述されている、以下のいずれかの記述を変更します。テーマによって異なります。

   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/ファイル名

お店の全体を中央寄せにする

■中央寄せにする記述

ベーシックテンプレートのみが対象です。
カスタムテンプレートはあらかじめ中央寄せです。
また、ベーシックテンプレートにもあらかじめ中央寄せのものが一部にあります。

編集前

/* 大枠テーブル（固定） */
#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;」を追記してください。

お客さんの環境によっては中央寄せにならない場合があります。
また、ショッピングカートのみ中央寄せにならない場合もあります。

各コンテンツの見出しの文字を中央寄せ、文字色変更、背景色変更をする

■変更する記述

ベーシックテンプレートのみが対象です。
カスタムテンプレートの見出しは、コンテンツごとに異なるクラスが割り当てられています。前章の「編集箇所の特定方法」を参考に、編集したい箇所のクラスを特定のうえ、変更してください。

テーマ名「カラー・ホワイト」を使った例です。他のテーマでは異なります。

編集前

それぞれの記述の上の囲みは、対象となる見出しです。

カテゴリの見出し／おすすめ商品／ショップからのお知らせ／サイドバー
用フリーエリア／ 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;
}

ヘッダーの高さを調整する

ヘッダーの高さと背景画像の高さがあっていないため、すき間が空いてしまう時の対処方法です。
ヘッダーの高さを調整して空白を無くします。

■高さを調整する記述

ベーシックテンプレートのみが対象です。
また、テーマによって html の構成が異なるため、ここでご案内する項目とは違う項目を編集する必要がある場合があります。
カスタムテンプレートは登録したお店のロゴ画像や背景画像によって自動的に可変します。

テーマ名「グレー」を使った例です。他のテーマでは異なります。

編集前

/* ヘッダー */
#header{
               width:100%;
               height:85px;
               padding-bottom:2px;
               background:url() 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() no-repeat
}

td>#header { /* IE7 Safari Firefox 用 */
               height:auto;
               min-height:70px;
}
～～～～～省略～～～～～～～～～～
.shoplogo{ /* サイトロゴブロック（設定の場合） */
               padding:0px 5px 0px 0px;
               margin:0px;
               width:100%;
}

背景画像の高さはあらかじめ控えておき、その数値を入力します。

ヘッダーメニュー、フッターメニューを削除する

ヘッダーのグローバルメニューとフッターメニューを削除する方法です。
いくつかやり方がありますが、ここでご案内する方法は厳密にはグローバルメニューとフッターメニューを非表示にしています。

■メニューを削除する記述

【カスタムテンプレート】

テーマ名「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; ←追記
  }

【ベーシックテンプレート】

テーマ名「グレー」を使った例です。

編集前

.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; ←追記
}

商品価格の大きさや色を変更する

商品ページの商品価格の大きさと色を変更します。

■価格の大きさと色を変更する記述

カスタムテンプレートのみが対象です。
ベーシックテンプレートは管理画面から変更できますので、そちらをご利用ください。

管理画面メニュー「デザイン設定＞商品一覧・詳細ページ＞商品詳細ページ＞価格のデザイン」

テーマ名「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;
  }

テーマのインポートで全体的に編集する

高度なスタイルシートの知識を持っている方向けに、インポート機能を用意しています。
テキストエディタなどで編集したスタイルシートと、必要なすべての画像をまとめてインポートします。

・インポートで変更できるのはスタイルシートのみで、ＨＴＭＬは変更できません。
ＨＴＭＬは、インポートしたテーマを反映させる直前まで利用していたテーマのものが利用されます。

・本ページでご案内している範囲のみのサポートとなりますので、ご了承ください。

事前の準備

■インポートするファイルを作成します

作成したスタイルシートと、使用する画像をひとつのフォルダにまとめ、ZIP 形式で圧縮して作成します。

スタイルシートのファイル名は「default.css」としてください。
カート専用テーマを利用している場合は「cart.css」も用意してください。
圧縮するフォルダ名は半角英数字にしてください。
自分で用意した画像を使用する場合は、以下を参考にスタイルシートを記述してください。「○○○.gif」の部分だけをファイル名に変更します。
「<EBBlogThemeImgBase>」はそのままにして変更しません。

background: url(<EBBlogThemeImgBase>/○○○.gif);
複数の画像を使用する場合でも、画像だけを１つのフォルダに集めず、スタイルシートと画像をまとめて１つのフォルダに入れて、そのまま圧縮してください。
圧縮フォルダのアップロードは 2M が限度です。
インポートしたテーマを適用後、お店ページで画像が×印になっている場合、圧縮フォルダに必要な画像が含まれていなかった可能性がありますので、ご確認ください。

テーマをインポートする

■インポートするファイルを登録します

インポートするテーマの名前を入力します。
登録したテーマを自分が識別するためのものなので、どんな名前でも構いません。
「ファイルを選択」ボタンをクリックし、インポートするＺＩＰファイルを選択します。
「登録」ボタンをクリックします。
下のインポートテーマの一覧表に、入力したテーマの名前が表示されます。

■インポートしたテーマを設定します

インポートしたテーマ名の左側にある、ラジオボタンにチェックを入れます。
プルダウンから「標準」か「右サイドバー」なしを選びます。
右サイドバーを表示できるのはトップページのみです。
また、カスタムテンプレートは右サイドバーがないため、カスタムテンプレートがベースになっていると、プルダウンは選択できません。
「テーマを設定する」をクリックします。

■お店ページを更新します

画面右上の「お店ページの更新へ」をクリックします。
画面下部の「注意事項に同意する」にチェックします。
「編集中のテーマでお店を更新」ボタンをクリックします。
画面上部の「利用中のテーマでお店を更新」ボタンとお間違えないようにお気をつけください。
以上で、お店ページに反映されるので、確認します。