Liquid、JavaScriptなどに関する質問
Dawnテーマを使用しています。リッチテキストや画像バナーなどで使われている見出しやテキストブロックの文字の大きさやフォントなどをブロック内で自由に変更できるようにしたいです。base.cssでfont-sizeを指定することで文字の大きさを変えることはできたのですが、全てのブロックで変更されてしまいます。セクションのliquidやcssでフォントサイズを変更しようとしても反映されませんでした。
個々のブロックでのフォントサイズなどの変更、またテーマのカスタマイズで簡単に変更が行えるようにしたいです。liquidのstyleタグ内にschemaのnumberやrangeの値を反映させてフォントサイズを変更できるようにしたいです。
ご教示よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
Kuroda96さま
個々のブロックで値を変更したいようでしたら、
liquidファイルの{%- for block in section.blocks -%} ~ {%- endfor -%}の間で処理を行う必要があります。
一案ですが、下記の手順でいかがでしょうか?
①SchemaのBlocks内で下記指定(指定内容は任意)
{
"type": "range",
"id": "font_size",
"min": 22,
"max": 38,
"step": 1,
"unit": "px" ,
"label": "Font size",
"default": 22
},
②コードの{%- for block in section.blocks -%} ~ {%- endfor -%}内で上記を指定
例:<h2 style="font-size: {{ block.settings.font-size }}px;">
よろしくお願いします。
フルバランス 園畑
成功
Kuroda96さま
個々のブロックで値を変更したいようでしたら、
liquidファイルの{%- for block in section.blocks -%} ~ {%- endfor -%}の間で処理を行う必要があります。
一案ですが、下記の手順でいかがでしょうか?
①SchemaのBlocks内で下記指定(指定内容は任意)
{
"type": "range",
"id": "font_size",
"min": 22,
"max": 38,
"step": 1,
"unit": "px" ,
"label": "Font size",
"default": 22
},
②コードの{%- for block in section.blocks -%} ~ {%- endfor -%}内で上記を指定
例:<h2 style="font-size: {{ block.settings.font-size }}px;">
よろしくお願いします。
フルバランス 園畑
ご回答ありがとうございます。
質問した後に自分でも色々試して同じ方法に辿り着きました。
ユーザー | ランク |
---|---|
38 | |
17 | |
14 | |
11 | |
5 |
東京都渋谷区代々木で30年以上、プランニングとグラフィックデザイン制作を営んでいる株式会社キュー。自社のアパレル事業やWeb制作・開発事業なども展開し、社員数が100名と小規模なが...
By rinaflora Sep 17, 2023お客様の検索はもちろん、消費行動によってセグメント管理することで、より効果的なマーケティングを行うことができます。今回は、便利な検索機能やセグメントの作成方法をご紹介!
By Alex06 Sep 3, 2023Shopifyでは多数の言語のサポートと、選択肢が提供されていることをご存知でしょうか?新しく導入されたサポートインボックスの詳細や、ヘルプセンターよりチャットを開始する方法など...
By Mirai Aug 20, 2023