makeshopのカテゴリページは、すべてのカテゴリで1つのテンプレートを共有しています。それでも、クリエイターモードでカテゴリIDを呼び出す変数タグ <{$category.code}> を使えば、カテゴリごとに違う見た目にできます。この記事では、条件分岐・CSSでの出し分け・画像の切り替えという3つの方法を手順に分けて説明し、実装例と反映されないときの対処までまとめます。

カテゴリ別デザインの鍵は「カテゴリID」

結論から言うと、カテゴリページを個別にデザインする方法は「テンプレートを分ける」のではなく「1つのテンプレートの中でカテゴリIDによって出し分ける」です。テンプレート自体は増やせない仕様なので、分岐で対応するのが前提になります。

使う変数タグ

使うのは <{$category.code}> という変数タグ1つだけです。表示中のページのカテゴリID（ct1、ct2 など）が入るので、これを条件式に使ったり、class名の一部として埋め込んだりします。

カテゴリIDを確認する

カテゴリIDは商品管理画面のカテゴリー設定で確認できます。ct1、ct2のような形式で割り振られており、この値を条件やclass名にそのまま使います。実装前に、対象カテゴリのIDをメモしておいてください。IDの取り違えは、後述するトラブルの原因で最も多いものです。

編集する場所

ショップデザインのテンプレート選択・編集からクリエイターモードに入り、「商品カテゴリー」のHTML欄を開きます。ここが、すべてのカテゴリページで共通に使われるテンプレートです。作業前に、現在のコードをテキストファイルに控えておいてください。

やり方は3通りあります。それぞれ向き不向きがあるので、順に見ていきます。

方法1｜条件分岐で特定カテゴリだけに表示する

もっとも直感的なのが条件分岐です。指定したカテゴリのページでだけ、特定の内容を表示します。

基本の書き方

<{if $category.code == 'ct1'}>
ct1のページにだけ表示します。
<{/if}>

条件を書き、表示したい内容を挟み、必ず <{/if}> で閉じます。閉じ忘れると、それ以降のページ全体が崩れることがあります。

複数のカテゴリをまとめて指定する

「または」は ||、「かつ」は &&、「以外」は != で指定します。

<{if $category.code == 'ct1' || $category.code == 'ct2'}>
ct1とct2のページに表示します。
<{/if}>

<{if $category.code != 'ct1'}>
ct1以外のすべてのページに表示します。
<{/if}>

「それ以外」を書き分ける

条件に合うときと合わないときで内容を変えたい場合は、<{else}> を挟みます。特定カテゴリだけ別のバナーを出し、他は共通バナーにする、といった使い方です。

<{if $category.code == 'ct1'}>
<img src="banner-sale.jpg" alt="セール">
<{else}>
<img src="banner-default.jpg" alt="お知らせ">
<{/if}>

この方法が向いている場面

特定カテゴリにだけバナーや注意書きを出したい場合に向いています。たとえば「冷蔵商品」のカテゴリにだけ配送についての説明を出す、といった使い方です。ただし、対象カテゴリが増えるたびにコードが伸びていくため、多用するとテンプレートが読みにくくなります。

方法2｜classやidに埋め込んでCSSで出し分ける

実務でもっとも使いやすいのがこの方法です。HTMLは全カテゴリ共通のまま、id や class にカテゴリIDを埋め込んでおき、見た目の差はCSS側で指定します。

ステップ1｜HTMLにカテゴリIDを埋め込む

<div id="category-<{$category.code}>">
  内容を入力
</div>

これで、ct1のページでは id="category-ct1"、ct2のページでは id="category-ct2" が出力されます。

ステップ2｜出力を確認する

CSSを書く前に、ブラウザの検証機能でid属性を確認してください。想定どおりのIDが出ていれば、あとはCSSを当てるだけです。ここを飛ばすと、CSSが効かない原因がHTML側なのかCSS側なのか分からなくなります。

ステップ3｜CSSでカテゴリごとの装飾を書く

#category-ct1 { background: #f4f9f4; }
#category-ct1 h2 { color: #2e7d4f; }

#category-ct2 { background: #f7f4fb; }
#category-ct2 h2 { color: #5b4b8a; }

背景色だけでなく、見出しの色、ボタンの色、区切り線の装飾など、そのカテゴリ配下の要素をまとめて指定できます。カテゴリごとに世界観を変えたいときに有効です。

classとidの使い分け

1ページに1つしか存在しない大きな囲みならid、繰り返し使う要素ならclassを使います。商品一覧の各カードにカテゴリ名を付けたいような場合はclassのほうが扱いやすくなります。

この方法を第一候補にする理由

HTMLを1本に保てるので、あとから修正する箇所が1か所で済むためです。カテゴリが10個あっても20個あっても、テンプレート側のコードは変わりません。増えるのはCSSの行数だけで、CSSはHTMLより壊れにくく、事故ったときの影響範囲も限定的です。

方法3｜画像のファイル名に埋め込む

カテゴリごとにバナーやアイコンを差し替えたいだけなら、画像のファイル名に変数タグを埋め込む方法が最短です。

ステップ1｜命名規則を決めて画像を用意する

「icon-ct1.png」「icon-ct2.png」のように、カテゴリIDを含む名前で画像を作ります。接頭辞（icon-、banner- など）は用途ごとに統一しておくと、後から見て分かりやすくなります。

ステップ2｜ファイルサーバーにアップロードする

makeshopのファイルサーバーへアップロードします。全カテゴリ分をまとめて上げておくと、後述のリンク切れを防げます。

ステップ3｜テンプレートに1行書く

<img src="https://gigaplus.makeshop.jp/ショップID/icon-<{$category.code}>.png">

コードを1行書くだけで、カテゴリの数だけ画像が自動で切り替わります。カテゴリが増えたときも、同じ命名規則で画像を追加するだけで済むのが利点です。

リンク切れを防ぐ

この方法の弱点は、画像が存在しないカテゴリで画像リンク切れになることです。対策は2つあります。全カテゴリ分の画像を必ず用意して運用ルールにするか、条件分岐で「画像を用意したカテゴリだけ表示する」形にするかです。カテゴリの追加が頻繁なショップでは、後者のほうが安全です。

よくある実装例

実際の依頼で多いパターンを4つ挙げます。どの方法を使うかの参考にしてください。

例1｜カテゴリごとのキービジュアルを出す

方法3が最適です。命名規則を決めて画像を並べるだけで、テンプレートは1行で済みます。

例2｜特定カテゴリにだけ配送の注意書きを出す

方法1が向いています。冷蔵・冷凍商品、大型商品など、条件が特殊なカテゴリだけに説明を出すケースです。対象が2〜3カテゴリなら条件分岐で十分です。

例3｜カテゴリごとにページの色味を変える

方法2です。id・classにカテゴリIDを埋めておき、CSSで背景色・見出し色・ボタン色を切り替えます。カテゴリが増えてもCSSを足すだけで対応できます。

例4｜特定カテゴリだけ要素を隠す

方法2で対応できます。#category-ct1 .review-area { display: none; } のように、そのカテゴリでだけ非表示にする指定を書きます。条件分岐でHTMLごと消すより、CSSで制御したほうが元に戻しやすくなります。

3つの方法の使い分け

制作の現場では、装飾はCSS（方法2）、画像は命名規則（方法3）で処理し、条件分岐（方法1）は本当に例外的なカテゴリだけに絞る、という組み合わせを基本にしています。理由は保守性で、条件分岐が10個並んだテンプレートは、半年後に別の担当者が触れなくなるからです。

反映されないときのチェックリスト

思ったとおりに表示されないときは、次の順序で切り分けます。

症状1｜どのカテゴリでも何も表示されない

カテゴリIDの書き間違いが最有力です。切り分けとして、条件分岐を一度外し、<{$category.code}> だけを本文に出力してみてください。画面にIDが表示されれば、タグ自体は正しく動いています。表示されたIDと、条件式に書いたIDを見比べます。

症状2｜ページ全体のレイアウトが崩れた

<{/if}> の閉じ忘れ、またはHTMLタグの閉じ忘れです。追加したコードを一度すべて削除して元に戻るか確認し、戻るなら追加分を1行ずつ入れ直します。

症状3｜CSSが効かない

まずブラウザの検証機能で、id・classが想定どおり出力されているかを確認します。出ているのに効かない場合は、CSSの記述場所や優先順位（他のセレクタに負けている）を疑ってください。

症状4｜画像だけ表示されない

ファイル名の綴り、拡張子（.pngと.jpgの取り違え）、アップロード漏れのいずれかです。表示されない画像のURLをブラウザで直接開いてみると、ファイルが存在するかどうかを一発で確認できます。

症状5｜PCでは反映されるがスマホで変わらない

PCとスマートフォンでテンプレートが分かれている場合、両方に同じ変更が必要です。スマホ側のテンプレートを開いて、同じ実装が入っているか確認してください。

実装するときの注意点

• 編集前にテンプレートをバックアップする：HTMLを直接書き換えるため、元のコードをテキストファイルに控えてから作業します。
• カテゴリIDを正確に確認する：ct1、ct2といったIDは商品管理画面で確認できます。思い込みで書くと、どのカテゴリでも表示されない状態になります。
• 使えるタグはリファレンスで確認する：ページの種類によって使用できるタグが異なります。カテゴリページで使えるタグかどうかを、公式のタグリファレンスで確認してから組んでください。
• スマートフォン側も確認する：PCとスマホでテンプレートが分かれている場合、両方に同じ対応が必要です。
• カテゴリ追加時のルールを決めておく：新カテゴリを作ったとき、画像の追加やCSSの追記が必要になります。運用手順として残しておかないと、担当が変わった時点で崩れます。

同じくクリエイターモードの実践的なカスタマイズとして、数量欄に最小注文数を表示させる方法と商品詳細ページで使える変数タグまとめも解説しています。

よくある質問（FAQ）

カテゴリごとにテンプレートを分けることはできますか？

カテゴリページのテンプレートは共通です。分けるのではなく、カテゴリIDを使って1つのテンプレートの中で出し分けるのが基本的な考え方になります。

カテゴリIDはどこで確認できますか？

商品管理画面のカテゴリー設定で確認できます。ct1、ct2のような形式で割り振られており、この値をそのまま条件やclass名に使います。

子カテゴリごとにデザインを変えられますか？

子カテゴリにもIDが割り振られているため、同じ方法で出し分けられます。ただし数が多くなるほど条件分岐は管理しづらくなるので、CSSでの出し分けを軸にするのがおすすめです。

コードを入れたのに反映されません。原因は何ですか？

よくあるのは、カテゴリIDの書き間違い、<{/if}> の閉じ忘れ、そのページで使えないタグを指定している、の3つです。まず条件を外した状態で変数タグだけを出力してみて、IDが正しく表示されるかを確認すると切り分けが早くなります。

カテゴリを追加したら表示が崩れました。

画像名にカテゴリIDを埋め込む方法を使っている場合、新カテゴリ用の画像がないためリンク切れになっています。同じ命名規則で画像を追加するか、条件分岐で画像のあるカテゴリだけ表示する形に変更してください。

デザインを凝りすぎると表示速度に影響しますか？

カテゴリごとに大きな画像を出す設計にすると、読み込みが重くなります。キービジュアルは表示サイズに合わせて圧縮し、必要以上に大きなファイルを置かないようにしてください。

まとめ

makeshopのカテゴリページは、<{$category.code}> を使えばカテゴリごとに違うデザインにできます。装飾はclass・idとCSS、画像は命名規則での切り替え、例外的な表示だけ条件分岐という使い分けにすると、テンプレートを読みやすく保ったままカテゴリごとの見せ方を作り込めます。うまく動かないときは、条件を外して変数タグだけを出力し、IDが正しく取れているかを確認するところから始めてください。

スリーディープラスでは、makeshopのクリエイターモードを使ったデザインカスタマイズや、ネットショップの改善のご相談を承っています。「カテゴリごとに見せ方を変えたいが、どこから手をつければいいか分からない」という場合は、お気軽にお問い合わせください。