目次一括管理 _ 設定編 サムネイル管理... 3 サムネイル管理 _ 設定編... サムネイル表示事前設定 店舗ページ サムネイル用置換タグ ライトボックス設定 店舗ページ ライトボックス用置換タグ

Transcription

1 サムネイル管理編 Ver /01/24 お問合せに関して不明点や疑問点があれば 下記サポートセンターにご連絡いただくか 当社システムの管理ページ ( トップページ ) の左端メニューにある お問合せ の項目をクリックして表示される お問合せフォームからご連絡ください 電話サポート窓口電話番号 : 電話サポート受付時間 10:00~12:00 13:00~18:00( 土曜 日曜 祝日 年末年始を除く ) 時間外の場合 メールにて お問合わせ頂ければ 翌営業日対応させて頂きます メールサポート窓口メールアドレス : kourisupport@m-win.co.jp メールでのお問い合わせには 当日または翌営業日中にはご返答させていただきます お電話がつながりにくい場合や メールでのお問合せにすぐにご返事できない場合があります あらかじめご了承ください 1

2 目次一括管理 _ 設定編 サムネイル管理... 3 サムネイル管理 _ 設定編... サムネイル表示事前設定 店舗ページ サムネイル用置換タグ ライトボックス設定 店舗ページ ライトボックス用置換タグ

3 サムネイル管理 _ 設定編 サムネイル管理 サムネイル管理 では 商品画像のサムネイル作成規則の設定 サムネイル作成予約等を行うことができます 予約によるサムネイル作成は全商品画像が対象です サムネイル作成時間は 予約日の早朝となります 作成されたサムネイル画像は オリジナル画像が登録されているフォルダ (img ) の下層に thumbnail フォルダを自動作成し保存されます ファイル名は オリジナルファイル名 _s. 拡張子 となります 商品に対し個別にサムネイル作成を行いたい場合は サムネイルサイズのみを登録し 画像 ページより実施してください ( サムネイル即時作成機能 ) 操作方法 個別にサムネイル作成を行いたい場合は サムネイルサイズのみを登録 サムネイル管理で全商品画像をサムネイル対象にした場合 すでに規定サイズで画像を作成している場合は 作成されている画像に対しサムネイル画像が作成されますのでご注意ください 1 サムネイルを作成する画像を選択します サムネイル作成予約日 サムネイルサイズを入力 登録します 全商品に対し指定のサムネイルが指定の予約日に作成されます ( サムネイルサイズは 画像 ページのサムネイル即時生成にも使用されます ) 2 予約をして設定された場合は 作成予約日の欄に 前回実行結果を表示します ( 常時 ) 作成失敗の場合 ( 一つでも画像の作成に失敗した場合 ) ログ表示 ボタンが表示されエラー内容が確認できます 3

4 サムネイル画像は thumbnail/ オリジナルファイル名 _s. 拡張子 へ保存されます 保存された画像は商品管理 > 商品管理 > 画像 タブの画面で商品画像 縮小画像に設定すれば通常の画像と同様にショッピングモールへの連動も可能です ただし ショッピングモールによってフォルダ名を含めファイル名に文字数制限がございますのでご注意ください 4

5 幅を指定で 100px に設定した場合 ( 元画像より縮小 ) 実際のファイルの大きさは表示されません 元画像 ( 横長 ) サムネイル 元画像 ( 縦長 ) サムネイル 5

6 幅を指定で 1024px に設定した場合 ( 元画像より拡大 ) 実際のファイルの大きさは表示されません 元画像 ( 横長 ) サムネイル 元画像 ( 縦長 ) サムネイル 6

7 高さを指定で 100px に設定した場合 ( 元画像より縮小 ) 実際のファイルの大きさは表示されません 元画像 ( 横長 ) サムネイル 元画像 ( 縦長 ) サムネイル 7

8 高さを指定で 768px に設定した場合 ( 元画像より拡大 ) 実際のファイルの大きさは表示されません 元画像 ( 横長 ) サムネイル 元画像 ( 縦長 ) サムネイル 8

9 サムネイル管理画面にてサムネイルサイズが指定されている場合 実行ボタンおよびチェックボックスが表示されます サムネイル管理画面にてサムネイルサイズが指定されていない場合 実行ボタンおよびチェックボックスは非表示となります 操作方法 1 サムネイルを作成する画像を選択します サムネイル即時作成 ボタンをクリックすると サムネイルが作成されます 2 サムネイルサイズは サムネイル管理 に設定されている値を使用します サムネイル画像は thumbnail/ オリジナルファイル名 _s. 拡張子 へ保存されます 作成例 9

10 サムネイル管理画面にてサムネイルサイズが指定されている場合 実行ボタンおよびチェックボックスが表示されます サムネイル管理画面にてサムネイルサイズが指定されていない場合 実行ボタンおよびチェックボックスは非表示となります 操作方法 1 サムネイルを作成する画像を選択します サムネイル即時作成 ボタンをクリックすると サムネイルが作成されます 2 サムネイルサイズは サムネイル管理 に設定されている値を使用します サムネイル画像は thumbnail/ オリジナルファイル名 _s. 拡張子 へ保存されます 作成例 10

11 サムネイル表示事前設定店舗ページ サムネイル管理 では 商品画像のサムネイル作成規則の設定 サムネイル作成予約等を行う機能です サムネイル管理をご利用いただく前に事前に設定していただく項目があります 設定が完了していない場合 サムネイル管理を正しくご利用いただけません サムネイルを表示させるためのタグを設定します パソコン用 > 店舗ページ 商品詳細タブを選択します 商品詳細パーツの編集ボタンをクリックします ( パーツ名称はデザイン作成時に登録していますので この限りではありません ) 11

12 商品詳細となっていることを確認してください 設定については 店舗運営者様で行っていただきます 使用可能なパーツは 商品一覧パーツ 商品詳細パーツ等 既存の [:::GOODS_L_IMAGE01:::] ~ [:::GOODS_L_IMAGE021:::] タグ [:::GOODS_S_IMAGE01:::] ~ [:::GOODS_S_IMAGE04:::] タグが使用できる箇所全てとなります 12

13 エンドユーザー側画面 クリックすると大きな画像が表示されます a タグに [:::GOODS_L_IMAGE01_P ATH:::] を指定した場合 元画像 13

14 サムネイル用置換タグ 置換タグ [:::GOODS_L_IMAGE01:::] [:::GOODS_L_IMAGE21:::] 説明 オリジナル画像ファイル名 +IMG タグ商品画像 1~21 [:::GOODS_S_IMAGE01:::] [:::GOODS_S_IMAGE02:::] [:::GOODS_S_IMAGE03:::] [:::GOODS_S_IMAGE04:::] オリジナル画像ファイル名 +IMG タグ縮小画像 1~4 [:::GOODS_L_IMAGE01_THM:::] [:::GOODS_L_IMAGE21_THM:::] サムネイル画像ファイル名 +IMG タグ商品画像 1~21 [:::GOODS_S_IMAGE01_THM:::] [:::GOODS_S_IMAGE02_THM:::] [:::GOODS_S_IMAGE03_THM:::] [:::GOODS_S_IMAGE04_THM:::] サムネイル画像ファイル名 +IMG タグ縮小画像 1~4 [:::GOODS_L_IMAGE01_PATH:::] [:::GOODS_L_IMAGE21_PATH:::] オリジナル画像ファイル名取得商品画像 1~21 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:::] [:::GOODS_L_IMAGE01_THM_PATH:::] [:::GOODS_L_IMAGE21_THM_PATH:::] [:::GOODS_S_IMAGE01_THM_PATH:::] [:::GOODS_S_IMAGE02_THM_PATH:::] [:::GOODS_S_IMAGE03_THM_PATH:::] [:::GOODS_S_IMAGE04_THM_PATH:::] オリジナル画像ファイル名取得縮小画像 1~4 サムネイル画像ファイル名取得商品画像 1~21 サムネイル画像ファイル名取得縮小画像 1~4 a タグ内の href に入力してください 例 ) <a href="[:::goods_ S_IMAGE02_PATH:::]">[:::GOODS_ S _IMAGE02:::]</a> サムネイル用 Original a タグ内の href に入力してください 例 ) <a href="[:::goods_ L_IMAGE02_THM_PATH:::]">[:::GOODS_ L_IMAGE02:::]</a> a タグ内の href に入力してください 例 ) <a href="[:::goods_ S_IMAGE02_THM_PATH:::]">[:::GOODS_ S _IMAGE02:::]</a> 14

15 ライトボックス設定店舗ページ ライトボックス とは ページ上には画像のサムネイルが表示され ユーザがこのサムネイルをクリックすると ライトボックス にその画像の拡大バージョンが表示される機能です ライトボックスをご利用いただく前に事前に設定していただく項目があります 設定が完了していない場合 ライトボックス管理を正しくご利用いただけません サムネイルを表示させるためのタグを設定します パソコン用 > 店舗ページ 商品詳細タブを選択します レイアウト編集ボタンをクリックします 15

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> 16

17 商品詳細となっていることを確認してください 設定については 店舗運営者様で行っていただきます デザインのつくりによってソースサンプルの通りにならない場合があります 使用可能なパーツは 商品一覧パーツ 商品詳細パーツ等 既存の [:::GOODS_L_IMAGE01:::] ~ [:::GOODS_L_IMAGE21:::] タグ [:::GOODS_S_IMAGE01:::] ~ [:::GOODS_S_IMAGE04:::] タグが使用できる箇所全てとなります 17

18 エンドユーザー側画面 クリックするとライトボックスでの表示になります [:::GOODS_L_IMAGE01_ LIGHTBOX:::] を指定した場合 元画像 ライトボックス用置換タグ置換タグ [:::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 によるオリジナル画像表示 18