コラムに表示されるカラム数を変更してみよう

［パーツ変更］画面を開く

1. commerce creator＞パーツより［トップページコラム］の［コラム変更］画面を開きます。

   ※開き方がわからない場合は、トップページのバナーを増やしてみよう-［パーツ一覧］画面を開くをご参照ください。

   

2. ［コラム1］の変更マークをクリックします。

   

カラム数を変更する

1. コラムを1つ削除してみましょう。
   ［コラムを削除する］をクリックします。

   

2. モーダルが表示され、［コラムを削除する］をクリックすると削除できます。

   

3. カラム数が3つから2つになりましたが、このままだと表示が崩れます。

   

classを変更し、デザインを調整する

1. class名の数字を以下のように変更します。
   あらかじめCSSが準備されており、2カラム用のデザインに自動的に調整されます。

   変更前：

   fs-pt-column--3

   変更後：

   fs-pt-column--2

   

2. 以上で、カラム数を変更できました。
   実際にプレビューで確認してみましょう。

変更した内容をプレビューしてみよう

1. プレビュー方法は変更した内容をプレビューしてみようを参照してください。

2. 

   

3. カラムの数が2つに変更されています。
   画像サイズやカラムの幅も自動的に調整され、最適に表示されているのが確認できたでしょうか。

classの活用のポイント

［コラムパーツ］のclass名の数字を変更すると、カラム数にあわせて自動的にコンテンツ幅が調整されるよう、あらかじめCSSが準備されています。
カラム数を4カラムまで増やすことも可能です。

詳しくは、オンラインマニュアル をご確認ください。

［保存する］をクリックする

1. プレビューで問題がなければ、［レイアウト変更］画面の［保存する］をクリックします。

• パーツ一覧
• コラムパーツ追加・変更
• プレビューについて
• コマースクリエイターのプレビューモードでは、管理画面の設定にかかわらず、非公開の商品や未設定の機能の表示を確認できる[デザイン確認モード]と、管理画面の設定にしたがって表示される[動作確認モード]があります。
• 最新ファイルを読み込ませる記載方法
• 画像更新時に「新しい画像がなかなか読み込まれない」と感じたら、ご参照ください。