CSSファイルの追加方法

公開
CSSファイルの追加方法


CSSファイルの追加方法について解説します!

Dawnだとbase.cssなど既にCSSファイルがあらかじめ作られていますが
それとは別で新しくCSSファイルを追加する方法について解説します。

追加方法はとっても簡単です!!

追加方法

assets(アセット)フォルダ内でcssファイルを作成
※assets(アセット)フォルダ内以外は追加できません。

下記コードでCSSファイルを読み込む

{{ 'ファイル名.css' | asset_url | stylesheet_tag }}

詳しくは以下で解説します!!!

CSSファイルを新しく追加

上記で書いた通り手順はたったの2つ!

①assets(アセット)フォルダ内に追加
②theme.liquidで新しく作ったCSSファイルを読み込ませる

①assets(アセット)フォルダ内に追加

管理画面の販売チャンネルの中の「オンラインストア→テーマ」に入っていただいて

下記画像のようにカスタマイズの横の「・・・」からコード編集画面に入れます

 

「アセット」フォルダ内にファイルを追加します

 

新しいアセットを追加する

 

「空のファイルを作成」→拡張機能「CSS」→ファイル名「custom」を入力し完了を押します
※ファイル名はなんでもいいです

 

新しくCSSファイルが追加されました。

この時点でCSSを編集しても何も反映されませんのでご注意を!

反映させるためにはテーマに読み込ませる必要があるので次で解説します

ちなみにVscodeでしたらassetsフォルダ内に.cssファイルを新規作成するだけです!

①theme.liquidに記述

theme.liquidに以下のコードを記述します

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

たったこれだけです!!
これで①で新規作成したCSSファイルが読み込まれます!

記述する箇所はこちら(headタグ内に記述します)

222行目あたりに記述します。
base.cssを読み込ませている下に書きましょう。

※読み込む順番をbase.cssの後にしないと上書きができないので注意!!

コードの解説

{{ 'ファイル名.css' | asset_url | stylesheet_tag }}

CSSを読み込ませる際2種類のフィルターが使われているので解説します

| asset_url

テーマのassetsディレクトリにあるファイルのCDN URLを返します。

| stylesheet_tag

指定されたURLに対してlinkタグを出力する
(rel="stylesheet" type="text/css" media="all”をもたせて出力)

 

linkタグ内にURLをベタガキでもいいのですがファイル名を入力するだけで読み込みが完了するのでフィルターを使うのをお勧めします!

スニペット登録必須です!!

まとめ

テーマに元々入っているCSSは基本いじらない方がいいです

  • 思わぬところで表示崩れが起きる
  • どこを編集したかわからなくなる
  • 保守管理が大変

など色々と面倒なので、コーディングする際は新しくCSSファイルを作るようにしましょう!

ブログ一覧に戻る