futureshop FAQ

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

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

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

コマースクリエイター用の開店ガイドできました!

はじめてのコマースクリエイター!ショップ開店ガイド

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

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

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

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

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

ページ
トップへ