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

以前、PC(ベーシックモード)でカテゴリー別にデザインしたい!をご紹介しましたが、
今回は『カテゴリー識別コード』を使って、クリエイターモードで"カテゴリー別にデザイン"するソース例をご紹介します!
クリエイターモードで使えるタグはタグリファレンスをご確認ください。

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

カテゴリー識別コードは、カテゴリー固有の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でも、カテゴリーによって異なる画像を表示させることができて便利です!

完了

いかがでしたでしょうか。
クリエイターモードでもカテゴリー別にデザインする際にどうぞご参考ください。

それではまた!