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

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

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

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

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

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

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

CSS 設 定 - 高 度 なCSSの 編 集 細 かな 部 分 までデザインを 修 正 したい 場 合 は CSS 設 定 >> 上 級 CSS 設 定 でスタイルシートを 直 接 編 集 できます トップフォルダ _template css common.css 新 規 作 成 したCSSは レイアウト 設 定 画 面 にてHTMLヘッダにて 呼 び 出 されるよう に 設 定 して 下 さい 新 規 作 成 したCSSは /_template/css/custom.css と いうファイル 名 で 保 存 されます xc_auto.css common_ie6.css xc_auto_block.css textstyle.css xc_blank.css タグの 例 - *** は 必 要 に 応 じて 書 き 換 えてください <link href= //xs***.eccart.jp/****/_template/css/*****.css" rel="stylesheet" type="text/css" /> 下 記 CSSは</head>タグ 直 前 に 自 動 挿 入 されます xc_auto.css xc_auto_block.css xc_blank.css 手 動 編 集 不 可 簡 単 設 定 によって 自 動 生 成 され るCSSです 手 動 編 集 不 可 コンテンツ 設 定 の 商 品 一 覧 及 び 商 品 詳 細 でデザインパターンを 選 択 した 際 に 自 動 生 成 されるCSSです 手 動 編 集 可 商 品 一 覧 商 品 詳 細 のレイアウト を 微 調 整 したい 場 合 にご 利 用 ください 7

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

レイアウト 設 定 - ソース 編 集 html 及 びCSSに 詳 しい 方 は 上 級 者 の 方 は ソース 編 集 に 切 り 替 えるとさらに 自 由 なレイアウト 設 定 ができます 但 し ソース 編 集 した 後 ドラッグ&ドロップ 編 集 に 切 り 替 えると 一 部 の 情 報 が 削 除 される 場 合 があるため ソース 編 集 で 設 定 する 場 合 には ドラッグ&ドロップ 編 集 はしないようにして 下 さい システムブロックやカスタムブロックは 下 記 のようなタグ を 埋 め 込 むことで 利 用 できます 例 ) メニューブロック <!-- XCART_USER_CONTENTS_XC_GNAVI --> PC/ 携 帯 のネットショップを HTMLソース 編 集 で 自 由 にデザイン 可 能! 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]で 起 動 できます 下 記 は メニュー の 部 分 の 調 査 方 法 の 例 ですが 同 じ 操 作 でイロイロな 箇 所 の 確 認 ができます メニュー 部 分 を 確 認 確 認 手 順 1 4 2 1 調 査 をクリックします 2Classを 確 認 したい 部 分 (メニュー)をクリックします 3 HTML 部 分 で 色 が 変 わった 部 分 を 確 認 します 4 スタイルシート の 中 で 対 象 のclassの 部 分 を 確 認 します 3.xc_gNavi {common.css (283 行 目 ) background-color:#cfb875; border-bottom:1px solid #777777; border-right:1px solid #777777; line-height:100%; margin:0px; <div class="xc_gnavi"> 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