ブロックの配置方法

「ブロック」とは、当社ECパッケージにおける各種表示機能を小分けにしたものです。この「ブロック」をEC管理画面にて設定を変更していただくことで、店舗様の思い通りに通販サイトを表示することができます。

EC管理画面の操作

EC管理画面の、「デザイン管理」＞「レイアウト設定」画面
【表示例】
「未使用ブロック」欄に入っているブロックは実際に表示されません。ブロックの四角をドラッグし、表示／非表示の切り替えを行います。ブロックの表示順を入れ替えることもできます。

通販画面の表示領域

実際に通販サイトの画面で表示される場所は…
【表示例】
表示可能な領域は、「左右」と「センター」に分かれます。下記のブロック一覧表では、表示に適している位置を解説しています。


ブロック一覧表

▲▼をクリックすると並び替えができます。(昇順／降順)。
【詳細】をクリックすると、ブロックの解説を表示、
【表示例】をクリックすると、実際の通販画面で表示される内容のイメージを表示します。

id ブロック名称 位置 見出し 表示内容
2
【詳細】		 利用ガイド
【表示例】		 左右 (なし) 「当サイトについて」「お問い合わせ」「特定商取引法…」等のバナー表示
※デザイン変更の予定あり
3
【詳細】		 かごの中
【表示例】		 左右 現在のカゴの中 かごの中に入れた商品点数と合計金額を表示
6
【詳細】		 ログイン
【表示例】		 左右 ログイン メールアドレスとパスワードの入力枠を表示
8
【詳細】		 カレンダー
【表示例】		 左右 2013年12月の定休日 当月と来月の2ヶ月分をカレンダーで表示。定休日は色が変わる。
※デザイン変更の予定あり
101
【詳細】		 CSS
月間ランキング(右側)
【表示例】		 左右 月間ランキング ECサイトにおける、月間ランキング商品を1位～5位まで写真付きで縦長に表示。週間ランキングへのテキストリンク
103
【詳細】		 CSS商品検索
【表示例】		 左右 商品検索 キーワードの入力枠を表示。メーカーとカテゴリのテキストリンク。
104
【詳細】		 CSS
今月の人気キーワード
【表示例】		 左右 今月の人気キーワード ECサイトにおける人気検索キーワードを縦長に一覧表示、テキストリンク。
105
【詳細】 		CSS人気アクセス商品
【表示例】		 左右 人気アクセス商品 ECサイトにおける、一番人気のアクセス商品1点を写真付きで表示。以下の順位はテキストリンク。
106
【詳細】		 CSS最新発売作品
【表示例】		 左右 新着作品ピックアップ 新着商品を写真付きでスライド状に次々と表示。
107
【詳細】		 CSS会員登録
【表示例】		 左右 会員登録はこちらから 会員登録を促す告知文を表示。
108
【詳細】		 CSS新作案内
【表示例】		 センター 新着情報 新着商品(5～9商品)を写真付きで1行に表示。表示数はお客様ご利用のWebブラウザ環境により可変する。
109
【詳細】		 CSS携帯アクセス
【表示例】		 左右 携帯からアクセス ケータイサイト用のQRコードを自動生成してお客様へご案内する。
110
【詳細】		 CSS左側メニュー 左右 (なし) CSSが表示をおすすめする、とりあえず通販サイトを始めるためのブロック群を一度に表示。
111
【詳細】		 CSS右側メニュー 左右 (なし) CSSが表示をおすすめする、とりあえず通販サイトを始めるためのブロック群を一度に表示
112
【詳細】		 CSS店長のお勧め
【表示例】		 センター 店長のオススメ商品 POS側の出品時に「お勧めフラグ」を付けた商品のうち、9商品をランダムで写真付き縦展開で1行に表示。
113
【詳細】		 CSS最新ニュース センター ニュース 管理画面で作成した「新着情報」をそのまま表示
(HTML記述可)
114 CSS一覧メニュー
【表示例】		 左右 メニュー 大分類メニュー内で、
「発売日順」「新着順」などのテキストリンク。
HOMEトップページでは表示しない。
115 CSSご利用ガイド
【表示例】		 左右 ご利用ガイド 自動生成される「ご利用ガイド」コンテンツへのテキストリンク
116 CSS
返品条件、支払規約等
【表示例】		 センター 商品ご購入規約 店舗様が登録した規約を「商品ご購入規約」として表示
その下部に「お支払い方法」を自動的に表示
※仕様が変更される予定
117 CSS
従業員紹介		 左右 当社スタッフより ※廃止予定
118 CSS
外部リンク集		 左右 外部リンク集 ※廃止予定
119 CSS
キャンペーン広告
【表示例】		 センター (なし) 写真画像3点が特定の矩形領域へ入れ替わり表示
※仕様が変更される予定
120 CSS
フリー広告01		 hyblid (なし) そのままでは何も表示しない
店舗様がHTMLを記述するとそのまま表示する
121 CSS
フリー広告02		 hyblid (なし) そのままでは何も表示しない
店舗様がHTMLを記述するとそのまま表示する
122 CSS
成人DVDはこちら
【表示例】		 左右 「成人DVDはこちら」バナー バナーを押した後の「成人認証」画面にて成人認証を行うと
「インディーズDVD」大分類トップページを表示。
「DVD」大分類カテゴリ内でのみ表示できる。
HOMEトップページや成人認証後は表示されない。
123 CSS
サブカテゴリー一覧
【表示例】		 左右 (大分類名) HOMEトップページで、大分類毎のサブカテゴリを表示する。
大分類トップページでは表示されない。
124 CSS
月間ランキング(中央)
【表示例】		 センター (大分類名)月間売れ筋ランキング 売上実績の上位9商品を1行に表示
125 CSS
新着レビュー(右側)
【表示例】		 左右 新着レビュー 通販サイトへ寄稿されたレビューを新着で5件表示
126 CSS
ランキングメニュー
【表示例】		 左右 (大分類名) ランキング 大分類メニュー内で、「週間」「月間ランキング」をテキストリンク。
HOMEトップページでは表示されない。
127
【詳細】		 CSSジャンルメニュー
【表示例】		 左右 ジャンル 出品商品の大分類に対する中分類または小分類をテキストリンクで一覧表示。
128 CSS価格帯メニュー
【表示例】		 左右 価格帯別 大分類メニュー内で、1000円単位の価格帯をテキストリンク。
HOMEトップページでは表示されない。
129
【詳細】		 CSS店長自己紹介
【表示例】		 左右 店長紹介 店長紹介メッセージまたは店長写真が登録してあれば表示。
130 CSS規約
【表示例】		 センター (なし) 店舗自身で追加したオリジナルの規約(告知等)を表示
基本情報管理の「会員規約設定」ではない。
規約の内容だけでなく店舗からの告知にも利用できる。
131
【詳細】		 CSSオススメ商品
【表示例】		 センター オススメ商品 POS側の出品時に「お勧めフラグ」を付けた商品のうち
最大9商品を横展開して1行に表示
133 CSS
カード決済OK：IPS		 左右 クレジットカード支払OK IPSクレジット決済の対応カードを表示
134 CSS
SSL通信OK：ジオトラスト		 左右 個人情報を暗号化 ジオトラストのSSL証明アイコンを表示
非導入サイトで使用すると証明アイコンが変わる
140 CSS
大分類新品		 左右 新品 トップページで、新品商品の大分類をテキストリンク
トップページ以外では表示しない
141 CSS
大分類中古		 左右 中古 トップページで、中古商品の大分類をテキストリンク
トップページ以外では表示しない
142 CSS
大分類すべて		 左右 新品・中古 トップページで、新品と中古商品の大分類をテキストリンク
トップページ以外では表示しない
200 CSS
週間ランキング(中央)		 センター (大分類名)週間売れ筋ランキング 売上実績の上位9商品を1行に表示
201 CSS
成人向け商品はこちら
【表示例】		 左右 「成人向け商品はこちら」バナー バナーを押した後の「成人認証」画面にて成人認証を行うと
一般商材とアダルト商材を合わせたHOMEトップページを表示する。
成人認証後は表示されない。
202 CSS
カスタマイズ検索キーワード
※次回リリース予定		 左右 当店イチオシ検索ワード 店舗様で決めた検索キーワードをリスト表示
商品名・メーカー名などを登録して、特定の商材を
お客様へ見つけやすくする
203 CSS
アダルト商品ジャンルメニュー		 左右 ジャンル(成人向け) アダルト商材が含まれる中分類・小分類のみを一覧表示
一般商材の大分類の中に含まれる一部のアダルト商材を
お客様へ見つけやすくする

各ブロックの解説

No.002 利用ガイド
解説 「当サイトについて」「お問い合わせ」「特定商取引法…」等のバナー表示
表示内容 【表示例】※デザイン変更の予定あり
レイアウト位置 左右
管理画面連動 無し
→ 一覧表へ戻る
No.003 かごの中
解説 かごの中に入れた商品点数と合計金額を表示
表示内容 【表示例】
レイアウト位置 左右
管理画面連動無し
→ 一覧表へ戻る
No.006 ログイン
解説 メールアドレスとパスワードの入力枠を表示
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
→ 一覧表へ戻る
No.008 カレンダー
解説 当月と来月の2ヶ月分をカレンダーで表示。定休日は色が変わる。
表示内容 【表示例】※デザイン変更の予定あり
レイアウト位置 左右
管理画面連動 EC管理画面の、基本情報管理＞SHOPマスタ
→ 一覧表へ戻る
No.101 CSS月間ランキング(右側)
解説 ECサイトにおける、月間ランキング商品を1位～5位まで写真付きで縦長に表示。週間ランキングへのテキストリンク。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
→ 一覧表へ戻る
No.103 CSS商品検索
解説 キーワードの入力枠を表示。メーカーとカテゴリのテキストリンク。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
→ 一覧表へ戻る
No.104 CSS今月の人気キーワード
解説 ECサイトにおける人気検索キーワードを縦長に一覧表示、テキストリンク。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
よくある
お問い合わせ
「CSS今月の人気キーワード」ブロックで、最大表示件数を変えるには？
デフォルトは「最大20件」です。
最大件数は、お客様の管理画面からは変更できません。設定変更は、CSS(株)までお問い合わせください。
→ 一覧表へ戻る
No.105 CSS人気アクセス商品
解説 ECサイトにおける、一番人気のアクセス商品1点を写真付きで表示。以下の順位はテキストリンク。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
→ 一覧表へ戻る
No.106 CSS最新発売作品
解説 新着商品を写真付きでスライド状に次々と表示。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
→ 一覧表へ戻る
No.107 CSS会員登録
解説 会員登録を促す告知文を表示。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
→ 一覧表へ戻る
No.108 CSS新作案内
解説 新着商品(5～9商品)を写真付きで1行に表示。表示数はお客様ご利用のWebブラウザ環境により可変する。
表示内容 【表示例】
レイアウト位置 センター
管理画面連動 EC管理画面の「システム設定」＞「パラメータ設定」
よくある
お問い合わせ
「CSS新作案内」ブロックの表示行数を変更するには？
  1. EC管理画面「システム設定」＞「パラメータ設定」画面の、
    「CSS_SINCHAKU_BLOCK_ROWS」欄の数字を変更します。(1～3)
    デフォルトは「1(行)」です。
  2. 入力が完了したら、【この内容で登録する】ボタンを押します。
  3. Webブラウザの【更新】ボタンを押すと、通販画面の「新着情報」枠にその旨反映されます。

「CSS新作案内」ブロックで表示される商品の並び順を変更するには？
  1. EC管理画面「システム設定」＞「パラメータ設定」画面の、
    「CSS_SINTYAKUINFO_SORT」欄の数字を変更します。(0 または 1)
    デフォルトは「0(発売日の降順)」です。
    • 0(ゼロ)：発売日の降順。左側の商品ほど新しい
    • 1(イチ)：出品日の降順。左側の商品ほど新しい
  2. 入力が完了したら、【この内容で登録する】ボタンを押します。
  3. Webブラウザの【更新】ボタンを押すと、通販画面の「新着情報」枠にその旨反映されます。
→ 一覧表へ戻る
No.109 CSS携帯アクセス
解説 ケータイサイト用のQRコードを自動生成してお客様へご案内する。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 無し
よくある
お問い合わせ
ケータイサイトって？
携帯電話のブラウザから通販サイトへアクセスされた場合は、通常の画面ではなく、簡易的な通販画面が表示され、お客様のお買い物が可能となっております。これを「モバイル用サイト(ケータイサイト)」と呼んでいます。管理画面による設定はなく、自動的に処理されます。なお、スマートフォンのブラウザでは通常通りのPC用サイトで表示します。
→ 一覧表へ戻る
No.110 CSS左側メニュー
解説 CSSが表示をおすすめする、とりあえず通販サイトを始めるためのブロック群を一度に表示。
表示内容 表示に含まれるブロックは、以下の順となっております。
  1. No.129 CSS店長自己紹介
  2. No.114 CSS一覧メニュー
  3. No.123 CSSサブカテゴリー一覧
  4. No.127 CSSジャンルメニュー
  5. No.122 CSS成人DVDはこちら
  6. No.128 CSS価格帯メニュー
  7. No.126 CSSランキングメニュー
  8. No.104 CSS今月の人気キーワード
  9. No.109 CSS携帯アクセス
レイアウト位置 左右
管理画面連動 無し
よくある
お問い合わせ
「CSS左側メニュー」で表示される各種ブロックの並び替えをするには？
このブロック内の並び替えはできません。
並び替えをしたり個々のブロックの表示／非表示を指定したい場合は、
EC管理画面の「デザイン管理」＞「レイアウト管理」画面にて、
このブロックを「未使用ブロック」欄へドラッグしてから、各ブロックを表示するようにしてください。
→ 一覧表へ戻る
No.111 CSS右側メニュー
解説 CSSが表示をおすすめする、とりあえず通販サイトを始めるためのブロック群を一度に表示。
表示内容 表示に含まれるブロックは、以下の順となっております。
  1. No.003 かごの中
  2. No.006 ログイン
  3. No.002 利用ガイド
  4. No.105 CSS人気アクセス商品
  5. No.125 CSS新着レビュー(右側)
レイアウト位置 左右
管理画面連動 無し
よくある
お問い合わせ
「CSS右側メニュー」で表示される各種ブロックの並び替えをするには？
このブロック内の並び替えはできません。
並び替えをしたり個々のブロックの表示／非表示を指定したい場合は、
EC管理画面の「デザイン管理」＞「レイアウト管理」画面にて、
このブロックを「未使用ブロック」欄へドラッグしてから、各ブロックを表示するようにしてください。
→ 一覧表へ戻る
No.112 CSS店長のお勧め
解説 POS側の出品時に「お勧めフラグ」を付けた商品のうち、9商品をランダムで写真付き縦展開で1行に表示。
表示内容 【表示例】
レイアウト位置 センター
管理画面連動 Nex業務メニューの、ネット連動＞通販サイト出品登録
EC管理画面の、システム設定＞パラメータ設定＞CSS_OSUSUMEBLOCK_DISPLAY_MODE
よくある
お問い合わせ
「お勧めフラグ」を付けた商材の表示範囲を変更するには？
  1. EC管理画面「システム設定」＞「パラメータ設定」画面の、
    「CSS_OSUSUMEBLOCK_DISPLAY_MODE」欄の数字を変更します。(0～1)
    デフォルトは「0(大分類ごと)」です。
    • 0(ゼロ)：大分類ごとに表示。ECサイト表示中の大分類に属さない分類のおすすめ商品はフィルタリングされます。
    • 1(イチ)：全ジャンルで表示。ECサイト表示中の大分類に関わらず全てのおすすめ商品を対象にします。
  2. 入力が完了したら、【この内容で登録する】ボタンを押します。
  3. Webブラウザの【更新】ボタンを押すと、通販画面の「新着情報」枠にその旨反映されます。
「お勧めフラグ」を付けた商材の表示できる他のブロックは？

現在、以下の2種類がございます。

  1. ブロックNo.112「CSS店長のお勧め」…縦展開で表示。
  2. ブロックNo.131「CSSオススメ商品」…横展開で1行に表示。
→ 一覧表へ戻る
No.127 CSSジャンルメニュー
解説 出品商品の大分類に対する下位の分類をテキストリンクで一覧表示。
表示内容 【表示例】
※出品商材により一覧表示の内容が可変します。
※アダルト商材を取り扱う大分類は、成人認証を行ったお客様だけが表示されます。
レイアウト位置 左右
管理画面連動 EC管理画面の、基本情報管理＞ジャンル表示設定
EC管理画面の、デザイン管理＞大分類毎レイアウト設定
よくある
お問い合わせ
「CSSジャンルメニュー」で一覧表示される分類を「中分類」または「小分類」へ変更するには？
EC管理画面「基本情報管理」＞「ジャンル表示設定」画面にて、
大分類毎に設定の変更が可能です。

「未設定」の状態(デフォルト)では以下の仕様で表示されます。
  • 「ゲーム」大分類のみ 小分類 で表示
  • それ以外の大分類では 中分類 で表示
「CSSジャンルメニュー」で一覧表示される大分類の並び順を変更するには？
EC管理画面「デザイン管理」＞「大分類毎レイアウト設定」画面にて、
並び順の変更が可能です。
→ 一覧表へ戻る
No.129 CSS店長自己紹介
解説 店長紹介メッセージまたは店長写真が登録してあれば表示。
表示内容 【表示例】
レイアウト位置 左右
管理画面連動 EC管理画面の、基本情報管理＞SHOPマスタ
→ 一覧表へ戻る
No.131 CSSオススメ商品
解説 POS側の出品時に「お勧めフラグ」を付けた商品のうち、最大9商品をランダムで写真付き横展開で1行に表示。
表示内容 【表示例】
レイアウト位置 センター
管理画面連動 Nex業務メニューの、ネット連動＞通販サイト出品登録
EC管理画面の、システム設定＞パラメータ設定＞CSS_OSUSUMEBLOCK_DISPLAY_MODE
よくある
お問い合わせ
「お勧めフラグ」を付けた商材の表示範囲を変更するには？
  1. EC管理画面「システム設定」＞「パラメータ設定」画面の、
    「CSS_OSUSUMEBLOCK_DISPLAY_MODE」欄の数字を変更します。(0～1)
    デフォルトは「0(大分類ごと)」です。
    • 0(ゼロ)：大分類ごとに表示。ECサイト表示中の大分類に属さない分類のおすすめ商品はフィルタリングされます。
    • 1(イチ)：全ジャンルで表示。ECサイト表示中の大分類に関わらず全てのおすすめ商品を対象にします。
  2. 入力が完了したら、【この内容で登録する】ボタンを押します。
  3. Webブラウザの【更新】ボタンを押すと、通販画面の「新着情報」枠にその旨反映されます。
「お勧めフラグ」を付けた商材の表示できる他のブロックは？

現在、以下の2種類がございます。

  1. ブロックNo.112「CSS店長のお勧め」…縦展開で表示。
  2. ブロックNo.131「CSSオススメ商品」…横展開で1行に表示。
→ 一覧表へ戻る

「CSSジャンルメニュー」ブロックで、各大分類のジャンルの表示件数を変えるには？

当ECパッケージでは、大分類のジャンルの表示件数を変更できます。デフォルトは「5件」です。
【図】ジャンル件数

この件数は、お客様の管理画面からは変更できません。設定変更は、CSS(株)までお問い合わせください。

「CSSジャンルメニュー」ブロックによる下位分類の表示仕様

ECパッケージのデフォルトは、以下の仕様となっております。

  • 大分類が「ゲーム」の場合は、中分類が一覧表示されます。
  • 大分類が「ゲーム」以外の場合は、小分類が一覧表示されます。

この下位分類の仕様は、将来的にEC管理画面上で変更できる予定です。

twitterのつぶやきをブロックで表示するには？

オンラインマニュアルの ヒント：twitter連携 にてご説明しております。