1. オンラインマニュアル
  2. 管理画面メニューガイド
  3. [commerce creator]メニュー
  4. テーマ
  5. オリジナルCSS
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニューガイド
  • まずはじめに
  • [TOP]
  • [commerce creator]メニュー
  • [設定]メニュー
  • [システム]メニュー
  • [管理]メニュー
  • [運用]メニュー
コマースクリエイター構築ガイド
  • はじめてのコマースクリエイター
  • 使いこなそうコマースクリエイター
  • ユーザー画面リファレンス
  • 仕様・初期値
  • 画像登録
  • コマースクリエイターへの移行
決済機能について
外部連携・フィード・API
一括登録・一括取得
  • 一括登録のエラー内容について
  • 商品基本データ
  • 予約データ
  • グループデータ
  • 会員・メールマガジン会員
  • ポイント・クーポン
  • 定期・頒布会データ
  • STAFF START関連
  • 受注データ
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニューガイド
  • まずはじめに
  • [TOP]
  • [commerce creator]メニュー
  • [設定]メニュー
  • [システム]メニュー
  • [管理]メニュー
  • [運用]メニュー
コマースクリエイター構築ガイド
  • はじめてのコマースクリエイター
  • 使いこなそうコマースクリエイター
  • ユーザー画面リファレンス
  • 仕様・初期値
  • 画像登録
  • コマースクリエイターへの移行
決済機能について
外部連携・フィード・API
一括登録・一括取得
  • 一括登録のエラー内容について
  • 商品基本データ
  • 予約データ
  • グループデータ
  • 会員・メールマガジン会員
  • ポイント・クーポン
  • 定期・頒布会データ
  • STAFF START関連
  • 受注データ
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニューガイド
  • まずはじめに
  • [TOP]
  • [commerce creator]メニュー
  • [設定]メニュー
  • [システム]メニュー
  • [管理]メニュー
  • [運用]メニュー
コマースクリエイター構築ガイド
  • はじめてのコマースクリエイター
  • 使いこなそうコマースクリエイター
  • ユーザー画面リファレンス
  • 仕様・初期値
  • 画像登録
  • コマースクリエイターへの移行
決済機能について
外部連携・フィード・API
一括登録・一括取得
  • 一括登録のエラー内容について
  • 商品基本データ
  • 予約データ
  • グループデータ
  • 会員・メールマガジン会員
  • ポイント・クーポン
  • 定期・頒布会データ
  • STAFF START関連
  • 受注データ
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について

オリジナルCSS

コマースクリエイター>テーマ>オリジナルCSS

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

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

目次

オリジナルCSSとは

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

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

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

管理画面メニューよりテーマを表示します。いずれかの テーマから「オリジナル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を保存します。

戻る

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

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

検索条件

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

アイテム一覧項目

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

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

アイテムの容量

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

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

アイテムの追加方法

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

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

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

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

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

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

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

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

アイテム追加ダイアログ

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