こんにちは、makeshopデザイン質問掲示板です。
いつもmakeshopをご利用いただきありがとうございます。
以前ご紹介したクリエイターモードで『カテゴリページ』を”カテゴリ別にデザイン”したいでは、$category.code を使った条件分岐の書き方をご紹介しました。
「記事を見てコードは理解できたけど、毎回手打ちするのが少し面倒…」
そんな声にお応えして、カテゴリIDを入力するだけで分岐コードを自動生成してくれる便利ツールを作りました！
[難易度 ★☆☆ ] カテゴリID 分岐コード生成ツールの使い方
このツールでできること
ツールを使うと、以下の4種類の分岐コードをかんたんに生成できます。
- 単一カテゴリ：指定した1つのカテゴリページだけにコンテンツを表示
- 複数カテゴリをまとめて指定：複数のカテゴリページで同じコンテンツを表示（「ct1または ct2」のような指定）
- カテゴリごとに内容を切り替え：ct1はAバナー、ct2はBバナー…というようにカテゴリごとに異なるコンテンツを表示
- 特定カテゴリ以外に表示：指定したカテゴリ「以外」のすべてのページにコンテンツを表示
さらに、画像URL・リンク・テキストも一緒に入力でき、コードをコピーしてそのまま貼り付けるだけでカテゴリ別デザインが完成します！
こんな方におすすめです！
・カテゴリ別にバナーや画像を切り替えたいけど、コードを書くのが苦手……
・カテゴリの数が多くて、if文を何個も手打ちするのが大変……
・初めてクリエイターモードに挑戦するショップ様
ツールの使い方
（1）ツールを開く
下記リンクからツールを開いてください。
→カテゴリID 分岐コード生成ツールはこちら
（2）タブを選ぶ
画面上部に4つのタブが並んでいます。やりたいことに合ったタブをクリックしましょう。
- 単一カテゴリ：「ct2のページだけにバナーを出したい」
- 複数カテゴリをまとめて指定：「ct1とct3の両方に同じバナーを出したい」
- カテゴリごとに内容を切り替え：「ct1はAバナー、ct2はBバナー、それ以外はCバナー」
- 特定カテゴリ以外に表示：「ct1以外のすべてのカテゴリページに出したい」
（3）カテゴリIDと表示内容を入力する
選んだタブに合わせて、カテゴリIDと表示したいコンテンツを入力してください。
カテゴリID：管理画面の「商品管理 / カテゴリ設定」で確認できます（例：ct1、ct2）。
→※半角英数字のみ入力できます。全角文字やスペースを入力した場合は警告が表示されます
画像URL：ファイルサーバーにアップロードした画像のパスを入力（任意）
→※画像は100MBサーバー（ギガプラス10）からアップロードできます
リンク先URL（画像のみに適用）：画像をクリックしたときのリンク先（任意）
テキスト：表示したい文章（任意）
テキストリンクを追加したい場合は、直接HTMLを入力してください。
例）
<a href="リンク先URL">テキストリンク</a>カテゴリIDの確認方法
管理画面の「商品管理 / カテゴリ設定」から該当カテゴリの「編集」ボタンをクリックすると「カテゴリID」を確認できます。
参考：オンラインマニュアル「カテゴリ設定」
（4）生成されたコードをコピーして貼り付ける！
入力内容に合わせて画面右側のコード欄にコードが自動生成されます。
「コードをコピーする」ボタンを押しましょう。
ボタンの色が変わったらコピー完了のサインです！
クリエイターモード
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー 「HTML」欄
生成されたコードをそのまま貼り付ければ完了です！
保存してショップページに反映できます。
使用例①：ct1のページだけに画像バナーを表示する
「単一カテゴリ」タブで ct1 を入力し、画像URLを入れると、下記のようなコードが生成されます。
<{if $category.code == 'ct1'}>
<img src="/img/icon-ct1.png" alt="カテゴリ1のバナー">
<{/if}>
あとはこのコードをクリエイターモードの商品カテゴリー 「HTML」欄に貼り付けるだけです！
使用例②：カテゴリごとに異なるバナーを表示する
「カテゴリごとに内容を切り替え」タブを使うと、カテゴリによって表示内容をまるごと切り替えることができます。
たとえば「ct1はレディース用バナー、ct2はメンズ用バナー、それ以外は共通バナー」といった設定も簡単です。
カテゴリIDとそれぞれのテキスト・画像を入力すると、下記のようなコードが生成されます。
<{if $category.code == 'ct1'}>
<img src="/img/banner-ladies.png" alt="レディース新作">
<{elseif $category.code == 'ct2'}>
<img src="/img/banner-mens.png" alt="メンズ新作">
<{else}>
<img src="/img/banner-common.png" alt="共通バナー">
<{/if}>
カテゴリが何種類あっても、ツールで行を追加するだけで対応できます！
その他の便利機能
・プレビュー機能
ツール画面の「プレビュー」エリアでは、入力した画像やテキストが実際にどう見えるかを確認することができます。コードをコピーする前に仕上がりイメージを確認してみてください。
・コメントマーカー
「コメントマーカーを挿入する」にチェックを入れると、生成コードに <!-- ▼ ct1 ここから --> のような目印が追加されます。複数箇所に分岐を書いているときの編集ミスを防ぐのに役立ちます。
・入力をクリア：各タブ右上の「入力をクリア」ボタンを押すと、そのタブの入力内容をまとめてリセットできます。複数パターンを続けて試したいときに便利です。
・生成されるコードはmakeshopのテンプレートタグ形式（<{if}>〜<{/if}>）です。クリエイターモード専用ですのでご注意ください。
・編集前にかならずデザインセットのバックアップを取っておきましょう！
関連記事：ショップデザインバックアップしてますか？！
いかがでしたでしょうか。カテゴリIDを入力するだけで分岐コードが完成するので、慣れないうちでも安心してお使いいただけます。クリエイターモードでカテゴリ別デザインに挑戦するときはぜひ活用してみてくださいね。それではまた！
