FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

ポリシー表記の文字サイズを小さくしたい

ポリシー表記の文字サイズを小さくしたい

8910
遊覧客
41 0 2

 

デバイスから見た時のポリシー表記の文字サイズ(見出しではなく本文)を小さくしたいです。

テーマはDawnを使用しています。

 

現在、ポリシーへの流入は以下2つのルートが考えられます。

①フッターに設定しているメニューをタップ

②チェックアウト画面で下部に表示されるポリシーをタップ

 

どちらから見た時も今より本文を小さく表示したいです。

できれば左右に余白も少し取りたいです。

 

テーマ設定のタイポグラフィーにある「フォント・サイズ・スケール」は一番小さい100%です。

これよりも小さくしたいと考えております。

 

お忙しいとは思いますが、ご協力頂ける方がいましたらご回答よろしくお願いします。

4件の返信4

Qcoltd
Shopify Partner
1232 496 475

ご質問いただいている、ポリシーのフォントサイズの変更および左右余白の変更をしたい件ですが、①のみであればbase.css等にCSSを記載することで調整が可能です。

②まで変更する場合は、各ポリシーの入力画面右上の「</>」ボタンをクリックしフォントサイズを調整したい部分に直接styleを記載する必要があります。

②につきましては、実際のコードが不明ですので、①についての変更方法を記載させていただきます。

 

base.css等に下記cssを追加いただけましたら、フォントサイズおよび左右余白が調整されます。

.shopify-policy__container {
  font-size: 14px;
}
@media screen and (min-width: 990px) {
  .shopify-policy__container {
    font-size: 16px;
    max-width: 1000px;
  }
}

 

CSSについて

・上部の『font-size: 14px;』はスマートフォンサイズでのフォントサイズとなります。

・下部の『font-size: 16px;』はPCサイズでのフォントサイズとなります。

・『max-width: 1000px;』はPCサイズでのポリシーテキストエリアの最大横幅となります。

各数値をご希望のサイズに変更いただければと思います。

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
8910
遊覧客
41 0 2

返信ありがとうございます!

変更出来ました。ありがとうございます。

 

追加の質問で申し訳ないのですが、ポリシーの見出し(利用規約、配送ポリシーなど)も調整したくなってしまいました。

 

見出しの大きさを小さくする方法も教えて頂けますか?

お忙しいとは思いますが、よろしくお願いします!

Qcoltd
Shopify Partner
1232 496 475

@8910

 

追加でご質問いただきました、ポリシーの見出しは添付画像の赤枠部分の認識で返答させていただきます。

29a925dc-76c4-4c01-9379-921a12aa5c3e.png

赤枠部分のフォントサイズの変更は先日記載しました、CSSを下記に変更いただければ調整が可能です。

.shopify-policy__container {
  font-size: 14px;
}
.shopify-policy__container .shopify-policy__title h1 {
  font-size: 24px;
}
@media screen and (min-width: 990px) {
  .shopify-policy__container {
    font-size: 16px;
    max-width: 1000px;
  }
  .shopify-policy__container .shopify-policy__title h1 {
    font-size: 36px;
  }
}

 

CSSについて

・上部の『font-size: 24px;』はスマートフォンサイズでのフォントサイズとなります。

・下部の『font-size: 36px;』はPCサイズでのフォントサイズとなります。

各数値をご希望のサイズに変更いただければと思います。

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
8910
遊覧客
41 0 2

変更出来ました!

いつもありがとうございます!