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

オリジナルCSS

×

マニュアル閲覧上の注意

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

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

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

オリジナルCSSとは

オリジナルCSSは、全ページにあらかじめ配置されたCSSファイル「original.css」を変更する機能です。初期には何も記述されていません。
オリジナルCSSの記述内容は、「original.css」として、futureshopシステムおよびテーマ用CSSの後に出力されます。

オリジナルCSSは入力した内容をそのままECサイトに出力できますので、アイテムにCSSファイルをアップロードする場合に比べて、手間がかかりません。

管理画面メニューよりテーマを表示します。いずれかの テーマから「オリジナルCSS」を押下してください。

設定

表示内容

オリジナルCSSの内容です。入力した内容がそのままCSSファイルとしてECサイトに適用されます。CSSを記述できます。

アイテムを読み込む

CSS内にアイテムを記述する場合は、アイテムのパスを入力したい箇所にカーソルをおいて、アイテムを読み込むボタンを押下します。アイテム検索が表示されます。
アイテム検索で画像を選択すると、カーソル位置にアイテム置換文字が入力されます。

アイテムを検索する

アイテム検索ダイアログが表示されます。キーワード・URL・管理タグを入力して検索するボタンを押下してください。アップロードしたアイテム(画像・CSSファイルなど)を検索します。

使用するアイテムの右にある選択するボタンを押下します。

オリジナルCSS設定画面に戻ります。カーソルの位置にアイテムの置換文字が入力されていることを確認してください。

アイテム置換文字

アイテムへアプロードした画像ファイルなどへのリンクを入力する場合は、アイテム置換文字を使用してください。アイテムのパスが出力されます。

アイテムの置換文字は、「{% items[アイテムのパス] %}」と表記します。[]の間にはアイテムのパスを記述します。「"」や「'」は不要です。
アイテムの画像パスはアップロード時に「/item/」に続く形で指定できます。

アイテム置換文字は、[アイテム検索]で検索結果に表示されたアイテムを選択すると、入力できます。

アイテムへアップロードしたファイルのパスは(置換文字を使用せずに)直接指定できますが、アイテムにアップロードした画像ファイルを、新しいファイルに入れ替えた場合、すぐに更新されません。画像を快適にご覧いただくためのキャッシュ機能によるものです。
パスをアイテム置換文字で指定すれば、画像ファイル入れ替え直後より、新しい画像ファイルを表示できます。

置換文字を利用した表示内容のサンプル

background-image: url({% items[/item/path/filename.png] %});
list-style-image: url({% items[/item/path/list-mark-sample.png] %});

保存する

オリジナルCSSを保存します。

戻る

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

アイテム検索

検索

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

アイテム一覧

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

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

アイテムの容量

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

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

アイテム追加

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

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

アイテムをドラッグする

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

アイテムを追加する

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

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

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

項目表示について

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

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

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

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

×

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

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

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