こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
スマホでのカテゴリ別デザイン方法をご紹介しましたが、今回は、PC(ベーシックモード)でのやり方をご紹介します!
クリエイターモードのソース例は、クリエイターモードでカテゴリーページを”カテゴリー別にデザイン”したいをご参照ください。
こんなお悩みありませんか?
・カテゴリーごとにタイトル画像をかんたんに変更したいけどどうやるの?
・画像だけじゃなくてテキストも変更したいんだけどできる?
[難易度 ★☆☆ ]
カテゴリーごとにタイトル画像をいれたい!
それでは、早速みていきましょう!
設定方法
(1)イメージの登録!
旧管理画面:【ショップ作成】>【デザインの設定】>【カテゴリー別イメージの登録】
新管理画面:メインメニュー / ショップデザイン / デザイン設定 / カテゴリー別イメージの登録
「カテゴリーの選択」からプルダウンで該当のカテゴリーを選択し
「ファイルを選択」後に「イメージを登録」します!
・カテゴリー別イメージを表示するタグから、カテゴリー(第1階層)別に登録したイメージが表示されます。
・スマートフォンにも表示することができます。
(2)完了!
→かんたんですね。
次は、もっと下のカテゴリーに設定したり、文字をいれたりする方法をご紹介します!
[難易度 ★★☆ ]
テキストや背景色なども変えて、もっとカテゴリーごとにカスタマイズしたい!
設定方法
もっと細かくカテゴリー別にデザインを変更したい場合は、「カテゴリー識別コード」を利用しましょう。
(1)カテゴリー識別コード(カテゴリID)を確認する!
カテゴリー識別コード(カテゴリID)は、カテゴリ固有のIDです。
旧管理画面:【商品管理】>【カテゴリーの設定】>【カテゴリーの設定】
新管理画面:メインメニュー / 商品管理 / カテゴリ設定
該当のカテゴリーを選択し「編集」ボタンから確認することができます。
▼旧管理画面
▼新管理画面
(2)カテゴリーページにソースを追加!
旧管理画面:【ショップデザイン(PC)】>【内部ページ編集I】>【商品分類ページ管理】
新管理画面:メインメニュー / ショップデザイン / テンプレート選択・編集
【ショップデザイン(PC)】>【内部ページ編集I】>【商品分類ページ管理】
エディターエリアに下記のように、カテゴリー識別コードとソースを追記してください。
1 2 3 4 |
[IF_CATEGORY_CODE_***]<!--***には該当のカテゴリー識別コードを入力します--> <img src="画像URL(パス)" alt="画像名"> <p>カテゴリーに表示したいテキスト</p> [ENDIF_CATEGORY_CODE] |
・[IF_CATEGORY_CODE_***]~[ENDIF_CATEGORY_CODE]で囲むと囲んだ内容が該当の
カテゴリーにのみ表示されます。
・画像はファイルサーバーにアップロードして表示します。
参考:オンラインマニュアル「100MBサーバー/ギガプラス10」
(3)完了!
いかがでしたでしょうか。
用途に合った方法でカテゴリー別デザインを表示してみてみましょう。
スマホでの表示は、
関連記事:スマホでカテゴリー別にデザインしたい!カテゴリー識別コードの使い方
も合わせてご参考ください。
それではまた!