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

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

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

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

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






例えば、商品詳細ページの　1,100円(税込)　の
文字色を紺色から赤色に変更して、文字サイズも拡大するためのCSSを調べるには以下の通りです。

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

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

(3)の表示どおり、現在「1,100円」の
販売価格のクラス「.FS2_body_Goods_GoodsDetail .itemPrice」に
color: #000099;の文字色が指定されていることがわかります。



ここから、color: #000099; をクリックして、
　　color: #ff0000;　
に書き換え、更に
　　font-size: 20px ;
を追加すると、色が変更され、文字サイズも拡大されました。



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

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



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




コピーした内容を、
PC：構築メニュー＞デザイン設定＞選択中デザインの「編集」＞オリジナルCSS/JavaScript編集

貼り付けて登録すると完了です。





スマートフォンの場合は、
検証ツール上の(1)をクリックして、(2)でiPhone Xなどのデバイスを選択し、
(3)キーボードのF5キーでページの更新を行うと、スマートフォンの画面が確認できます。



CSSは
スマートフォン：モバイル＞デザイン設定
に貼り付けて登録してください。




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