キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

カルーセルパーツ追加・変更

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

カルーセルパーツ

トップページなどにあるカルーセルを追加できます。
カルーセルに表示する1枚の画像について「スライド」を1つ設定します。スライドごとに画像・キャプション・リンクを設定できます。作業はスライドごとに行います。

カルーセルに使用する画像を用意する

あらかじめカルーセルに使用する画像とリンク先URLを用意してください。
スタートアップテーマでは横1000px縦600pxの画像を使用しています。
なお画像サイズは変更できますが、できるだけ縦横が同じサイズの画像を用意してください。

画像が用意できたら、アイテムにアップロードしておきます。(カルーセル・トップページなどの管理タグ一覧をつけておくと探しやすくなります。

オプションを設定する

パーツを囲むタグ(HTML要素とid/class)や管理タグ、カルーセルの設定などを行うパーツオプション設定へ遷移します。

パーツ名

パーツの名称を設定できます。

置換文字

パーツ置換文字が表示されます。パーツ置換文字は複製・追加時に設定できます。変更はできません。

class

パーツにclassを追加できます。ECサイト画面に出力されます。

スライドの表示順

表示順を変更する

選択してドラッグするとスライドを上下に移動でき、表示順を変更できます。

変更

スライドを変更します。変更ボタンを押下すると、スライド変更画面へ遷移します。

スライドを追加する

スライド追加画面に遷移します。スライドは最大で30まで追加できます。

保存する

パーツを保存します。

キャンセルする

未保存の作業内容を破棄します。

戻る

パーツ一覧に戻ります。未保存の作業内容は破棄されます。

レイアウト設定に戻る

レイアウト追加/変更に戻ります。未保存の作業内容は破棄されます。保存するボタンを押下した後、レイアウト設定へ戻るボタンを押下してください。

削除

カルーセルを削除するボタンを押下すると、カルーセルパーツを削除できます。削除したパーツは復元できません。

パーツオプション設定(カルーセルパーツ)

HTML

HTML要素
div・article・section・nav・aside・header・footerタグのいずれか、または「指定なし」から選択してください。パーツを囲むwrapタグを設定できます。
id/classを指定する場合は、「指定なし」以外のいずれか選択してください。
id
HTML要素のid属性の値を設定できます。
class
HTML要素のclass属性の値を設定できます。

管理タグ

管理タグを設定できます。管理タグ欄を選択すると、設定されている候補が表示されます。表示された管理タグを選択するだけで入力されます。
管理タグ欄はインクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。

備考

パーツに関する備考を設定できます。備考はパーツオプション設定以外の画面には表示されません。

カルーセル設定

ドットナビゲーションを表示する

スライド画像の下に、画像枚数と同じ数のドットが表示されます。画像のスライドに合わせてドットの色が変わります。
ドットを選択すると、該当の表示順の画像が表示されます。

前へ・次へを操作する矢印を表示する

画像表示領域の左右にボタンが表示されます。ボタンを押下すると、画像がスライドします。

自動再生する

画像を自動的にスライドします。チェックを外すと、画像は静止表示され、ドットナビゲーションまたは前へ・次へボタンでのみスライドします。

画像を表示する時間
次の画像へスライドするまでの時間を、ミリ秒単位で指定します。(1秒=1000ミリ秒)
スライドを切替える時間
画像スライドにかける時間を、ミリ秒単位で指定します。(1秒=1000ミリ秒)

カルーセルの高さを表示中の画像に合わせる

チェックすると、表示中のスライド画像の高さに合わせて、カルーセルの高さが変化します。
※カルーセルには同じ高さのスライド画像を使用してください。

一度に切替するスライドの枚数

スライドする画像の枚数を指定できます。「一度に表示するスライドの枚数」に合わせて設定してください。

一度に表示するスライドの枚数

カルーセルに表示されるスライド画像の枚数を指定できます。
カルーセルを配置する場所の幅と画像幅を計算して設定してください。

前後の画像を表示する

チェックすると、カルーセルの左右に、前に表示していた画像と次に表示する画像の端を表示します。

アクティブな画像を中央に表示する

一度に複数のスライド画像を表示する場合、現在表示中(アクティブ)な画像をカルーセルの中央に表示します。「一度に表示するスライドの枚数」に合わせて設定してください。

前後の画像を表示する幅

前後の画像を表示する場合に、前に表示していた画像と次に表示する画像を表示する幅を%またはpx(ピクセル)単位で指定できます。

画像幅を100%に指定する

チェックを入れると、カルーセル(スライド)の幅にあわせて、スライド画像が拡大されます。

画像を遅延ロードする

しない
遅延ロードしません。
表示時に読み込み
画像を表示する際に読み込みます。
連続して読み込み
画像を1枚ずつ連続して読み込みます。

他のカルーセルパーツで切替する

カルーセルに表示するスライド画像の切替を、別のカルーセルで行えます。大きなカルーセルの下などに、小さなカルーセルを配置して、ドットナビゲーションの代わりに使用できます。切替に使用するカルーセルパーツに設定したclassを入力してください。

OK

オプション設定を入力します。

キャンセルする

作業内容を破棄します。

スライド追加・変更

スライドを追加する

スライドを追加するボタンを押下すると、カルーセルパーツにスライドを追加できます。

スライドの追加・変更・削除は、カルーセルパーツ追加/変更画面で「保存する」ボタンを押下するまでは、システムに保存されていませんので、ご注意ください。

スライド名

スライドの名前です。スライドの表示順を変更する際に表示されます。

画像

スライドに使用する画像を1点設定できます。

画像を読み込む

アイテム検索が表示され、画像を読み込めます。

画像を解除する

読み込まれている画像を解除して、画像が読み込まれていない状態にできます。

alt属性

画像のalt属性を設定できます。alt属性は画像が表示されない場合に使用します。画像の内容を示すコメントを入力してください。HTMLタグは利用できません。

キャプション

キャプションを設定できます。キャプションは画像と一緒に表示されるコメントです。HTMLタグは利用できません。

リンク先

スライドのリンク先を設定できます。

新規ウインドウで開く

「新規ウインドウで開く」にチェックすると、リンク先を新規ウインドウで表示します。

OK

スライドを入力します。入力内容を保存するには、カルーセルパーツ追加/変更画面で保存ボタンを押下してください。

キャンセルする

未保存の作業内容を破棄して、カルーセルパーツ追加画面に戻ります。

戻る

元の画面に戻ります。未保存の作業内容は破棄されます。

削除

スライドが不要な場合は、スライドを削除できます。カルーセルパーツ追加/変更画面で、スライドの変更するボタンを押下してください。スライド変更画面に遷移します。
スライド変更画面の左下にある「スライドを削除する」ボタンを押下します。スライド削除ダイアログが表示されますので、スライド名を確認して「スライドを削除する」ボタンを押下します。カルーセル変更画面に戻りますが、保存するボタンを押下するまでは、作業内容は保存されません。
作業が完了したらカルーセル変更画面右下の保存ボタンを押下します。

アイテム検索

検索

アイテム名
アイテム名とアイテム置換文字、パスで検索できます。部分一致で検索できます。複数指定する場合は、空白で区切ってください。AND検索になります。
パス
アイテムをパスで検索できます。(ドメイン名/item/以降のパスを入力してください。)部分一致で検索できます。複数指定はできません。
管理タグ
管理タグ一覧で検索できます。管理タグ欄を選択すると、候補が表示されます。インクリメンタルサーチ機能があり、文字を入力するたびに前方一致で候補が絞込まれます。
検索するボタン
指定した条件でアイテムを検索できます。

アイテム一覧

アイテムを選択すると、画像欄に入力できます。

パス
アイテムのパスが表示されます。項目名を選択すると並び替えできます。
画像
画像が表示されます。画像によっては縮小表示されます。
画像を押下すると、拡大表示できます。
アイテム名
アイテム名が表示されます。項目名を選択すると並び替えできます。
更新日時
アイテムの更新日時が表示されます。項目名を選択すると並び替えできます。
サイズ
アイテムのファイルサイズが表示されます。項目名を選択すると並び替えできます。
選択
アイテム選択ボタンです。選択するボタンを押下すると画像欄に入力できます。

アイテムの容量

保存できるアイテムの容量はプランによって違います。

保存済みのアイテムの合計ファイルサイズとアイテムを保存できるディスクサイズが表示されます。十分な空き領域がなければ、アイテムをアップロードできません。
空き領域が少ない場合は、アイテムから不要なアイテムを削除してください。

アイテム追加

一覧にアイテムがない場合は、アップロードできます。

アイテムはファイル単位でアップロードできます。アップロードしたボタン画像ファイルは「アイテム」として保存され、一覧に表示されます。

アイテムをドラッグする

アップロードしたいファイルをドラッグして、管理画面のアップロード領域にドロップしてください。
ファイルごとにアップロードする場合は、ドラッグ&ドロップでアップロードできます。(ZIPファイルでのアップロードはできません。)

アイテムを追加する

ファイル選択ダイアログが開きます。アップロードしたいファイルを選択してください。

アイテム新規登録ダイアログ

アイテム名
アイテムの名前です。
URL
アイテムのURLです。(ドメイン名/item/以降のパスを入力してください。)
管理タグ
アイテムに管理タグ一覧を設定できます。管理タグでアイテムを検索できます。
同じフォルダやファイルは上書きする
チェックしてアップロードすると、同じアイテムを上書きできます。
保存する
アップロードされたアイテムとアイテム設定を保存します。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。