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

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

ファイル管理ツール • 「デザイン設定」>>「ファイル管理」でカートにアップロードされているファイルを管理できます。この画面ではファイルの確認/移動/削除が可能です。※ ファイルのアップロードはできません。

ファイル管理 –ファイルのアップロード/ダウンロード • 「デザイン設定」>>「ファイル管理」では画像やCSSなどのファイルを一括でアップロードができます。 • 本機能を利用する場合はまず現在のデータをテンプレート設定よりダウンロードし、それを修正したものをアップロードすることをオススメします。基本手順トップフォルダ（名前は任意）スタイルシート（CSS） • テンプレート設定より現在のデータをダウンロード • zipファイルを解凍 • 解凍されたデータに追加したい画像を加える。 ※ images フォルダ以外はどこに画像をおいてもOK。 • zipファイルに圧縮 • (4)のzipファイルをファイル管理よりアップロード _template css サイトデザイン用画像 images ※ファイル管理の画面以外から設定した画像が保存されています※ファイル名に制限があります。システム用画像（商品画像/ボタン画像/アイコン画像/etc..） images Zip圧縮「レイアウト設定（PC）」のレイアウト設定情報 template.html アップロード「レイアウト設定（携帯）」のレイアウト設定情報 templateMobile.html ブロック設定、簡単CSS設定、商品一覧/詳細テンプレートの設定情報（※編集不可） eccart.conf ダウンロード「簡単CSS設定」で生成されたスタイルシート xcart_auto.css Zip解凍 Ver3.2以前のファイル保存先 user

商品詳細ページのURL確認方法 • 商品詳細ページのリンクを独自で設定する場合や、リンク先として紹介する場合は、商品コードを使った固定のURLを使用します。 • 商品コードを使った固定のURLの確認は商品管理 >> 商品管理・検索画面で行います。商品詳細の紹介用URLの確認　　商品の検索条件を入力　　「検索」ボタンをクリック　　該当の商品のチェックボックスにチェックを入れる　　「商品詳細ページURLの確認」を選択　　商品詳細ページの固定URLが表示される１ 2 3 4 5 １ 2 check！ブラウザ上で表示される「http://カートURL/item_detail/itemId,●/」というURLについては、商品の並び替えなどを行うと「●」の部分が変更されますので、紹介用のリンク先URLとしては使用しないでください。 3 4 5

サイト部品設定 • ショップページに利用される、ボタン/アイコン/ガイダンス/画像未登録商品の画像を設定します。サイト部品設定で設定した情報はカートサーバー上の「images」フォルダに保存されます。 _template css トップフォルダ（名前は任意） images ※ファイル管理の画面以外から設定した画像が保存されています※ファイル名に制限があります。システム用画像（商品画像/ボタン画像/アイコン画像/etc..） images

CSS設定 - 簡単CSS設定 • 「CSS設定」>>「簡単CSS設定」ではスタイルシートの知識が無くても簡単に文字や背景色の変更ができます。簡単CSS設定で設定した情報はカートサーバー上に下記データとして保存されます。トップフォルダ（名前は任意）「簡単CSS設定」の設定情報（※編集不可） css.ini 「簡単CSS設定」で生成されたスタイルシート xcart_auto.css

CSS設定 - 高度なCSSの編集 • 細かな部分までデザインを修正したい場合は「CSS設定」>>「上級CSS設定」でスタイルシートを直接編集できます。新規作成したCSSは「レイアウト設定」画面にてHTMLヘッダにて呼び出されるように設定して下さい。新規作成したCSSは /_template/css/custom●.css というファイル名で保存されます。 _template css common.css トップフォルダ xc_auto.css common_ie6.css textStyle.css xc_auto_block.css xc_blank.css 【タグの例】 - *** は必要に応じて書き換えてください <link href=“//xs***.eccart.jp/****/_template/css/*****.css" rel="stylesheet" type="text/css" /> 下記CSSは</head>タグ直前に自動挿入されます。

レイアウト設定 - ドラッグ＆ドロップ編集 • 機能をもったブロックをドラッグ＆ドロップすることで簡単にレイアウト設定ができます。 PC/携帯のネットショップをドラッグ＆ドロップで簡単にデザイン可能！ドラッグ＆ドロップで表示場所変更や表示のON/OFF切替ができます。

レイアウト設定 - ソース編集 • html及びCSSに詳しい方は上級者の方は『ソース編集』に切り替えるとさらに自由なレイアウト設定ができます。 • 但し、『ソース編集』した後、『ドラッグ＆ドロップ編集』に切り替えると一部の情報が削除される場合があるため、『ソース編集』で設定する場合には、『ドラッグ＆ドロップ編集』はしないようにして下さい。 PC/携帯のネットショップをHTMLソース編集で自由にデザイン可能！システムブロックやカスタムブロックは下記のようなタグを埋め込むことで利用できます。例）メニューブロック

ブロックの設定 • 全てのブロックには　　というボタンがあり、ここから各ブロックをどのページに表示するかなどを切替可能です。 • システムブロックによっては下記の『ブロック名』『識別子』『表示するページ』以外の特殊な設定項目が付属します。  <div class="xc_calendar">・・・</div>

カスタムブロック • カスタムブロックはHTMLだけが記述されたブロックで、必要に応じて追加・削除できます。 • 「簡易HTML編集にする」にチェックを入れている場合、WYSIWYGを利用して簡単なHTML編集ができます。画像挿入の作業例カートサーバー上にアップロードした画像を選択して利用できます。

システムブロック - メニューブロック • 「メニュー」ブロックは各ページへのリンク群を表示するブロックです。 • 機能設定では『表示項目の設定』『表示する文字』と『リンク先』を設定します。表示文字はメニューの項目名とページ見出しに反映されます。

システムブロック –検索Boxブロック • 「検索Box」ブロックは商品検索のための検索窓を表示するブロックです。 • 機能設定にて『表示項目の設定』『表示する文字』を設定できます。表示文字は検索項目の初期表示に利用されます。

システムブロック –カテゴリー一覧 • 「カテゴリー一覧ブロック」は登録した商品カテゴリを表示するブロックです。 • 様々な表示形式・条件を変更できます。カテゴリー名の文字数が多く、折返しが発生してしまう場合は『カテゴリ名の表示文字数』を調整します。表示文字数30の場合表示文字数20の場合省略時テキストリスト表示とJavaScript表示を切り替えることができます。リスト表示 JavaScript表示カテゴリサブカテゴリ商品点数

システムブロック –カテゴリー一覧（カテゴリ一覧の表示順の変更） • ショップ画面のカテゴリ一覧には、商品管理 >> 商品カテゴリ設定に表示されている順でカテゴリ名が表示されます。 • ショップ画面上に表示されるカテゴリ名の並び替えは、この画面から行えます。カテゴリの並び替え　並び替えボタンをクリック　表示された画面上で移動させたいカテゴリ名を左クリック　しながら移動し、任意の場所で左クリックを離す　登録するをクリック 1 2 3 カテゴリ一覧では、表示順が上部のものほど優先して表示されます。例）この画面上の設定の場合 Tシャツ >> パンツの順にショップ画面上に表示されます。 1 check！商品一覧や検索結果の商品の表示順序をコンテンツ設定 >> 商品購入ページ >> 商品一覧にて表示順序を「カテゴリ登録順」に設定した場合、この画面のカテゴリー名の左隣に記載されているカテゴリIDに準じてショップ画面上に商品が表示されます。

システムブロック –カレンダー • 「営業日カレンダー」は営業休日を表示するブロックです。 • カレンダーを1ヶ月分表示するか2か月分表示するかを切り替えられます。チェックを入れた場合は2ヶ月分のカレンダーが表示されます。

システムブロック – 売れ筋ランキング • * 　で様々な売れ筋ランキング表示に関する設定をします。

システムブロック –カートの中身 • * 　　で様々なカートの中身表示に関する設定をします。カートの中身ブロック「カートの中身」ブロックを利用すると、カートに入れた商品を確認することができます。 ※ 「カートをみる」ブロックと似ていますが、「カートをみる」は単なるボタンです。

iモード対応xhtmlの利用 • Docomoのiモードでxhtmlを利用することができます。 • DoCoMoケータイでxhtml+xmlを利用するためには「デザイン設定」>>「レイアウト設定」>>「携帯用レイアウト」にて「ヘッダの編集」から下記の<meta>タグを追加する必要があります。下記タグを <head>の直後に挿入します。 <meta http-equiv="Content-type" content="application/xhtml+xml; charset=Shift_JIS" />

【付録】便利なプラグインの紹介 - 「Firebug」(1) • Firefoxのプラグイン「Firebug」を利用するとHTMLやCSSを簡単に確認することができます。オリジナルデザインを適用する場合に非常に便利な機能なので是非ご活用ください！ Firefoxで左記のURLにアクセスし、をクリックすると簡単にインストールできます。 ※ Firefox本体は下記から入手しましょう。http://www.mozilla-japan.org/products/firefox/

【付録】便利なプラグインの紹介 - 「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%; margin:0px; padding:5px 10px; } <divclass="xc_gNavi">

【付録】便利なプラグインの紹介 - 「Web Developper」(1) • Firefoxのプラグイン「Web Developper」を利用するとページのクラスやCSSを簡単に確認することができます。オリジナルデザインを適用する場合に非常に便利な機能なので是非ご活用ください！ Firefoxで左記のURLにアクセスし、をクリックすると簡単にインストールできます。 ※ Firefox本体は下記から入手しましょう。http://www.mozilla-japan.org/products/firefox/

【付録】便利なプラグインの紹介 - 「Web Developer」(2) • インストール後FirefoxにWeb Developer ツールバーが追加されます。 • ページ内で利用されている全てのCSSを一覧表示したい場合や、どのようなid、及びclassが設定されているかを確認したい場合などにご利用ください。「CSS」>>「CSSを表示する」をクリックすると利用されているCSSを一覧表示できます。「情報」>>「id属性とclass属性を表示する」をクリックするとクラス名、及びID名が表示されます。

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