各項目の文字色・文字サイズ等を変更する方法（CSSを変更する方法）を教えてください

コマースクリエイターご利用店舗様専用の記事です

futureshopでは、
商品名や価格など、各要素の文字サイズや文字色を変更するには、
基本的には、その要素に付与されたclassを指定した「CSS」を設置する必要がございます。

設置が必要なCSSは、ブラウザの検証ツールを使って調べることができます。
ここではGoogle Chromeの検証ツールを使ったCSSの調べ方・設定方法についてご紹介します。

「検証ツール」はページを右クリックし、「検証」より開くことができます。






例えば、商品詳細ページの販売価格￥10,000　の
文字色を青色から赤色に変更して、文字サイズも拡大するためのCSSを調べるには以下の通りです。
　

検証ツールを開くと、このようなソースが記載された画面が
ブラウザ右側(もしくは下側)へ表示されます。

(1)検証ツール左上のをクリックして、(2)ページ上の変更したい要素をクリックすると、
(3)現在その要素に設定されているCSSが表示されます。

(3)の表示どおり、現在　￥10,000　の販売価格に
font-size: 2.2rem;　の文字サイズ
color: #006db8;　の文字色が指定されていることがわかります。



ここから、
font-size:2.2rem;　→　3rem
color: #006db8;　→　#ff0000
と書き換えると、文字サイズが拡大され、色も変更されました。



このような方法で文字サイズや色を変更するためのCSSを調べます。

#ff0000などのカラーコードは、カラーコード隣の ■ をクリックすると確認できます。



最後に、CSSの設置確認が出来ましたら、CSSの内容をコピーします。




コピーした内容を、commerce creator＞テーマ＞利用中テーマ「オリジナルCSS」に貼り付けて保存すると完了です。





■ご参考：Chromeの検証機能（デベロッパーツール）の使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool


これらの方法について、動画でもご紹介しておりますので、ご覧くださいませ。

■ショップの見え方をCSSで変更する方法 【フューチャーショップ コマースクリエイター】
https://www.youtube.com/watch?v=V2r5IL9bDDc