new_window arrow_01 arrow_02 arrow_03 arrow_04 arrow_05 arrow_06 arrow_07 arrow_08 arrow_09 menu close metaphase facebook instagram twitter tumblr logo_metaphase

[Shopfiy]CSSのbackground-image

Other

2022.07.04

メタフェイズではShopifyを利用したストア構築を行っています。
今回はassets内のCSSのbackground-imageの扱いを紹介いたします。

 
assets内のcssのbackground-imageなどでassets内の画像を読み込んでいる場合、該当箇所をLiquidへ書き換える必要があります。
assets/styles.cssというファイルがある場合assets/styles_.css.liquidへコピーします。※ファイル名は任意
次に

background-image: url("./mod_img_sprite.png");

上記を

background-image: url("{{ "mod_img_sprite.png" | asset_url }}");

へ書き換えます。

そして、Liquidテンプレート内のCSS読み込み部分を

{{ 'styles_.css' | asset_url | stylesheet_tag }}

へ書き換えます。

 
Shopifyを利用したストアの構築・運用のご相談はお問い合わせフォームより受け付けております。

 

 

最新のブログ記事