運用サポート(平日10:00~17:00) 06-6485-6485
コマースクリエイター未利用コマースクリエイター移行中(有効)コマースクリエイター利用中説明を表示 ▼

コラムパーツ追加・変更

×

マニュアル閲覧上の注意

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

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

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

コマースクリエイター>パーツ>コラムパーツ

パーツ一覧よりコラムパーツで作成されたパーツのボタン、
もしくは[パーツを追加する]ボタンよりコラムパーツを選択すると遷移します。

「画像+見出し+本文」で構成されるコラムを作成できます。

1つのコラムパーツ(親)に最大4つのコラム(子)を追加できます。

コラム(子)1つに画像1点・見出し・本文・リンクなどを保存できます。コラム(子)ごとに追加/変更作業を行います。
classを利用し、コラム(子)の配置の縦・横の調整もできます。

パーツについての解説と利用方法については、パーツ一覧-パーツとはをご覧ください。

スタートアップテーマでは、フリーパーツで作成したパーツがすでにサンプルとして準備され、レイアウトに配置されています。利用方法などの参考として、管理画面内にてご覧ください。

スタートアップテーマでの利用例(一部)

  • トップページコラム
  • 商品グループ共通告知

※配置されているパーツの一覧はスタートアップテーマのご利用方法をご覧ください。

目次

画像・テキストなどの準備

コラムパーツに使用する画像とテキストを用意する

コラムパーツの見出しと本文に入力するテキスト、リンク先URL、画像を用意してください。
なお、コラムは画像・見出し・本文とも必須ではありません。

コラムパーツに画像を使用する場合は、あらかじめ用意してください。
利用できる画像の拡張子はjpeg/jpg/gif/png/svgです。
画像が用意できたら、アイテムにアップロードしておきます。
コラム・トップページなどの管理タグ一覧をつけておくと探しやすくなります。

オプションを設定する

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

[オプションを設定する]ボタン
オプション設定ダイアログ
備考の表示場所
HTML要素
HTMLタグは、パーツを囲むwrapタグを設定できます。
div・article・section・nav・aside・header・footerタグのいずれか、または「指定なし」から選択してください。
id/classを指定する場合は、「指定なし」以外のいずれか選択してください。
id
HTML要素のid属性の値を設定できます。
class
HTML要素のclass属性の値を設定できます。
管理タグ
管理タグ追加・変更-管理タグ活用のポイントをご覧ください。
備考
パーツの用途や表示画面などを入力すると管理がしやすくなります。

パーツ名

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

置換文字

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

置換文字の活用方法

フリーパーツに、置換文字を記述すると読み込まれます。
変更や修正を加える際、該当のフリーパーツを一つ作業するだけで置換文字を記述した他のすべてのパーツに反映されるので、運用のミス防止や効率化につながります。

フリーパーツ-パーツ置換文字の活用方法もご参照ください。

class

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

class設定による配置指定

class名を変えると、コラムを横に並べる数を指定できます。
各コラムの幅は自動的に計算(除算)されます。

classに「fs-pt-column--2」と入力

横に2つ並ぶ

classに「fs-pt-column--3」と入力

横に3つ並ぶ

classに「fs-pt-column--4」と入力

横に4つ並ぶ

配置指定用のclass以外にclassを入力する場合は、classを半角空白で区切って入力してください。
またはパーツオプション設定にてパーツを囲むHTML要素を設定し、classを入力してください。

コラム(親)の設定

コラム表示したいコンテンツを追加します。

新規追加の場合
変更の場合

コラムを追加する

[コラムを追加する]ボタンを押下すると、コラム追加画面に遷移します。
最大で4コラムまで追加できます。

表示順を変更する

コラム(子)は順番を変更できます。
を選択してドラッグするとスライドを上下に移動でき、表示順を変更できます。
表示順が上のコラムからECサイトに出力されます。

変更する

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

[コラム追加・変更画面]コラム(子)の設定

[コラムを追加する]ボタン、もしくは変更ボタンを押下すると表示されます。

コラムパーツ(親)のコラム(子)を追加、一度追加したコラム(子)を変更、削除できます。

作業完了後、必ずコラムパーツ追加/変更画面で「保存する」ボタンを押下してください。
コラム追加/変更画面での作業は、システムに保存されていません。

コラム名

コラムの名前です。コラムの表示順を変更する際に表示されます。

画像

コラムに使用する画像を1点設定できます。

画像を読み込む

[画像を読み込む]ボタンを押下すると、[アイテム検索]ダイアログが表示され、画像が読み込まれます。
アイテム検索で画像を選択すると、カーソル位置にアイテム置換文字が入力されます。

[アイテム検索]ダイアログ

くわしくは[アイテム検索]をご覧ください。

[アイテムを選択]
画像を解除する
[画像を解除する]ボタンを押下すると、読み込まれている画像を解除して、画像が読み込まれていない状態にできます。

alt属性

画像のalt属性を設定できます。HTMLタグは利用できません。

見出し

見出しを設定できます。HTMLタグは利用できません。

本文

コラムに表示する内容を設定できます。HTMLタグが使用できます。
パーツ置換文字は使用できません。

リンク先

コラムのリンク先を設定できます。
コラム全体(見出し+画像+本文を囲む領域)にリンクを設定します。

新規ウインドウで開く

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

コラム(子)の設定を決定する

[OK]ボタンを押下すると、コラム(子)を入力します。
コラム追加/変更画面に戻りますが、作業内容は保存されていません。
入力内容を保存するには、コラムパーツ追加/変更画面で保存ボタンを押下してください。

キャンセルする

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

削除する

「コラムを削除する」ボタンを押下します。
コラム(子)が不要な場合は、コラムを削除できます。
コラムを削除するボタンを押下すると、コラム削除ダイアログが表示されますので、コラム名を確認して「コラムを削除する」ボタンを押下します。
コラム追加/変更画面に戻りますが、作業内容は保存されていません。
入力内容を保存するには、コラムパーツ追加/変更画面で保存ボタンを押下してください。

コラム(子)を追加する(新規追加)場合には表示されません。

保存する

パーツを保存します。

キャンセルする

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

削除する

[コラムを削除する]ボタンを押下すると、コラムパーツを削除できます。削除したパーツは復元できません。
コラムパーツを追加する(新規作成)場合には表示されません。

戻る

レイアウト設定から直接パーツを変更する場合にのみ表示されます。
押下すると、レイアウト設定に戻ります。
未保存の作業内容は破棄されます。
保存するボタンを押下した後、[戻る]ボタンを押下してください。

レイアウト設定から直接パーツを変更する方法については、パーツ配置エリア上からパーツを変更するをご覧ください。

[アイテム検索]ダイアログ

検索

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

アイテム一覧

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

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

アイテムの容量

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

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

アイテム追加

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

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

アイテムをドラッグする

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

アイテム追加ダイアログが開きます。

アイテムを追加する

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

アイテム追加ダイアログが開きます。

アイテム追加ダイアログ

アイテム名
アイテムの名前です。
URL
アイテムのファイルパスを指定できます。「https://店舗KEY.itembox.design/item/」に続くパスを指定できます。
/item/以下のディレクトリにあたる部分は、任意に指定できます。
ファイルパスにはファイル名を含んで入力してください。ファイル名まで指定すると、指定されたファイル名で保存できます。
未入力の場合は、「https://店舗KEY.itembox.design/item/アップロードされたファイル名」になります。
実際のURLは、静的HTMLファイル画像などそれ以外のファイルで異なります。
管理タグ
任意の管理タグを設定できます。管理タグを指定してアイテム検索できます。
コマースクリエイター>管理タグ一覧より任意の管理タグを追加できます。
同じフォルダやファイルは上書きする
すでに同じパスでアップロードされたファイルがある場合に、上書きアップロードできます。
パスが重複している場合でかつチェックがない場合は「パスは既に登録されています。」というエラーが表示されます。
保存する
アップロードされたアイテムとアイテム設定を保存します。

項目表示について

各項目は「以前からのECサイト用」「コマースクリエイター用」「共通」の3種類があります。「コマースクリエイター移行中(有効)」選択時は全ての項目と説明が表示されます。

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

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

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

×

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

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

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