Liquid、JavaScriptなどに関する質問
コードについて知識不足なので、教えていただけると助かります。
https://note.com/gooddoctor/n/nce84b2ef484d
こちらの情報を元にグーグルフォントを読み込んで?みました。
「theme.liquid」ファイルにGoogle Fontsのリンクを貼る
は問題なくできたのですが、
③「theme.scsss.liquid」ファイルのfont-familyを書き換え
をしたところ
Undefined variable: "$font-style-header". at 1458
というエラーが出て、レイアウトも崩れてしまいました。
元の表記に書き直したのですがエラーが治りません
該当箇所と思われる部分のコードは以下です
/*================ Typography ================*/
{% assign header_font = settings.type_header_font %}
{% assign base_font = settings.type_base_font %}
{{ header_font | font_face }}
{{ base_font | font_face }}
{%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}
{{ base_font_bold | font_face }}
{{ base_font_bolder | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}
$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-weight-body--bolder: {{ base_font_bolder.weight | default: 700 }};
$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
$font-weight-header: {{ header_font.weight }};
$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
$font-style-body: {{ base_font.style }};
$font-weight-body: {{ base_font.weight }};
$font-size-header: {{ settings.type_header_base_size }} * 1px;
$font-size-base: {{ settings.type_base_size }}px; // Henceforth known as 1em
$font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size-mobile-input: 16px; // min 16px to prevent zooming
原因を教えたいただけると助かります!
恐らくですが、$font-stack-bodyの行が同じ記述で二つあるため、本来は上の方は$font-style-headerの行であったのではと思います。
なお上記があっているか否かにかかわらず、初期状態のテーマの同じファイルの差分を確認し元の記述を調べれば元に戻せるはずです。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024