Dawnテーマを使用しているユーザーが、リッチテキストや画像バナーなどの個々のブロックごとにフォントサイズやフォント種類を変更できるようにする方法を質問しています。
解決方法:
{%- for block in section.blocks -%} ~ {%- endfor -%} の間で処理を行う必要がある<h2 style="font-size: {{ block.settings.font_size }}px"> のように指定追加の質問:
別のユーザーから、PCとスマホでフォントサイズを分けて調整したい場合の方法について質問が出ています。メディアクエリを使った分岐方法についての回答待ちの状態です。
元の質問者は自分でも同様の方法に辿り着いたと報告しています。
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 -%}内で上記を指定
例：
よろしくお願いします。
フルバランス 園畑
ご回答ありがとうございます。
質問した後に自分でも色々試して同じ方法に辿り着きました。
こちらの投稿にご質問があります。
サイズをschemaで調整できるようにすることはこちらの投稿でわかったのですが、
フォントのサイズをPCとスマホを分けて調整したい場合はどうすればよろしいのでしょうか？
①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 -%}内で上記を指定
例：
①はスマホ用も新たに作るのは想像できるのですが、②の場合スマホ用を作る場合は分岐はどのように書けばいいのかがわからなくて・・・
教えていただけると嬉しいです。よろしくお願いいたします。