futureshop FAQ

本サイトは、弊社サービス「futureshop」ご契約店舗様用のFAQサイトです。
お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日10:00~17:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • No : 7335
  • 公開日時 : 2020/05/05 17:59
  • 更新日時 : 2020/06/15 10:36
  • 印刷

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

スムーズに解決できなかった場合、記事改善のため解決できなかった理由をお聞かせください。

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ(平日10:00~17:00)お電話でのお問い合わせ(平日10:00~17:30)
  • メールフォームをご利用くださいお問い合わせフォーム

※弊社サービスと類似した名称の通販サイトとの問い合わせ先間違いが増えております。
 弊社では通販サイトの運営は一切行っておりません。

ページ
トップへ