Liquid、JavaScriptなどに関する質問
デバイスから見た時のポリシー表記の文字サイズ(見出しではなく本文)を小さくしたいです。
テーマはDawnを使用しています。
現在、ポリシーへの流入は以下2つのルートが考えられます。
①フッターに設定しているメニューをタップ
②チェックアウト画面で下部に表示されるポリシーをタップ
どちらから見た時も今より本文を小さく表示したいです。
できれば左右に余白も少し取りたいです。
テーマ設定のタイポグラフィーにある「フォント・サイズ・スケール」は一番小さい100%です。
これよりも小さくしたいと考えております。
お忙しいとは思いますが、ご協力頂ける方がいましたらご回答よろしくお願いします。
ご質問いただいている、ポリシーのフォントサイズの変更および左右余白の変更をしたい件ですが、①のみであれば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サイズでのポリシーテキストエリアの最大横幅となります。
各数値をご希望のサイズに変更いただければと思います。
ご参考まで。
(キュー小坂)
返信ありがとうございます!
変更出来ました。ありがとうございます。
追加の質問で申し訳ないのですが、ポリシーの見出し(利用規約、配送ポリシーなど)も調整したくなってしまいました。
見出しの大きさを小さくする方法も教えて頂けますか?
お忙しいとは思いますが、よろしくお願いします!
追加でご質問いただきました、ポリシーの見出しは添付画像の赤枠部分の認識で返答させていただきます。
赤枠部分のフォントサイズの変更は先日記載しました、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サイズでのフォントサイズとなります。
各数値をご希望のサイズに変更いただければと思います。
ご参考まで。
(キュー小坂)
変更出来ました!
いつもありがとうございます!
東京都渋谷区代々木で30年以上、プランニングとグラフィックデザイン制作を営んでいる株式会社キュー。自社のアパレル事業やWeb制作・開発事業なども展開し、社員数が100名と小規模なが...
By rinaflora Sep 17, 2023お客様の検索はもちろん、消費行動によってセグメント管理することで、より効果的なマーケティングを行うことができます。今回は、便利な検索機能やセグメントの作成方法をご紹介!
By Alex06 Sep 3, 2023Shopifyでは多数の言語のサポートと、選択肢が提供されていることをご存知でしょうか?新しく導入されたサポートインボックスの詳細や、ヘルプセンターよりチャットを開始する方法など...
By Mirai Aug 20, 2023