block内でPCとスマホ用に文字サイズを変更できるようにしたいです。

日本語 ディスカッション 技術的なQ＆A
,
1

サイズを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 -%}内で上記を指定

例：

①PC用とスマホ用のschemaを作る事は作るのはわかるのですが、②の場合のような分岐はどのように書けばいいのかがわからなくて・・・、

教えていただけると嬉しいです。よろしくお願いいたします。

2

Shopifyのliquidのようなテンプレート言語は、HTMLやcssなどを出力する機能を有しています。

見ているユーザーがPCかモバイルかを識別するのは、cssのメディアクエリでの領域です。

②の方法は、フォントサイズ1点のみ、HTML（のstyle属性）で出力しているだけです。
①自体も、22～38のどれか一つを選ぶための設定項目です。

そのため、font_sizeで指定した1種類の数字が、h2タグに設定されている状態です。

ーー

対処法はいくつかあります。

  1. スマホ用の設定欄「font_size_sp」を設けて、styleタグでPC用、SP用のフォントサイズを出力
{
  "type": "range",
  "id": "font_size",
  "min":  22,
  "max":  38,
  "step":  1,
  "unit": "px" ,
  "label": "Font size",
  "default":  22
},
{
  "type": "range",
  "id": "font_size_sp",
  "min":  22,
  "max":  38,
  "step":  1,
  "unit": "px" ,
  "label": "Font size sp",
  "default":  22
},

{% style %}
h2.title {
  font-size: {{ block.settings.font_size_sp }}px;
}
@media screen and (min-width: 750px){
  h2.title {
    font-size: {{ block.settings.font_size }}px;
  }
}
{% endstyle %}

## ******
  1. PCのフォントサイズに倍率を設定
{% style %}
h2.title {
  font-size: {{ block.settings.font_size }}px;
}
@media screen and (min-width: 750px){
  h2.title {
    font-size: 110%;
  }
}
{% endstyle %}

## ******

スマホのフォントサイズ、例えば20pxに設定していたならば、 PCは20px × 110% = 22pxで表示されます。

※ css絡みは他の記述が絡むため、計算通りにならない可能性があります。

schemaでの設定項目を増やしたくない時などに。

Dawnテーマでは、上記のような倍率を用いてフォントサイズを変更させています。