FROM CACHE - jp_header
解決済

ブロック内でフォントのサイズや種類などを変えられるようにしたいです。

Kuroda96
Shopify Partner
14 0 0

Dawnテーマを使用しています。リッチテキストや画像バナーなどで使われている見出しやテキストブロックの文字の大きさやフォントなどをブロック内で自由に変更できるようにしたいです。base.cssでfont-sizeを指定することで文字の大きさを変えることはできたのですが、全てのブロックで変更されてしまいます。セクションのliquidやcssでフォントサイズを変更しようとしても反映されませんでした。

個々のブロックでのフォントサイズなどの変更、またテーマのカスタマイズで簡単に変更が行えるようにしたいです。liquidのstyleタグ内にschemaのnumberやrangeの値を反映させてフォントサイズを変更できるようにしたいです。

ご教示よろしくお願いいたします。

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1466 519 651

成功

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;">

 

よろしくお願いします。

 

フルバランス 園畑

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1466 519 651

成功

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;">

 

よろしくお願いします。

 

フルバランス 園畑

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
Kuroda96
Shopify Partner
14 0 0

ご回答ありがとうございます。

質問した後に自分でも色々試して同じ方法に辿り着きました。