• No : 7335
  • 公開日時 : 2020/05/05 17:59
  • 更新日時 : 2022/01/13 15:10
  • 印刷

各項目の文字色・文字サイズ等を変更する方法(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