Shopifyストアを運営していると、「ボタンの色だけブランドカラーに変えたい」「この部分の文字だけ少し大きくしたい」といった、細かなデザイン調整をしたくなることはありませんか？テーマ設定だけでは手が届かない、そんな部分的な変更を安全かつ簡単に実現するのが「カスタムCSS」です。この記事では、専門知識がなくても挑戦できる、カスタムCSSの追加方法と具体的な記述例を解説します。
カスタムCSSとは？基本を解説
まず、CSSが何なのか、そしてなぜ「カスタム」なのかを簡単に理解しましょう。難しく考える必要はありません。
サイトの見た目を整える言語
CSSとは、ウェブサイトの文字色や大きさ、背景、配置といった「見た目（スタイル）」を指定するための言語です。Shopifyのテーマも、このCSSによってデザインが作られています。
なぜ「カスタム」CSSなのか
「カスタムCSS」とは、テーマにもともとあるCSSに加えて、自分だけのCSSルールを「追加」で書き込む機能のことです。既存の設計図に、自分の要望を付箋で貼っていくようなイメージです。
安全にデザインを上書きする
テーマの元ファイルを直接編集しないため、万が一失敗しても、追加したコードを消すだけで元に戻せます。これが、初心者にとって最も安全にデザインを調整できる理由です。
テーマカスタマイザーから追加する
最新のShopifyテーマの多くには、コード編集画面を開かずにCSSを追加できる機能が備わっています。これが最も安全で簡単な方法です。
①テーマカスタマイザーを開く
Shopify管理画面から「オンラインストア」＞「テーマ」へ進み、編集したいテーマの「カスタマイズ」ボタンをクリックします。
②「カスタムCSS」の項目を探す
テーマカスタマイザーが開いたら、左側のメニュー下部にある歯車アイコンの「テーマ設定」をクリックします。メニューの中から「カスタムCSS」という項目を探してください。
③コードを記述して保存する
専用の入力欄が表示されるので、そこに変更したい内容のCSSコードを記述します。コードを入力すると、右側のプレビュー画面にリアルタイムで変更が反映されるので、確認しながら作業できます。問題なければ右上の「保存」を押して完了です。
CSSコードの簡単な書き方例
ここでは、コピーしてすぐ使える、よくあるデザイン変更のCSSコードを紹介します。
ボタンの色を変えるコード
例えば、カート投入ボタンの背景色と文字色を変更したい場合です。多くの場合、下記のようなコードで変更できます。
CSS
/* カートボタンの背景を黒、文字を白にする */
.product-form__submit {
background-color: #000000 !important;
color: #ffffff !important;
}
文字のサイズや色を変える
特定の見出しの色をブランドカラーの赤色に変えたい、といった場合のコードです。
CSS
/* 商品ページのH2見出しを赤色にする */
.product__title h2 {
color: #ff0000;
}
変更したい場所の探し方（ヒント）
「ボタンのクラス名が分からない」という場合は、Google Chromeの「検証」機能が便利です。変更したい要素の上で右クリックし「検証」を選択すると、その要素のHTMLと適用されているCSSを確認できます。
まとめ
Shopifyの「カスタムCSS」機能を使えば、テーマのコードファイルを直接触るリスクを冒さずに、ストアの細かなデザイン調整が可能です。「ボタンの色を変えたい」「文字の大きさを調整したい」といった悩みは、テーマカスタマイザーのCSS入力欄で解決できます。もし表示がおかしくなっても、追加したコードを消すだけで元通りになるので、安心してあなただけのストアデザインに挑戦してみてください。
コメント