こんにちは、しのです。
新たに作成したshopifyの固定ページにCSSを追加したいんですけど、どうやって作って適用すればいいかわかりません。誰か教えてください。
今回はこちらの課題を解決する内容となっています
Shopifyで固定ページを作ってCSSを適用する場合、管理画面からカスタムCSSを適用する方法もありますが、開発の観点から言うとスマートではありません。
特に大量にCSSを記述する場合はローカルでCSSを書いてファイルベースで管理できた方が良いですよね。
dawnなどの既に出来上がっている
ここでは独自の固定ページにCSSを追加し、ページに反映させる流れを見ていきましょう！
こんな方におすすめの記事です
・Shopifyで独自の固定ページを作りたい人
・Shopifyの固定ページにCSSを付与したい人
・ShopifyでCSSを付与するための基本が知りたい人
Shopifyで固定ページにCSSを追加、修正する方法
今回の課題としてあげられるケースは以下のようなケースです。
現在と解決したい課題
・独自の固定ページのJSONファイルとliquidファイルは作成済み
・作成した固定ページにだけ付与するCSSを書きたい
ShopifyでCSSを書く場合は3種類の書き方があります。
ShopifyのCSSの書き方
①管理画面のカスタムCSSに記述する
② assets フォルダに CSS ファイルを追加
③base.css にまとめて追記
以下にそれぞれの特徴やメリット、デメリットを記述しました
| 方法 | 特徴 | メリット | デメリット |
|---|---|---|---|
| ① 管理画面のカスタム CSS | Shopify 管理画面から直接編集 | 手軽・即反映 | 規模が大きくなると管理が煩雑に |
| ② assets フォルダに CSS ファイルを追加 | ページごと・セクションごとに分けて管理 | ファイルで整理しやすい / バージョン管理◎ / 他ページに影響しない | ファイルが増えると読み込み管理が必要 |
| ③ base.css にまとめて追記 | 共通スタイルの CSS ファイルにまとめて記述 | シンプル・共通の基本スタイルに向いてる | ページごとの管理が難しい / 肥大化リスクあり |
① Shopify 管理画面のカスタム CSS
Shopify の管理画面から、テーマエディタで直接 CSS を追加できます。
「ちょっとデザインを調整したい」「開発環境を触れない」
そんなときに便利です。
使い方： 管理画面 → テーマ → 「カスタマイズ」 → 「テーマ設定」→ 「カスタム CSS」となります。
以下の画像の右側にある部分がカスタムCSSの記述箇所となります。
記述するスペースも心なしか小さ目で、あくまで簡易的に少しのコードを記述するようにしてね、という時に使うイメージですね
注意点
- ページごとの出し分けができない
- 多くなるとどこで何を書いたか分からなくなる
次にassetsフォルダにテンプレートごとのCSSを塚していく方法です。
② assetsフォルダに CSS ファイルを追加
こちらが開発者目線で一番スマートな方法です。
Shopify テーマのコード編集でassets フォルダに CSS ファイルを追加してもよいですし、ローカルで書いても反映する形でも構いません。
-
-
【Shopifyテスト環境構築】ローカルで修正した内容をGitHub経由でテスト環境に反映する方法
続きを見る
デフォルトではassetsの下にcssディレクトリは無いため、新たに作ってあげる必要があります
例
assets/css/page-company.css
こちらをlayoutディレクトリのtheme.liquidに以下のように条件付きで読み込みましょう。
{% if template == 'page.custom-company' %}
{{ 'css/page-company.css' | asset_url | stylesheet_tag }}
{% endif %}
dawnのデフォルトの場合は以下のように記述しましょう。
{{ 'base.css' | asset_url | stylesheet_tag }}
{%- if template == 'page.custom-company' -%}
{{ 'css/page-company.css' | asset_url | stylesheet_tag }}
{%- endif -%}
<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if settings.cart_type == 'drawer' -%}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{%- endif -%}
この方法はページ単位で管理できるので、拡張や修正も楽です。
ポイント
こんな人におすすめ
- 複数ページを作る人
- LP やキャンペーンページを量産する人
- 開発チームで運用する人
メリット
Git などでバージョン管理しやすい
管理しやすく、保守しやすい
他ページに影響しない
③ base.css にまとめて記述
もともとテーマで使われている CSS にまとめて追加する方法です。
たとえば assets/base.css に直接追記します。
ポイント
特徴：
- テーマ全体のスタイルをまとめるのに向いている
- ページ単位での管理はしづらい
注意点：
ページごとのカスタマイズには向いていない
CSS が肥大化していくとメンテナンスが大変
結論：開発者は assetsフォルダに CSS ファイルを追加がベスト！
・Shopify テーマ開発で CSS をしっかり管理するなら
→ assets フォルダにファイルを分けてページ単位で管理
・ページごとにスコープする CSS クラスを付ける
→ <body class="template-page-company"> のようにユニーククラスを付与
・必要なページだけで CSS を読み込む
→ Liquid の条件分岐で必要な CSS だけ読み込む！
これが Shopify テーマ開発でのベストプラクティスです。
まとめ
Shopify テーマ開発は「コードの管理のしやすさ」が超重要です。
特にオリジナルの固定ページやランディングページを量産していく場合は、CSS ファイルをページ単位でしっかり分けて管理することが成功のカギです。
自分の制作スタイルに合わせて CSS 管理方法を選びましょう。
というわけで本日の記事は以上です。