Ver 1.03 2018/01/24 ■お問合せに関して 不明点や疑問点があれば、下記サポートセンターにご連絡いただくか、当社システムの管理ページ（トップページ）の左 端メニューにある「お問合せ」の項目をクリックして表示される、お問合せフォームからご連絡ください。
サムネイル管理編
2
目次
一括管理＿設定編
サムネイル管理 ... 3
サムネイル管理＿設定編 ...
サムネイル表示事前設定 ... 10
店舗ページ ... 11 サムネイル用置換タグ ... 14ライトボックス設定 ... 15
店舗ページ ... 15 ライトボックス用置換タグ ... 18サムネイル管理
「サムネイル管理」では、商品画 像のサムネイル作成規則の設定、 サムネイル作成予約等を行うこ とができます。 ■予約によるサムネイル作成は 全商品画像が対象です。 ■サムネイル作成時間は、予約日 の早朝となります。 ■作成されたサムネイル画像は、 オリジナル画像が登録されてい るフォルダ（img●）の下層に thumbnail フォルダを自動作成し 保存されます。ファイル名は「オ リジナルファイル名_s.拡張子」 となります。 ■商品に対し個別にサムネイル 作成を行いたい場合は、サムネイ ルサイズのみを登録し「画像」ペ ージより実施してください（サム ネイル即時作成機能）。 操作方法 ①サムネイルを作成する画像を 選択します。 サムネイル作成予約日、サムネイ ルサイズを入力・登録します。 全商品に対し指定のサムネイル が指定の予約日に作成されます。サムネイル管理＿設定編
個別にサムネイル作成を行いたい場合は、 サムネイルサイズのみを登録4 サムネイル画像は、「thumbnail/ オリジナルファイル名_s.拡張 子」へ保存されます。 保存された画像は商品管理 > 商 品管理 > 「画像」タブの画面で 商品画像、縮小画像に設定すれば 通常の画像と同様にショッピン グモールへの連動も可能です。 ただし、ショッピングモールによ ってフォルダ名を含めファイル 名に文字数制限がございますの でご注意ください。
元画像（横長） サムネイル 元画像（縦長） サムネイル 幅を指定で 100px に設定した場 合（元画像より縮小） 実際のファイルの大きさは表示 されません
6 元画像（横長） サムネイル 元画像（縦長） サムネイル 幅を指定で 1024px に設定した場 合（元画像より拡大） 実際のファイルの大きさは表示 されません
元画像（横長） サムネイル 元画像（縦長） サムネイル 高さを指定で 100px に設定した 場合（元画像より縮小） 実際のファイルの大きさは表示 されません
8 元画像（横長） サムネイル 元画像（縦長） サムネイル 高さを指定で 768px に設定した 場合（元画像より拡大） 実際のファイルの大きさは表示 されません
サムネイル管理画面にてサムネ イルサイズが指定されている場 合、実行ボタンおよびチェックボ ックスが表示されます。 サムネイル管理画面にてサムネ イルサイズが指定されていない 場合、実行ボタンおよびチェック ボックスは非表示となります。 操作方法 ①サムネイルを作成する画像を 選択します。 「サムネイル即時作成」ボタンを クリックすると、サムネイルが作 成されます。 ②サムネイルサイズは、「サムネ イル管理」に設定されている値を 使用します サムネイル画像は、「thumbnail/ オリジナルファイル名_s.拡張 子」へ保存されます
10 サムネイル管理画面にてサムネ イルサイズが指定されている場 合、実行ボタンおよびチェックボ ックスが表示されます。 サムネイル管理画面にてサムネ イルサイズが指定されていない 場合、実行ボタンおよびチェック ボックスは非表示となります。 操作方法 ①サムネイルを作成する画像を 選択します。 「サムネイル即時作成」ボタンを クリックすると、サムネイルが作 成されます。 ②サムネイルサイズは、「サムネ イル管理」に設定されている値を 使用します サムネイル画像は、「thumbnail/ オリジナルファイル名_s.拡張 子」へ保存されます 作成例
店舗ページ 「サムネイル管理」では、商品画像のサムネイル作成規則の設定、サムネイル作成予約等を行う機能です。 サムネイル管理をご利用いただく前に事前に設定していただく項目があります。 設定が完了していない場合、サムネイル管理を正しくご利用いただけません。 サムネイルを表示させるための タグを設定します。 パソコン用 ＞ 店舗ページ 商品詳細タブを選択します。 商品詳細パーツの編集ボタンを クリックします。（パーツ名称は デザイン作成時に登録していま すので、この限りではありませ ん。）
12 商品詳細となっていることを確 認してください。 設定については、店舗運営者様で 行っていただきます。 使用可能なパーツは、商品一覧パ ーツ、商品詳細パーツ等、既存の [:::GOODS_L_IMAGE01:::] ～ [:::GOODS_L_IMAGE021:::]タグ、 [:::GOODS_S_IMAGE01:::] ～ [:::GOODS_S_IMAGE04:::]タグが使 用できる箇所全てとなります。
元画像 エンドユーザー側画面 a タグに [:::GOODS_L_IMAGE01_P ATH:::] を指定した場合 クリックすると大 きな画像が表示さ れます。
14 サムネイル用置換タグ 置換タグ 説明 [:::GOODS_L_IMAGE01:::] ・ ・ ・ [:::GOODS_L_IMAGE21:::] オリジナル画像ファイル名＋IMG タグ 商品画像１～２１ [:::GOODS_S_IMAGE01:::] [:::GOODS_S_IMAGE02:::] [:::GOODS_S_IMAGE03:::] [:::GOODS_S_IMAGE04:::] オリジナル画像ファイル名＋IMG タグ 縮小画像１～４ [:::GOODS_L_IMAGE01_THM:::] ・ ・ ・ [:::GOODS_L_IMAGE21_THM:::] サムネイル画像ファイル名＋IMG タグ 商品画像１～２１ [:::GOODS_S_IMAGE01_THM:::] [:::GOODS_S_IMAGE02_THM:::] [:::GOODS_S_IMAGE03_THM:::] [:::GOODS_S_IMAGE04_THM:::] サムネイル画像ファイル名＋IMG タグ 縮小画像１～４ [:::GOODS_L_IMAGE01_PATH:::] ・ ・ ・ [:::GOODS_L_IMAGE21_PATH:::] オリジナル画像ファイル名取得 商品画像１～２１ 「a」タグ内の「href」に入力してください。 例） <a href="[:::GOODS_L_IMAGE02_PATH:::]"> [:::GOODS_L_IMAGE02:::]</a> [:::GOODS_S_IMAGE01_PATH:::] [:::GOODS_S_IMAGE02_PATH:::] [:::GOODS_S_IMAGE03_PATH:::] [:::GOODS_S_IMAGE04_PATH:::] オリジナル画像ファイル名取得 縮小画像１～４ 「a」タグ内の「href」に入力してください。 例） <a href="[:::GOODS_ S_IMAGE02_PATH:::]">[:::GOODS_ S _IMAGE02:::]</a> [:::GOODS_L_IMAGE01_THM_PATH:::] ・ ・ ・ [:::GOODS_L_IMAGE21_THM_PATH:::] サムネイル画像ファイル名取得 商品画像１～２１ サムネイル用 Original 「a」タグ内の「href」に入力してください。 例） <a href="[:::GOODS_ L_IMAGE02_THM_PATH:::]">[:::GOODS_ L_IMAGE02:::]</a> [:::GOODS_S_IMAGE01_THM_PATH:::] [:::GOODS_S_IMAGE02_THM_PATH:::] [:::GOODS_S_IMAGE03_THM_PATH:::] [:::GOODS_S_IMAGE04_THM_PATH:::] サムネイル画像ファイル名取得 縮小画像１～４ 「a」タグ内の「href」に入力してください。 例） <a href="[:::GOODS_ S_IMAGE02_THM_PATH:::]">[:::GOODS_ S _IMAGE02:::]</a>
店舗ページ 「ライトボックス」とは、ページ上には画像のサムネイルが表示され、ユーザがこのサムネイルをクリックすると 「ライトボックス」にその画像の拡大バージョンが表示される機能です。 ライトボックスをご利用いただく前に事前に設定していただく項目があります。 設定が完了していない場合、ライトボックス管理を正しくご利用いただけません。 サムネイルを表示させるための タグを設定します。 パソコン用 ＞ 店舗ページ 商品詳細タブを選択します。 レイアウト編集ボタンをクリッ クします。
16 レイアウト編集となっていることを 確認してください。 設定については、店舗運営者様で行 っていただきます。 デザインのつくりによってソースサ ンプルの通りにならない場合があり ます。 画像ポップアップしたいページの 「レイアウト編集」を開きます。 「HTML」に切り替えます。 <head></head>内に <script type="text/javascript" src="[:::LIGHTBOX_JS:::]"></script> 置換タグを追加します。 使用可能なページは、商品一覧ペー ジ、商品詳細ページ等、既存の [:::GOODS_L_IMAGE01:::] ～ [:::GOODS_L_IMAGE21:::]タグ、 [:::GOODS_S_IMAGE01:::] ～ [:::GOODS_S_IMAGE04:::]タグが使用で きる箇所全てとなります。
<script type="text/javascript"
src="[:::LIGHTBOX_JS:::]"></script>
上記 html ソースサンプル<meta content="[:::SEO_KEYWORD:::]" name="keywords"> <meta content="[:::COPYRIGHT:::]" name="copyright">
<meta content="[:::CUSTOMER_PRESIDENT:::]" name="author"> <meta content="all" name="robots">
<meta content="[:::SEO_DESCRIPTION:::]" name="description"><link href="/DD/design.css" type="text/css" rel="stylesheet"><link href="/DD/fpage.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="[:::LIGHTBOX_JS:::]"></script> </head>
商品詳細となっていることを確 認してください。 設定については、店舗運営者様で 行っていただきます。 デザインのつくりによってソー スサンプルの通りにならない場 合があります。 使用可能なパーツは、商品一覧パ ーツ、商品詳細パーツ等、既存の [:::GOODS_L_IMAGE01:::] ～ [:::GOODS_L_IMAGE21:::]タグ、 [:::GOODS_S_IMAGE01:::] ～ [:::GOODS_S_IMAGE04:::]タグが使 用できる箇所全てとなります。
18 元画像 エンドユーザー側画面 ライトボックス用置換タグ 置換タグ 説明 [:::GOODS_L_IMAGE01_LIGHTBOX:::] ・ ・ ・ [:::GOODS_L_IMAGE21_LIGHTBOX:::] 商品画像のサムネイル画像表示＋ lightbox によるオリジナル画像表 示 [:::GOODS_S_IMAGE01_LIGHTBOX:::] [:::GOODS_S_IMAGE02_LIGHTBOX:::] [:::GOODS_S_IMAGE03_LIGHTBOX:::] [:::GOODS_S_IMAGE04_LIGHTBOX:::] 縮小画像のサムネイル画像表示＋ lightbox によるオリジナル画像表 示 [:::GOODS_L_IMAGE01_ LIGHTBOX:::] を指定した 場合 クリックするとライ トボックスでの表示 になります。
