全ページにあらかじめ配置されたCSSファイル「original.css」に変更を加えられます。

デバイスにより表示されるテーマを分けている場合は、各テーマごとに［オリジナルCSS］を押下して遷移してください。

オリジナルCSSとは
表示内容
CSS内にアイテムを記述する方法
- アイテム置換文字について
［参照］CSSに読み込むアイテム検索と追加方法について

オリジナルCSSとは

オリジナルCSSは、全ページにあらかじめ配置されたCSSファイル「original.css」を変更する機能です。
初期には何も記述されていません。

オリジナルCSSの記述内容は、「original.css」として、futureshopシステムおよびテーマ用CSSの後に出力されます。

CSSはコマースクリエイター＞アイテム一覧にCSSファイルをアップロードすることでも追加できますが、本画面では、入力した内容をそのままECサイトに出力できますので、アイテムにアップロードする場合に比べて、手間がかかりません。

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

表示内容

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

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を保存します。

戻る

［戻る］を押下すると、未保存の作業内容を破棄します。

［参照］CSSに読み込むアイテム検索と追加方法について

検索条件

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

アイテム一覧項目

アイテムを選択すると、アイテム置換文字が入力できます。

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

アイテムの容量

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

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

アイテムの追加方法

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

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

アイテムをドラッグ＆ドロップで追加

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

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

［アイテムをアップロードする］ボタンから追加

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