レンタルショッピングカート Xcart デザイン設定 編（パワーポイント ver97

Download Report

Transcript レンタルショッピングカート Xcart デザイン設定 編（パワーポイント ver97 

レンタルショッピングカートマニュアル
～ デザイン設定 編 ～
ファイル管理ツール

「デザイン設定」>>「ファイル管理」でカートにアップロードされているファイルを管理できます。
この画面ではファイルの確認/移動/削除が可能です。
※ ファイルのアップロードはできません。
2
ファイル管理 – ファイルのアップロード/ダウンロード
「デザイン設定」>>「ファイル管理」では画像やCSSなどのファイルを一括でアップロードができます。
本機能を利用する場合はまず現在のデータをテンプレート設定よりダウンロードし、それを修正したものをアップロードすることをオススメします。
トップフォルダ
（名前は任意）
基本手順
スタイルシート（CSS）
_template
css
サイトデザイン用画像
images
images
システム用画像
（商品画像/ボタン画像/アイコン画像/etc..）
(1)
テンプレート設定より現在のデータをダウンロード
(2)
zipファイルを解凍
(3)
解凍されたデータに追加したい画像を加える。
※ images フォルダ以外はどこに画像をおいてもOK。
(4)
zipファイルに圧縮
(5)
(4)のzipファイルをファイル管理よりアップロード
※ファイル管理の画面以外から設定した画像が保存されています
※ファイル名に制限があります。
Zip圧縮
アップロード
「レイアウト設定（PC）」のレイアウト設定情報
template.html
「レイアウト設定（携帯）」のレイアウト設定情報
templateMobile.html
ブロック設定、簡単CSS設定、商品一覧/詳細テンプレート
の設定情報（※編集不可）
eccart.conf
ダウンロード


「簡単CSS設定」で生成されたスタイルシート
xcart_auto.css
Ver3.2以前のファイル保存先
user
Zip解凍
3
商品詳細ページのURL確認方法


商品詳細ページのリンクを独自で設定する場合や、リンク先として紹介する場合は、商品コードを使った固定のURLを
使用します。
商品コードを使った固定のURLの確認は 商品管理 >> 商品管理・検索 画面で行います。
商品詳細の紹介用URLの確認
１ 商品の検索条件を入力
2 「検索」ボタンをクリック
3 該当の商品のチェックボックスにチェックを入れる
4 「商品詳細ページURLの確認」を選択
5 商品詳細ページの固定URLが表示される
１
2
check！
3
ブラウザ上で表示される「http://カートURL/item_detail/itemId,●/」という
URLについては、商品の並び替えなどを行うと「●」の部分が変更されますので、
紹介用のリンク先URLとしては使用しないでください。
4
5
4
サイト部品設定

ショップページに利用される、ボタン/アイコン/ガイダンス/画像未登録商品の画像を設定します。
サイト部品設定で設定した情報はカートサーバー上の「images」フォルダに保存されます。
トップフォルダ
（名前は任意）
_template
css
images
images
システム用画像
（商品画像/ボタン画像/アイコン画像/etc..）
※ファイル管理の画面以外から設定した画像が保存されています
※ファイル名に制限があります。
5
CSS設定 - 簡単CSS設定

「CSS設定」>>「簡単CSS設定」ではスタイルシートの知識が無くても簡単に文字や背景色の変更ができます。
簡単CSS設定で設定した情報はカートサーバー上に下記データとして保存さ
れます。
トップフォルダ
（名前は任意）
「簡単CSS設定」の設定情報（※編集不可）
css.ini
「簡単CSS設定」で生成されたスタイルシート
xcart_auto.css
6
CSS設定 - 高度なCSSの編集

細かな部分までデザインを修正したい場合は「CSS設定」>>「上級CSS設定」でスタイルシートを直接編集できます。
_template
トップフォルダ
xc_auto.css
xc_auto_block.css
css
common.css
新規作成したCSSは「レイアウト設定」画面にてHTMLヘッダにて呼び出されるよう
に設定して下さい。新規作成したCSSは /_template/css/custom●.css と
いうファイル名で保存されます。
common_ie6.css
textStyle.css
xc_blank.css
【タグの例】 - *** は必要に応じて書き換えてください
<link href=“//xs***.eccart.jp/****/_template/css/*****.css"
rel="stylesheet" type="text/css" />
下記CSSは</head>タグ直前に自動挿入されます。
xc_auto.css
手動編集不可。簡単設定によって自動生成され
るCSSです。
xc_auto_block.css
手動編集不可。コンテンツ設定の商品一覧、及
び、商品詳細でデザインパターンを選択した際
に自動生成されるCSSです。
xc_blank.css
手動編集可。商品一覧、商品詳細のレイアウト
を微調整したい場合にご利用ください。
7
レイアウト設定 - ドラッグ＆ドロップ編集

機能をもったブロックをドラッグ＆ドロップすることで簡単にレイアウト設定ができます。
ドラッグ＆ドロップで表示場所
変更や表示のON/OFF切替
ができます。
PC/携帯のネットショップを
ドラッグ＆ドロップで
簡単にデザイン可能！
8
レイアウト設定 - ソース編集


html及びCSSに詳しい方は上級者の方は『ソース編集』に切り替えるとさらに自由なレイアウト設定ができます。
但し、『ソース編集』した後、『ドラッグ＆ドロップ編集』に切り替えると一部の情報が削除される場合があるため、『ソース編集』で
設定する場合には、 『ドラッグ＆ドロップ編集』はしないようにして下さい。
PC/携帯のネットショップを
HTMLソース編集で
自由にデザイン可能！
システムブロックやカスタムブロックは下記のようなタグ
を埋め込むことで利用できます。
例） メニューブロック
<!-- XCART_USER_CONTENTS_XC_GNAVI -->
9
ブロックの設定


全てのブロックには
というボタンがあり、ここから各ブロックをどのページに表示するかなどを切替可能です。
システムブロックによっては下記の『ブロック名』『識別子』『表示するページ』以外の特殊な設定項目が付属します。
ブロック名
任意の名前を設定して下さい。
※最初に設定した名前は変更できません。
※システムブロックのブロック名は変更できません。
識別子
半角英数字、或いは _ （アンダーバー）で識別子を設定します。
※ 入力文字は大文字に自動変換されます。
この識別子は「ソース編集」時の特殊タグとして利用されます。
<!-- XCART_USER_CONTENTS_XC_CALENDAR -->
なお、ほとんどのシステムブロックはクラス付きの<div>で構成さ
れており、その場合、識別子とCSSクラスは一致します。
<div class="xc_calendar">
・・・
</div>
※システムブロックのブ識別子は変更できません。
見出し
ブロックの見出し（<h4>タグ）に表示する文字列を設定します。
設定がない場合は<h4>タグは表示されません。
表示するページ 各ブロックをどのページに表示するかを切り替えます。
10
カスタムブロック


カスタムブロックはHTMLだけが記述されたブロックで、必要に応じて追加・削除できます。
「簡易HTML編集にする」にチェックを入れている場合、WYSIWYGを利用して簡単なHTML編集ができます。
画像挿入の作業例
カートサーバー上にアップロードした画像を選択し
て利用できます。
11
システムブロック - メニューブロック


「メニュー」ブロックは各ページへのリンク群を表示するブロックです。
機能設定では『表示項目の設定』『表示する文字』と『リンク先』を設定します。
表示文字はメニューの項目名とページ見出しに反映されます。
12
システムブロック – 検索Boxブロック


「検索Box」ブロックは商品検索のための検索窓を表示するブロックです。
機能設定にて『表示項目の設定』『表示する文字』を設定できます。
表示文字は検索項目の初期表示に利用されます。
13
システムブロック – カテゴリー一覧


「カテゴリー一覧ブロック」は登録した商品カテゴリを表示するブロックです。
様々な表示形式・条件を変更できます。
カテゴリー名の文字数が多く、折返しが発生してしまう場合は『カテゴリ名の表示文字
数』を調整します。
表示文字数30の場合
表示文字数20の場合
省略時テキスト
リスト表示とJavaScript表示を切り替えることができます。
リスト表示
JavaScript表示
カテゴリ
サブカテゴリ
商品点数
14
システムブロック – カテゴリー一覧（カテゴリ一覧の表示順の変更）


ショップ画面のカテゴリ一覧には、 商品管理 >> 商品カテゴリ設定 に表示されている順でカテゴリ名が表示されます。
ショップ画面上に表示されるカテゴリ名の並び替えは、この画面から行えます。
カテゴリの並び替え
1 並び替えボタンをクリック
2 表示された画面上で移動させたいカテゴリ名を左クリック
しながら移動し、任意の場所で左クリックを離す
3 登録するをクリック
カテゴリ一覧では、表示順が上部のものほど優先して表示されます。
1
例）この画面上の設定の場合
Tシャツ >> パンツ の順にショップ画面上に表示されます。
check！
商品一覧や検索結果の商品の表示順序を コンテンツ設定 >> 商品購入ページ >> 商品一覧 にて表示順序を「カテゴリ登録順」
に設定した場合、この画面のカテゴリー名の左隣に記載されているカテゴリIDに準じてショップ画面上に商品が表示されます。
15
システムブロック – カレンダー


「営業日カレンダー」は営業休日を表示するブロックです。
カレンダーを1ヶ月分表示するか2か月分表示するかを切り替えられます。
チェックを入れた場合は2ヶ月分のカレンダーが表示さ
れます。
16
システムブロック – 売れ筋ランキング

*
で様々な売れ筋ランキング表示に関する設定をします。
17
システムブロック – カートの中身

*
で様々なカートの中身表示に関する設定をします。
カートの中身ブロック
「カートの中身」ブロックを利用すると、カートに入れ
た商品を確認することができます。
※ 「カートをみる」ブロックと似ていますが、
「カートをみる」は単なるボタンです。
18
iモード対応xhtmlの利用


Docomoのiモードでxhtmlを利用することができます。
DoCoMoケータイでxhtml+xmlを利用するためには「デザイン設定」>>「レイアウト設定」>>「携帯用レイアウト」にて「ヘッダの編
集」から下記の<meta>タグを追加する必要があります。
iモードXHTMLについて
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/
下記タグを <head> の直後に挿入します。
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=Shift_JIS" />
19
【付録】 便利なプラグインの紹介 - 「Firebug」(1)

Firefoxのプラグイン「Firebug」を利用するとHTMLやCSSを簡単に確認することができます。
オリジナルデザインを適用する場合に非常に便利な機能なので是非ご活用ください！
Firebug（日本語版）サイト
https://addons.mozilla.org/ja/firefox/addon/5165
Firefoxで左記のURLにアクセスし、
すると簡単にインストールできます。
をクリック
※ Firefox本体は下記から入手しましょう。
http://www.mozilla-japan.org/products/firefox/
20
【付録】 便利なプラグインの紹介 - 「Firebug」(2)


インストールしたFirebugsは[F12]で起動できます。
下記は「メニュー」の部分の調査方法の例ですが、同じ操作でイロイロな箇所の確認ができます。
確認手順
「メニュー」部分を確認
②
①【調査】をクリックします。
②Classを確認したい部分
（メニュー）をクリックします。
①
③「HTML」部分で色が変わった
部分を確認します。
④「スタイルシート」の中で対象
④
③
のclassの部分を確認します。
.xc_gNavi {common.css
(283 行目)
background-color:#CFB875;
border-bottom:1px solid #777777;
border-right:1px solid #777777;
line-height:100%;
<div class="xc_gNavi">
margin:0px;
padding:5px 10px;
}
21
【付録】 便利なプラグインの紹介 - 「Web Developper」(1)

Firefoxのプラグイン「Web Developper」を利用するとページのクラスやCSSを簡単に確認することができます。
オリジナルデザインを適用する場合に非常に便利な機能なので是非ご活用ください！
Firebug（日本語版）サイト
https://addons.mozilla.org/ja/firefox/addon/60
Firefoxで左記のURLにアクセスし、
すると簡単にインストールできます。
をクリック
※ Firefox本体は下記から入手しましょう。
http://www.mozilla-japan.org/products/firefox/
22
【付録】 便利なプラグインの紹介 - 「Web Developer」(2)

インストール後FirefoxにWeb Developer ツールバーが追加されます。

ページ内で利用されている全てのCSSを一覧表示したい場合や、どのようなid、及びclassが設定されているかを確認したい場合
などにご利用ください。
「CSS」>>「CSSを表示する」をクリックすると
利用されているCSSを一覧表示できます。
「情報」>>「id属性とclass属性を表示する」をクリックすると
クラス名、及びID名が表示されます。
23