レンタルショッピングカートマニュアル Vol.2 ~ デザイン 設 定 編 ~
ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2
ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >> ファイル 管 理 では 画 像 やCSSなどのファイルを 一 括 でアップロード ダウンロードができます 本 機 能 を 利 用 する 場 合 はまず 現 在 のデータをダウンロードし それを 修 正 したものをアップロードすることをオススメします トップフォルダ ( 名 前 は 任 意 ) _template css images スタイルシート(CSS) サイトデザイン 用 画 像 基 本 手 順 (1) 現 在 のデータをダウンロード (2) zipファイルを 解 凍 (3) 解 凍 されたデータに 追 加 したい 画 像 を 加 える images フォルダ 以 外 はどこに 画 像 をおいてもOK images システム 用 画 像 ( 商 品 画 像 /ボタン 画 像 /アイコン 画 像 /etc..) (4) zipファイルに 圧 縮 (5) (4)のzipファイルをアップロード ファイル 管 理 の 画 面 以 外 から 設 定 した 画 像 が 保 存 されています ファイル 名 に 制 限 があります レイアウト 設 定 (PC) のレイアウト 設 定 情 報 template.html レイアウト 設 定 ( 携 帯 ) のレイアウト 設 定 情 報 templatemobile.html ブロック 設 定 簡 単 CSS 設 定 商 品 一 覧 / 詳 細 テンプレート の 設 定 情 報 ( 編 集 不 可 ) eccart.conf 簡 単 CSS 設 定 で 生 成 されたスタイルシート xcart_auto.css user Ver3.2 以 前 のファイル 保 存 先 Zip 圧 縮 Zip 解 凍 アップロード ダウンロード 3
サイト 部 品 設 定 ショップページに 利 用 される ボタン/アイコン/ガイダンス/ 画 像 未 登 録 商 品 の 画 像 を 設 定 します サイト 部 品 設 定 で 設 定 した 情 報 はサーバー 上 の images フォルダに 保 存 されます トップフォルダ ( 名 前 は 任 意 ) _template css images images システム 用 画 像 ( 商 品 画 像 /ボタン 画 像 /アイコン 画 像 /etc..) ファイル 管 理 の 画 面 以 外 から 設 定 した 画 像 が 保 存 されています ファイル 名 に 制 限 があります 4
CSS 設 定 - 簡 単 CSS 設 定 CSS 設 定 >> 簡 単 設 定 ではスタイルシートの 知 識 が 無 くても 簡 単 に 文 字 や 背 景 色 の 変 更 ができます 簡 単 CSS 設 定 で 設 定 した 情 報 はサーバー 上 に 下 記 データとして 保 存 されま す トップフォルダ ( 名 前 は 任 意 ) css.ini 簡 単 CSS 設 定 の 設 定 情 報 ( 編 集 不 可 ) 簡 単 CSS 設 定 で 生 成 されたスタイルシート xcart_auto.css 5
CSS 設 定 - 高 度 なCSSの 編 集 細 かな 部 分 までデザインを 修 正 したい 場 合 は CSS 設 定 >> 上 級 設 定 でスタイルシートを 直 接 編 集 できます CSSの 調 整 には Firebug が 便 利 です P.19 以 降 も 併 せてご 覧 くださいませ 新 規 作 成 したCSSは レイアウト 設 定 画 面 にてHTMLヘッダにて 呼 び 出 されるよう に 設 定 して 下 さい 新 規 作 成 したCSSは /_template/css/custom.css と トップフォルダ _template css common.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です 手 動 編 集 可 商 品 一 覧 商 品 詳 細 のレイアウト を 微 調 整 したい 場 合 にご 利 用 ください 6
レイアウト 設 定 - ドラッグ&ドロップ 編 集 機 能 をもったブロックをドラッグ&ドロップすることで 簡 単 にレイアウト 設 定 ができます ドラッグ&ドロップで 表 示 場 所 変 更 や 表 示 のON/OFF 切 替 ができます PC/ 携 帯 のネットショップを ドラッグ&ドロップで 簡 単 にデザイン 可 能! 7
レイアウト 設 定 - ソース 編 集 html 及 びCSSに 詳 しい 方 は 上 級 者 の 方 は ソース 編 集 に 切 り 替 えるとさらに 自 由 なレイアウト 設 定 ができます 但 し ソース 編 集 した 後 ドラッグ&ドロップ 編 集 に 切 り 替 えると 一 部 の 情 報 が 削 除 される 場 合 があるため ソース 編 集 で 設 定 する 場 合 には ドラッグ&ドロップ 編 集 はしないようにして 下 さい PC/ 携 帯 のネットショップを HTMLソース 編 集 で 自 由 にデザイン 可 能! システムブロックやカスタムブロックは 下 記 のようなタグを 埋 め 込 むことで 利 用 できます 例 ) メニューブロック <!-- XCART_USER_CONTENTS_XC_GNAVI --> 8
ブロックの 設 定 全 てのブロックには というボタンがあり ここから 各 ブロックをどのページに 表 示 するかなどを 切 替 可 能 です システムブロックによっては 下 記 の ブロック 名 識 別 子 表 示 するページ 以 外 の 特 殊 な 設 定 項 目 が 付 属 します ブロック 名 識 別 子 任 意 の 名 前 を 設 定 して 下 さい 最 初 に 設 定 した 名 前 は 変 更 できません システムブロックのブロック 名 は 変 更 できません 半 角 英 数 字 或 いは _ (アンダーバー)で 識 別 子 を 設 定 します 入 力 文 字 は 大 文 字 に 自 動 変 換 されます この 識 別 子 は ソース 編 集 時 の 特 殊 タグとして 利 用 されます <!-- XCART_USER_CONTENTS_XC_CALENDAR --> なお ほとんどのシステムブロックはクラス 付 きの<div>で 構 成 さ れており その 場 合 識 別 子 とCSSクラスは 一 致 します <div class="xc_calendar"> </div> 見 出 し 表 示 するページ システムブロックのブ 識 別 子 は 変 更 できません ブロックの 見 出 し(<h4>タグ)に 表 示 する 文 字 列 を 設 定 します 設 定 がない 場 合 は<h4>タグは 表 示 されません 各 ブロックをどのページに 表 示 するかを 切 り 替 えます 9
カスタムブロック カスタムブロックはHTMLだけが 記 述 されたブロックで 必 要 に 応 じて 追 加 削 除 できます 簡 易 HTML 編 集 にする にチェックを 入 れている 場 合 WYSIWYGを 利 用 して 簡 単 なHTML 編 集 ができます 画 像 挿 入 の 作 業 例 Xcartサーバー 上 にアップロードした 画 像 を 選 択 し て 利 用 できます 10
システムブロック - メニューブロック メニュー ブロックは 各 ページへのリンク 群 を 表 示 するブロックです 機 能 設 定 では 表 示 項 目 の 設 定 表 示 する 文 字 と リンク 先 を 設 定 します 表 示 文 字 はメニューの 項 目 名 とページ 見 出 しに 反 映 されます 11
システムブロック 検 索 Boxブロック 検 索 Box ブロックは 商 品 検 索 のための 検 索 窓 を 表 示 するブロックです 機 能 設 定 にて 表 示 項 目 の 設 定 表 示 する 文 字 を 設 定 できます 表 示 文 字 は 検 索 項 目 の 初 期 表 示 に 利 用 されます 12
システムブロック カテゴリー 一 覧 カテゴリー 一 覧 ブロック は 登 録 した 商 品 カテゴリを 表 示 するブロックです 様 々な 表 示 形 式 条 件 を 変 更 できます カテゴリー 名 の 文 字 数 が 多 く 折 返 しが 発 生 してしまう 場 合 は カテゴリ 名 の 表 示 文 字 数 を 調 整 します 表 示 文 字 数 30の 場 合 表 示 文 字 数 20の 場 合 省 略 時 テキスト リスト 表 示 とJavaScript 表 示 を 切 り 替 えることができます リスト 表 示 JavaScript 表 示 カテゴリ サブカテゴリ 商 品 点 数 13
システムブロック カレンダー 営 業 日 カレンダー は 営 業 休 日 を 表 示 するブロックです カレンダーを1ヶ 月 分 表 示 するか2か 月 分 表 示 するかを 切 り 替 えられます チェックを 入 れた 場 合 は2ヶ 月 分 のカレンダーが 表 示 さ れます 14
システムブロック 売 れ 筋 ランキング * で 様 々な 売 れ 筋 ランキング 表 示 に 関 する 設 定 をします 15
システムブロック カートの 中 身 * で 様 々なカートの 中 身 表 示 に 関 する 設 定 をします カートの 中 身 ブロック カートの 中 身 ブロックを 利 用 すると カートに 入 れ た 商 品 を 確 認 することができます カートをみる ブロックと 似 ていますが カートをみる は 単 なるボタンです 16
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" /> 17
付 録 便 利 なプラグインの 紹 介 - Firebug (1) Firefoxのプラグイン Firebug を 利 用 するとHTMLやCSSを 簡 単 に 確 認 することができます HTMLやCSSの 編 集 後 のイメージを 確 認 しながら 作 業 が 出 来 ますので 非 常 に 便 利 な 機 能 です Firebugを 使 用 しない 場 合 のデザイン 変 更 フロー 管 理 画 面 common.css 内 のタグを 調 査 common.css 内 のタグを 調 整 デザインを 反 映 ブラウザで 確 認 確 認 して 再 度 修 正 する 場 合 は 同 じ 手 順 を 繰 り 返 します Firebugを 使 用 した 場 合 のデザイン 変 更 フロー Firebug 内 で cssを 調 査 Firebug 内 で タグを 調 整 ブラウザで 確 認 デザインを 反 映 先 にブラウザで 完 成 後 の イメージを 確 認 しているので 再 度 の 修 正 がありません Firebug( 日 本 語 版 ) https://addons.mozilla.org/ja/firefox/addon/1843 上 記 は2009 年 6 月 現 在 のURLです アドオンを 検 索 の バーに firebug と 入 力 し 最 新 のバージョンをご 利 用 くだ さいませ Firefoxで 左 記 のURLにアクセスし するとダウンロードできます をクリック Firefox 本 体 は 下 記 から 入 手 しましょう http://www.mozilla-japan.org/products/firefox/ 18
付 録 便 利 なプラグインの 紹 介 - Firebug (2: 起 動 ~ 調 査 ) Firebugはインストール 後 ショートカットキーの F12 を 押 すことで 起 動 します 例 ) QRコードの 位 置 を 変 更 したい! STEP1 Firebugの 調 査 ボタンを 押 します STEP2 調 整 したい 箇 所 を クリックします STEP3 この 部 分 に 調 整 する CSSが 表 示 されます 19
付 録 便 利 なプラグインの 紹 介 - Firebug (3: 調 整 ~ 反 映 ) STEP4 目 的 のcssのコード 部 分 をコピーします STEP5 Firebugの 編 集 を 選 択 し xc_blank.css に コピーした 内 容 を 貼 り 付 けます STEP6 CSSを 調 整 します 最 後 に 調 整 したCSSの 内 容 を エクスカート 管 理 画 面 の デザイン 設 定 >>CSS 設 定 >> 上 級 設 定 >> xc_blank.css に 実 際 に 挿 入 すればデザイン 変 更 が 完 成 です! 20
付 録 便 利 なプラグインの 紹 介 - 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/ 21
付 録 便 利 なプラグインの 紹 介 - Web Developer (2) インストール 後 FirefoxにWeb Developer ツールバーが 追 加 されます ページ 内 で 利 用 されている 全 てのCSSを 一 覧 表 示 したい 場 合 や どのようなid 及 びclassが 設 定 されているかを 確 認 したい 場 合 などにご 利 用 ください CSS >> CSSを 表 示 する をクリックすると 利 用 されているCSSを 一 覧 表 示 できます 情 報 >> id 属 性 とclass 属 性 を 表 示 する をクリックすると クラス 名 及 びID 名 が 表 示 されます 22