# 通知メールにスタイルをcssファイルから追加したい

**URL:** <https://community.shopify.com/t/css/19146>\
**Category:** 技術的なQ＆A\
**Created:** [August 27, 2020, 7:46am UTC](https://community.shopify.com/t/css/19146 "2020-08-27T07:46:31Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

通知メールのデザイン変更方法が話題。主な論点は、既存の`/assets/notifications/styles.css`を編集できるか、または新規CSSファイルを読み込めるか、という点です。

- 結論として、案内された公式ヘルプでは**インラインCSS**の利用が推奨されています。
- 通知メールでは標準スタイルシートを上書きできますが、**外部スタイルシートやテーマアセットのCSSはインライン展開されず、推奨もされていない**と説明されています。

代替案として、`shop.metafields`にCSS文字列を保存し、テンプレートの`head`内で`<style>{{ shop.metafields... }}</style>`のように差し込む方法が紹介されました。プレビュー上では動作したものの、運用面や適切性には不確実さが残るとの補足があります。

最終的に、質問者は今回は**推奨どおりインラインCSSで編集する**方針を選択。CSSファイルの追加・読込については明確な実現方法は示されず、将来的な対応に期待する形で締めくくられています。

<div class="post-metadata">

**Author:** ![yokiyoki](https://avatars.discourse-cdn.com/v4/letter/y/bb73d2/32.png) [@yokiyoki](https://community.shopify.com/u/yokiyoki)\
**Post date:** [August 27, 2020, 7:46am UTC](https://community.shopify.com/t/css/19146/1 "2020-08-27T07:46:31Z")

</div>

通知メールにオリジナルのスタイルを追加したいです。

•メールのテンプレートには、下記cssファイルが読み込まれているので編集したいのですが方法がわかりません。編集は可能なのでしょうか？

•またそれが無理な場合、新規でCSSファイルを作りそれをテンプレートに読み込ませたいのですがそれは可能でしょうか？  
可能な場合、どこにファイルを作れば良いか、読み込ませるコード教えていただけないでしょうか？

•また上記の方法がどちらも無理な場合、インラインスタイルを利用する以外の方法はあるでしょうか？

ご回答のほどよろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [August 27, 2020, 8:26am UTC](https://community.shopify.com/t/css/19146/2 "2020-08-27T08:26:27Z")

</div>

下記のヘルプの「インラインCSSを使用したスタイルメールテンプレート」に情報があります。

[https://help.shopify.com/ja/manual/orders/notifications/edit-template](https://help.shopify.com/ja/manual/orders/notifications/edit-template)

> インラインCSSを使用して、標準スタイルシートを上書きし、メールテンプレートのスタイルを設定することができます。標準スタイルシートはです。テンプレートエディタのテンプレートには自動的にスタイルタグがインライン展開されます。ここにメディアクエリを保存し、迅速かつ簡単にメールを作成することができます。外部のスタイルシートやテーマアセットの組み込まれたアップロード済みのスタイルシートはインライン展開されません。そのためCSSをデザインする際は、テンプレートの部分に

linkタグで外部スタイルシートを読み込めそうではありますが推奨されておらず、head内へのインラインCSSが推奨されています。

なお、試しましたら一応以下のようなことはできました。

- shop.metafieldsにCSSの記述を作成(例えばshop.metafields.hoge.fugaに「\*{background:red;}」と入力)
- メールテンプレート内のheadに{{ shop.metafields.hoge.fuga }}のように記載

上記状態でプレビューすると背景が赤になっていると思います。

この方法であればCSSはメタフィールドで一括管理できますが、やって良いことなのか、運用しやすいのかに関してはあまり自信はありません。

---

<div class="post-metadata">

**Author:** ![yokiyoki](https://avatars.discourse-cdn.com/v4/letter/y/bb73d2/32.png) [@yokiyoki](https://community.shopify.com/u/yokiyoki)\
**Post date:** [August 27, 2020, 10:52am UTC](https://community.shopify.com/t/css/19146/3 "2020-08-27T10:52:11Z")

</div>

jizo様  
早速のご回答と、新しい方法についてありがとうございました！  
Metafieldsについては全く想定してなかったので勉強になりました。

今回は念のため推奨方法で編集して、そのうちCSSファイルを追加できるようになるのを期待しておきます。