futureshopで使用しているCSSを教えてください。
- 更新日: 2025-08-14 05:57:53 UTC
コマースクリエイター未利用店舗様専用の記事です
futureshopでは、5種類の外部CSSファイルを使用しています。
futureshopの外部CSSファイルの読み込み順序と優先順位
futureshop では、全部で5種類のCSSファイルを読み込んでいます。
<link rel="stylesheet" type="text/css" href="/shop/css/r_system_preset.css"/><link rel="stylesheet" type="text/css" href="/shop/item/*****/design/template0*/css/system_DesignSettings.css"/><link rel="stylesheet" type="text/css" href="/shop/item/*****/design/template0*/css/system_SizeColorSettings.css"/><link rel="stylesheet" type="text/css" href="/shop/item/*****/design/template0*/css/system_LayoutSettings.css"/><link rel="stylesheet" type="text/css" href="/shop/item/*****/design/template0*/css/original.css"/>
※「*****」部は店舗KEYが入ります。
※「template0*」部はご利用いただくデザインによって、「template01」~「template05」で変動します。
構築メニュー>デザイン設定>デザイン設定 の最上段が01、最下段が05となります。
5種類の外部CSSファイルの名前と概要
r_system_preset.css [× 直接編集不可]
futureshopの自動生成ページの基本的なレイアウトなどを設定しているCSSファイルです。
バージョンアップにより新規のパーツやページが追加された際に、本CSSファイルにスタイルが追記されます。
※2014年6月18日以前のご契約店舗様で、旧式テンプレートを利用して構築されている場合、「system_preset.css」のファイル名で出力されます。
system_SizeColorSettings.css [○ 管理画面から編集可]
管理画面で設定したメイン・サブカラー、文字色、サイズなどが反映されます。
構築>デザイン設定>デザイン設定 の編集ボタンを押下した先の「カラー/サイズ編集」にて「上級モード」を利用している場合、
「初級モードでの変更が適応されるCSS(system_SizeColorSettings.css)」欄にて直接編集が可能です。
system_DesignSettings.css [○ 管理画面から編集可]
futureshopの自動生成ページの基本的なレイアウトなどを設定しているCSSファイルです。
バージョンアップにより新規のパーツやページが追加された際に、
付随するスタイルが「テンプレートごとに違う」(色が違う)場合は、本CSSファイルに追記されます。
構築>デザイン設定>デザイン設定 の編集ボタンを押下した先の「カラー/サイズ編集」にて「上級モード」を利用している場合、
「初級モードでの変更が適応されるCSS(system_SizeColorSettings.css)」欄にて直接編集が可能です。
system_LayoutSettings.css [× 直接編集不可]
構築>デザイン設定>デザイン設定 の編集ボタンを押下した先の「レイアウト編集」にて設定した横幅、レイアウトなどが反映されます。
管理画面から数値の変更はできますが、直接CSS を編集することはできません。
original.css [○ 管理画面から編集可]
構築>デザイン設定>デザイン設定 の編集ボタンを押下した先の「オリジナルCSS/JavaScript編集」の
「オリジナルCSSの編集」にて記述されたスタイルが出力されます。
オリジナルCSSの編集に何も記述していない場合は、白紙のCSSファイル です。