" title="ページを印刷する"> ページを印刷する
  • HTMLタグとスタイルシート
  • 無料素材集
スタイルシートについて
ここでは、スタイルシートを編集してお店ページをカスタマイズする方法をご説明します。

部分的な編集方法とインポートの方法

クラスの適用箇所について
▼事前準備
自作のHTMLを利用するには「HTMLソースを確認するテキストエディタ」が必要です。 ショップサーブでは文字コード「EUC-JP」を採用しているため、「EUC-JP」に対応した 「テキストエディタ」をインストールしておくことをおすすめします。

　　⇒vectorで「秀丸」をダウンロード（有料）
　　⇒vectorで「TeraPad」をダウンロード（無料）

※インターネットブラウザの「FireFox」を使用し、HTMLタグを表示させることもできます。

　　⇒FireFoxをダウンロード（無料）

部分的な編集方法とインポートの方法

　管理画面で部分的に編集を行う
デザイン設定＞テーマのカスタマイズへ進みます。
「利用中のテーマから作成」ボタンを押します。

スタイルシートが表示されるので、適宜に編集します。

各種ボタンをクリックします。
プレビュー・・・ 編集したスタイルシートが希望通りに適用されるか確認します。
（画像やコンテンツはサンプルのもので表示されます）
保存・・・ 編集した内容を保存します。お店ページへは適用されません。
保存して適用・・・ 編集内容を保存し、お店ページに適用します。
編集前のスタイルシートが自動で保存されます。
再度編集したい場合は場合は、右側の「編集」ボタンを押します。

適用したスタイルシートをお店ページに反映させるには、「お店ページを更新する」ボタンを押します。このボタンをおさなければ、反映はされません。
編集したスタイルシートは自動で保存（バックアップ）されますが、「新規テーマ5」まで保存されている状態では、「利用中のテーマから作成」ボタンを押す手順での編集が行えません。
この場合は、不要な「新規テーマ1～5」のいずれかの「削除」ボタンを押して削除してから、作業を行ってください。

※「新規テーマ1」が最も古いバックアップです。

「編集」ボタンを押して編集したスタイルシートは、上書きされますので、編集前のものが自動で保存されません。（バックアップがない状態となる）
ご自身で、テキストエディタ（メモ帳）などにバックアップをお取りのうえ、作業を行ってください。
>> 希望が多い箇所の編集例
　インポート機能で本格的にカスタマイズを行う
スタイルシートの知識が高い方向けに、インポート機能をご用意しております。
テキストエディタなどで編集したスタイルシートと、必要な全ての画像をまとめて
インポートします。
※本ページでご案内している範囲でのみのサポートとなりますので、ご了承ください。
▼事前準備
作成したスタイルシートと、使用する画像をひとつのフォルダにまとめ、ZIP形式で圧縮しておきます。
圧縮・解凍ソフトの入手はこちら >>
・スタイルシートのファイル名は【default.css】としてください。
・圧縮するフォルダ名は半角英数字にしてください。
・自作の画像を使用する場合は、以下を参考にスタイルシートを記述してください。

・複数の画像を使用する場合でも、画像だけをひとつのフォルダに集めるのではなく、
　スタイルシートと画像をまとめてひとつのフォルダに入れて、
　そのまま圧縮してください。

・圧縮フォルダのアップロードは2Mが限度となっております。

・インポートしたテーマを適用後、お店ページで画像が×印になっている場合、
　圧縮フォルダに必要な画像が含まれていなかった可能性がありますので、ご確認ください。

デザイン設定＞テーマのインポート　へ進みます。

インポートして適用させるテーマの名前を決めます。

ZIP形式で圧縮したデータを指定します。

「登録」ボタンを押します。

登録したテーマを選択します。

お店ページを右サイドバーありの3列にするか、右サイドバーなしの2列にするかを決めます。※3列表示になるのはトップページのみです。

テーマを設定します。※この作業ではお店ページに反映されません。

設定したテーマをお店ページに反映させるには、「お店ページを更新する」ボタン
を押します。このボタンを押さなければ、反映はされません。

クラスの適用箇所について

スタイルシートを編集してカスタマイズを行うには、カスタマイズを行いたい箇所にスタイルシートの、どのクラスが適用されているかを調べる必要があります。
ここでは、ページのHTMLソースから適用クラスを調べる方法をご説明します。
　>> ページトップの事前準備を行ってください。
　① お店ページを開き、ページのHTMLを表示させます。
管理画面上部の「お店ページをみる」ボタンをクリック




ブラウザの「表示」⇒「ソース」をクリックする

FireFox でのイメージ


お使いのテキストエディタでHTMLソースが開きます。※下記は「秀丸」での表示例

FireFox ではブラウザで表示可能なため、テキストエディタの事前準備が不要です。

　② HTMLソースから、カスタマイズしたい箇所の記述を探します。
お店の名前とキャッチコピーをカスタマイズしたい場合の例


下記の記述から、クラス（class）を読み取ります。

<h1 class="siteName" ><a href="/">ヴィラック木製おもちゃのサンプルショップ</a></h1>
<h2 class="sitecopy"><a href="/">フランス製・Vilac（ヴィラック）のおもちゃ専門店</a></h2>

 　・お店の名前　　　⇒　siteName
　・キャッチコピー　⇒　sitecopy

これで、適用されているクラスが分かりました。
　③ 管理画面のスタイルシート編集箇所で、該当クラスの編集を行います。
デザイン設定＞テーマのカスタマイズへ進み「利用中のテーマから作成」ボタンを押します。


適用中のスタイルシートが表示されますので、該当クラスを探します。

適宜に編集を行い、編集後「保存して適用」ボタンを押します。 適用させずに編集を中断する場合は「保存」ボタンを押します。

適用したスタイルシートをお店ページに反映するには「お店ページを更新する」ボタンを押します。

Eストアー公認の制作会社が提供する、
制作代行サービスをご用意しております。
>> 希望が多い箇所の編集例