レンタルショッピングカートマニュアル～デザイン設定編～

レンタルショッピングカートマニュアル～デザイン設定編～

ファイル管理ツール

「デザイン設定」 >> 「ファイル管理」でカートにアップロードされているファイルを管理できます。

2

この画面ではファイルの確認 /移動 /削除が可能です。※ ファイルのアップロードはできません。

ファイル管理 – ファイルのアップロード / ダウンロード

「デザイン設定」 >> 「ファイル管理」では画像や CSS などのファイルを一括でアップロードができます。本機能を利用する場合はまず現在のデータをテンプレート設定よりダウンロードし、それを修正したものをアップロードすることをオススメ

します。

3

※ ファイル管理の画面以外から設定した画像が保存されています※ファイル名に制限があります。

トップフォルダ（名前は任

意） _template css

サイトデザイン用画像

images

システム用画像（商品画像 /ボタン画像 /アイコン画像 /etc.. ）

images

Zip 圧縮

Zip 解凍

xcart_auto.css

「簡単 CSS 設定」で生成されたスタイルシート

userVer3.2 以前のファイル保存先

eccart.conf

ブロック設定、簡単 CSS 設定、商品一覧 /詳細テンプレートの設定情報（※編集不可）

スタイルシート（ CSS ）

template.html

templateMobile.html

「レイアウト設定（ PC ）」のレイアウト設定情報

「レイアウト設定（携帯）」のレイアウト設定情報

アッ

プロ

ード

ダウ

ンロ

ード

(1) テンプレート設定より現在のデータをダウンロード

(2) zip ファイルを解凍

(3) 解凍されたデータに追加したい画像を加える。 ※ images フォルダ以外はどこに画像をおいても OK 。

(4) zip ファイルに圧縮

(5) (4) の zip ファイルをファイル管理よりアップロード

基本手順

商品詳細ページの URL 確認方法

商品詳細ページのリンクを独自で設定する場合や、リンク先として紹介する場合は、商品コードを使った固定の URL を使用します。

商品コードを使った固定の URL の確認は商品管理 >> 商品管理・検索画面で行います。

4

１

2

3

4

　　商品の検索条件を入力

　　「検索」ボタンをクリック

　　該当の商品のチェックボックスにチェックを入れる

　　「商品詳細ページ URL の確認」を選択

　　商品詳細ページの固定 URL が表示される

商品詳細の紹介用 URL の確認

3

4

5

１

2

ブラウザ上で表示される「 http:// カート URL/item_detail/itemId,●/ 」というURL については、商品の並び替えなどを行うと「●」の部分が変更されますので、紹介用のリンク先 URL としては使用しないでください。

check ！

5

サイト部品設定

ショップページに利用される、ボタン / アイコン / ガイダンス / 画像未登録商品の画像を設定します。

5

サイト部品設定で設定した情報はカートサーバー上の「 images 」フォルダに保存されます。

※ ファイル管理の画面以外から設定した画像が保存されています※ファイル名に制限があります。


意）

_template css

images

システム用画像（商品画像 /ボタン画像 /アイコン画像 /etc.. ）

images

CSS 設定 - 簡単 CSS 設定

「 CSS 設定」 >> 「簡単 CSS 設定」ではスタイルシートの知識が無くても簡単に文字や背景色の変更ができます。

6

簡単 CSS 設定で設定した情報はカートサーバー上に下記データとして保存されます。


意）

xcart_auto.css

css.ini

「簡単 CSS 設定」で生成されたスタイルシート

「簡単 CSS 設定」の設定情報（※編集不可）

下記 CSS は </head> タグ直前に自動挿入されます。

CSS 設定 - 高度な CSS の編集

細かな部分までデザインを修正したい場合は「 CSS 設定」 >> 「上級 CSS 設定」でスタイルシートを直接編集できます。

xc_auto.css 手動編集不可。簡単設定によって自動生成される CSS です。

xc_auto_block.css 手動編集不可。コンテンツ設定の商品一覧、及び、商品詳細でデザインパターンを選択した際に自動生成される CSS です。

xc_blank.css 手動編集可。商品一覧、商品詳細のレイアウトを微調整したい場合にご利用ください。

7

新規作成した CSS は「レイアウト設定」画面にて HTML ヘッダにて呼び出されるように設定して下さい。新規作成した CSS は /_template/css/custom●.css というファイル名で保存されます。

トップフォルダ

_template css common.css

common_ie6.css

textStyle.css

<link href=“//xs***.eccart.jp/****/_template/css/*****.css" rel="stylesheet" type="text/css" />

【タグの例】 - *** は必要に応じて書き換えてください

xc_auto.css

xc_auto_block.css

xc_blank.css

レイアウト設定 - ドラッグ＆ドロップ編集

機能をもったブロックをドラッグ＆ドロップすることで簡単にレイアウト設定ができます。

8

ドラッグ＆ドロップで表示場所変更や表示の ON/OFF切替ができます。

ドラッグ＆ドロップで表示場所変更や表示の ON/OFF切替ができます。

PC/ 携帯のネットショップをドラッグ＆ドロップで簡単にデザイン可能！

PC/ 携帯のネットショップをドラッグ＆ドロップで簡単にデザイン可能！

レイアウト設定 - ソース編集

html 及び CSS に詳しい方は上級者の方は『ソース編集』に切り替えるとさらに自由なレイアウト設定ができます。但し、『ソース編集』した後、『ドラッグ＆ドロップ編集』に切り替えると一部の情報が削除される場合があるため、

『ソース編集』で設定する場合には、『ドラッグ＆ドロップ編集』はしないようにして下さい。

9

システムブロックやカスタムブロックは下記のようなタグを埋め込むことで利用できます。

例）メニューブロック



PC/ 携帯のネットショップをHTML ソース編集で

自由にデザイン可能！

PC/ 携帯のネットショップをHTML ソース編集で

自由にデザイン可能！

ブロックの設定

全てのブロックには　　というボタンがあり、ここから各ブロックをどのページに表示するかなどを切替可能です。

システムブロックによっては下記の『ブロック名』『識別子』『表示するページ』以外の特殊な設定項目が付属します。

10

ブロック名任意の名前を設定して下さい。※最初に設定した名前は変更できません。※システムブロックのブロック名は変更できません。

識別子半角英数字、或いは _ （アンダーバー）で識別子を設定します。※ 入力文字は大文字に自動変換されます。この識別子は「ソース編集」時の特殊タグとして利用されます。

なお、ほとんどのシステムブロックはクラス付きの <div>で構成されており、その場合、識別子と CSS クラスは一致します。

※システムブロックのブ識別子は変更できません。

見出しブロックの見出し（ <h4> タグ）に表示する文字列を設定します。設定がない場合は <h4> タグは表示されません。

表示するページ

各ブロックをどのページに表示するかを切り替えます。



<div class="xc_calendar">・・・</div>

カスタムブロック

カスタムブロックは HTML だけが記述されたブロックで、必要に応じて追加・削除できます。「簡易 HTML 編集にする」にチェックを入れている場合、 WYSIWYG を利用して簡単な HTML 編集ができます。

11

カートサーバー上にアップロードした画像を選択して利用できます。

画像挿入の作業例

システムブロック - メニューブロック

「メニュー」ブロックは各ページへのリンク群を表示するブロックです。機能設定では『表示項目の設定』『表示する文字』と『リンク先』を設定します。

12

表示文字はメニューの項目名とページ見出しに反映されます。

システムブロック – 検索 Box ブロック

「検索 Box 」ブロックは商品検索のための検索窓を表示するブロックです。機能設定にて『表示項目の設定』『表示する文字』を設定できます。

13

表示文字は検索項目の初期表示に利用されます。

システムブロック – カテゴリー一覧

「カテゴリー一覧ブロック」は登録した商品カテゴリを表示するブロックです。様々な表示形式・条件を変更できます。

14

リスト表示と JavaScript 表示を切り替えることができます。

カテゴリー名の文字数が多く、折返しが発生してしまう場合は『カテゴリ名の表示文字数』を調整します。

JavaScript 表示

サブカテゴリ

商品点数

カテゴリ

リスト表示

表示文字数 30 の場合表示文字数 20 の場合

省略時テキスト

システムブロック – カテゴリー一覧（カテゴリ一覧の表示順の変更）

ショップ画面のカテゴリ一覧には、商品管理 >> 商品カテゴリ設定に表示されている順でカテゴリ名が表示されます。ショップ画面上に表示されるカテゴリ名の並び替えは、この画面から行えます。

15

カテゴリの並び替え

　並び替えボタンをクリック

　表示された画面上で移動させたいカテゴリ名を左クリック　しながら移動し、任意の場所で左クリックを離す

　登録するをクリック

1

2

3

1

カテゴリ一覧では、表示順が上部のものほど優先して表示されます。

例）この画面上の設定の場合T シャツ >> パンツの順にショップ画面上に表示されます。

商品一覧や検索結果の商品の表示順序をコンテンツ設定 >> 商品購入ページ >> 商品一覧にて表示順序を「カテゴリ登録順」に設定した場合、この画面のカテゴリー名の左隣に記載されているカテゴリ ID に準じてショップ画面上に商品が表示されます。

check ！

システムブロック – カレンダー

「営業日カレンダー」は営業休日を表示するブロックです。カレンダーを 1ヶ月分表示するか 2 か月分表示するかを切り替えられます。

16

チェックを入れた場合は 2 ヶ月分のカレンダーが表示されます。

システムブロック – 売れ筋ランキング

* 　で様々な売れ筋ランキング表示に関する設定をします。

17

システムブロック – カートの中身

* 　　で様々なカートの中身表示に関する設定をします。

18

「カートの中身」ブロックを利用すると、カートに入れた商品を確認することができます。

※ 「カートをみる」ブロックと似ていますが、「カートをみる」は単なるボタンです。

カートの中身ブロック

iモード対応 xhtml の利用

Docomo の iモードで xhtml を利用することができます。 DoCoMoケータイで xhtml+xml を利用するためには「デザイン設定」 >> 「レイアウト設定」 >> 「携帯用レイアウト」

にて「ヘッダの編集」から下記の <meta> タグを追加する必要があります。

i モード XHTML について

http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/

19

<meta http-equiv="Content-type" content="application/xhtml+xml; charset=Shift_JIS" />

下記タグを <head> の直後に挿入します。

【付録】便利なプラグインの紹介 - 「 Firebug 」 (1)

Firefox のプラグイン「 Firebug 」を利用すると HTML や CSS を簡単に確認することができます。オリジナルデザインを適用する場合に非常に便利な機能なので是非ご活用ください！

Firebug （日本語版）サイト

https://addons.mozilla.org/ja/firefox/addon/5165

20

Firefox で左記の URL にアクセスし、をクリックすると簡単にインストールできます。

※ Firefox 本体は下記から入手しましょう。 http://www.mozilla-japan.org/products/firefox/


【付録】便利なプラグインの紹介 - 「 Firebug 」 (2)

インストールした Firebugs は [F12] で起動できます。下記は「メニュー」の部分の調査方法の例ですが、同じ操作でイロイロな箇所の確認ができます。

21

「メニュー」部分を確認

① 【調査】をクリックします。　　　　

② Class を確認したい部分　　　　

　　（メニュー）をクリックします。　

③ 「 HTML 」部分で色が変わった

部分を確認します。

④「スタイルシート」の中で対象

　　の class の部分を確認します。

確認手順

①

②

<div class="xc_gNavi">

③ .xc_gNavi {common.css (283 行目 )

background-color:#CFB875;

border-bottom:1px solid #777777;

border-right:1px solid #777777;

line-height:100%;

margin:0px;

padding:5px 10px;

}

④

【付録】便利なプラグインの紹介 - 「 Web Developper 」 (1)

Firefox のプラグイン「 Web Developper 」を利用するとページのクラスや CSS を簡単に確認することができます。オリジナルデザインを適用する場合に非常に便利な機能なので是非ご活用ください！

Firebug （日本語版）サイト


22

Firefox で左記の URL にアクセスし、をクリックすると簡単にインストールできます。

※ Firefox 本体は下記から入手しましょう。 http://www.mozilla-japan.org/products/firefox/


【付録】便利なプラグインの紹介 - 「 Web Developer 」 (2)

インストール後 Firefox に Web Developer ツールバーが追加されます。

ページ内で利用されている全ての CSS を一覧表示したい場合や、どのような id 、及び class が設定されているかを確認したい場合などにご利用ください。

23

「情報」 >> 「 id属性と class属性を表示する」をクリックするとクラス名、及び ID 名が表示されます。

「 CSS 」 >> 「 CSS を表示する」をクリックすると利用されている CSS を一覧表示できます。

Documents

レンタルショッピングカートマニュアル ～ デザイン設定 編 ～

レンタルショッピングカートマニュアル～デザイン設定編～