FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

テーマをコピーするとCSSが反映されない現象

解決済

テーマをコピーするとCSSが反映されない現象

mwhr126
Shopify Partner
17 0 1

現在のテーマのバックアップを取るため、「管理画面から複製」をすると、複製したテーマのCSSが崩れた状態で複製されてしまいます。

 

ただ複製をしても、そのままコードも複製されるはずですが、何故CSSが崩れた状態(一部反映されない状態)で複製がされてしまうのか原因が不明です。

 

この謎の現象に対して分かる方が見えましたら、お教えいただけますと幸いです。

 

お手数お掛けいたしますが、よろしくお願い致します。

1 件の受理された解決策

Qcoltd
Shopify Partner
1125 456 449

成功

私自身は、複製によるスタイルの崩れに遭遇したことがないため、

見当違いの回答であれば申し訳ございません。

 

私が時折、遭遇する次の現象と関係があるかもしれません。

 

下記のようにCSSを記述した場合、

(参考: https://shopify.dev/api/liquid/tags/theme-tags )

{% stylesheet %}
  css_styles
{% endstylesheet %}

{% stylesheet %}内の内容をいかに変更しても、

ストアフロント上では、

その変更が反映されないことがあります。

しかし、下記のような記述があった場合に、

<div class="box">
  <p>テキストテキスト</p>
</div>

{% stylesheet %}
  css_styles
{% endstylesheet %}

下記のように変更を加えて保存すると、{% stylesheet %}内の変更が反映されます。

(<div class="box">の下に改行を追加しただけです。)

<div class="box">

  <p>テキストテキスト</p>
</div>

{% stylesheet %}
  css_styles
{% endstylesheet %}

 

少し古い投稿ですが、同様の現象は海外のShopifyコミュニティでも報告されているようです。

https://community.shopify.com/c/shopify-design/section-edits-not-updating-stylesheet-and-javascript/...

 

この{% stylesheet %}を使用してCSSを記述しますと、

{% stylesheet %}の内容が、特定の外部のCSSファイルに出力されるようです。

 

もう少し、具体的に申しますと、

<style>タグで、htmlの中に現れるのではなく、

https://cdn.shopify.com/s/files/x/xxxx/xxxx/xxxx/x/x/compiled_assets/styles.css

のようなURLのCSSファイルに出力されます。

(URLを考慮すると、出力されるというよりコンパイルされる、といった方が正確かもしれません。)

 

{% stylesheet %}内を変更しただけでは、

コンパイルが行われず、この外部CSSファイルが更新されないことがある、

のだと個人的に考えています。

 

もしかしたら、

これと似たようなことが「複製」でも発生するのかもしれません。

 

上記、海外コミュニティの投稿にあるように、

これが原因である場合、

関連するliquidの{% stylesheet %}や{% javascript %}以外の箇所に、

何かしら変更を加えれば(例えば、改行を1つ追加するなど)、

スタイルの崩れが解決するかもしれません。

 

もし、

{% stylesheet %}を使用していないようでしたら、

この回答は、全くの見当違いとなりますので、

スルーしていただければと思います。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1125 456 449

成功

私自身は、複製によるスタイルの崩れに遭遇したことがないため、

見当違いの回答であれば申し訳ございません。

 

私が時折、遭遇する次の現象と関係があるかもしれません。

 

下記のようにCSSを記述した場合、

(参考: https://shopify.dev/api/liquid/tags/theme-tags )

{% stylesheet %}
  css_styles
{% endstylesheet %}

{% stylesheet %}内の内容をいかに変更しても、

ストアフロント上では、

その変更が反映されないことがあります。

しかし、下記のような記述があった場合に、

<div class="box">
  <p>テキストテキスト</p>
</div>

{% stylesheet %}
  css_styles
{% endstylesheet %}

下記のように変更を加えて保存すると、{% stylesheet %}内の変更が反映されます。

(<div class="box">の下に改行を追加しただけです。)

<div class="box">

  <p>テキストテキスト</p>
</div>

{% stylesheet %}
  css_styles
{% endstylesheet %}

 

少し古い投稿ですが、同様の現象は海外のShopifyコミュニティでも報告されているようです。

https://community.shopify.com/c/shopify-design/section-edits-not-updating-stylesheet-and-javascript/...

 

この{% stylesheet %}を使用してCSSを記述しますと、

{% stylesheet %}の内容が、特定の外部のCSSファイルに出力されるようです。

 

もう少し、具体的に申しますと、

<style>タグで、htmlの中に現れるのではなく、

https://cdn.shopify.com/s/files/x/xxxx/xxxx/xxxx/x/x/compiled_assets/styles.css

のようなURLのCSSファイルに出力されます。

(URLを考慮すると、出力されるというよりコンパイルされる、といった方が正確かもしれません。)

 

{% stylesheet %}内を変更しただけでは、

コンパイルが行われず、この外部CSSファイルが更新されないことがある、

のだと個人的に考えています。

 

もしかしたら、

これと似たようなことが「複製」でも発生するのかもしれません。

 

上記、海外コミュニティの投稿にあるように、

これが原因である場合、

関連するliquidの{% stylesheet %}や{% javascript %}以外の箇所に、

何かしら変更を加えれば(例えば、改行を1つ追加するなど)、

スタイルの崩れが解決するかもしれません。

 

もし、

{% stylesheet %}を使用していないようでしたら、

この回答は、全くの見当違いとなりますので、

スルーしていただければと思います。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
mwhr126
Shopify Partner
17 0 1

株式会社Q (キュー)

田辺様

 

ご丁寧にお返事いただき、誠にありがとうございます。

 

もしかしたら{% stylesheet %}内に余計なコードが入ってしまっているのかもしれません。

 

{% stylesheet %}内にコードの記述が残っているかは分かりませんが、今後は一貫してアセットフォルダ内にcssファイルを作成して作業を進めると、今回のようなエラーが起こらないのではないかと推測しております。

 

この度は原因のソースとなる記事も添えて、ご回答をいただき感謝いたします。