こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はスマホでカテゴリーページ別にデザインしたい場合に便利な
「カテゴリー識別コードの使い方」についてご紹介します！

こんなお悩みありませんか？

・スマホでカテゴリー別（下階層にも）にデザインしたいけどどうやるの？
・スマホの特定のカテゴリーページにだけ表示したい内容があるけどできる？

カテゴリー識別コードって？

カテゴリー識別コードは、カテゴリー固有のIDです。

【商品管理】>【カテゴリーの設定】>【カテゴリーの設定】

該当のカテゴリーを選択し「編集」ボタンから「カテゴリー識別コード」を確認することができます。

カテゴリー識別コード

参考：オンラインマニュアル「カテゴリーの設定」

[難易度 ★★☆ ]
スマホでカテゴリー別にデザインしたい！
カテゴリー識別コードの使い方

これからご案内するソースは下記の画面内に入力します。

【ショップデザイン（スマホ）】>【スマホデザインの設定】
適用中のスマホテンプレートの「編集」をクリック【カテゴリー/検索結果画面】

それでは早速、みていきましょう！

【使い方その1】条件分岐（if文）を使う

条件に応じて処理を変えることができます。

▼HTML編集へ

▼「ct1」のページにだけ表示する場合（条件分岐：等しい）

▼「ct1、ct3」のページにだけ表示する場合（条件分岐：もしくは）

▼「ct1」以外のページに表示する場合（条件分岐：異なる）

→かんたんですね。

【使い方その2】classやidとして使う

カテゴリー別に異なるCSSを適用させることができます。

▼HTML編集へ

→この内容は全ページに表示されます。

▼CSS編集へ

→指定したカテゴリーに対してCSSが適用されます。

【使い方その3】画像名として使う

カテゴリー別に異なる画像を表示させることができます。

（1）カテゴリー識別コードを画像名としてアップロード！

ファイルサーバーに下記のようにカテゴリー識別コードを画像名としてアップロードしておきます。

例）
「ct1用の画像」icon-ct1.png
「ct2用の画像」icon-ct2.png
「ct3用の画像」icon-ct3.png

画像アップロード先参考：オンラインマニュアル「100MBサーバー/ギガプラス10」

（2）ソースを入力！

画像のファイルパスは、このようになります。

ソースを入力するときは、【使い方その1】でならった
条件分岐（if文）を用いて下記のように入力しましょう。

▼HTML編集へ

▼「ct2」のページに「icon-ct2.png」を表示する場合

▼「ct1、ct2、ct3」のページにそれぞれ、「icon-ct1.png、icon-ct2.png、icon-ct3.png」を表示する場合

→ 同じHTMLでも、カテゴリーによって異なる画像を表示させることができて便利です！

・商品詳細ページについては、スマホの商品詳細ページをカテゴリー別にデザインしたい！をご参考ください。

完了！

いかがでしたでしょうか。
上級者向けの内容もありますが、理解すればかんたんに設定することができます。

カテゴリー識別コードをうまく活用して、
スマホのカテゴリー別デザインを設定してみましょう！

それではまた！