2019年10月15日ネットショップで売れているお店はどういうレイアウトで、どのような見せ方をしているのか調べてみようと「カラーミー大賞2018」の授賞ショップを見てみました。細かい部分に違いはありますが大体共通しているのは、1・トップページに横幅いっぱいのスライドで目玉となる商品やサービスの紹介、2・スライドの下は2カラムになっていて商品リストなどのサイドバーは左に配置が多いといったところです。カラーミーショップに限らず最近の主流レイアウトだなと感じます。売れるショップ作りは売れているお店の真似から。カラーミーだけで同じレイアウトを構成してみようと思います。トップページだけスライドを表示させるカラーミーショプで使うスライドを作成する有料のテンプレートを利用する手もありますが、スライドの配置ぐらいなら無料テンプレートでも簡単です。ちなみに私の使っているのは「カラーミーキット(2カラム)」(無料)です。リンクURL、文字入れ(どちらも任意)を個別登録、保存。スライドの種類、スピードなどの設定を済ませると下側に出力用HTMLが表示されていますので、これをコピーしておき次にすすみます。>テンプレート編集スライドはトップページだけに表示させることがほとんどだと思いますので、その体でいきます。HTMLの操作なので当然ながら上級者モード(HTML・CSS編集)です。先ほどコピーしておいたhtmlコードを貼り付けるだけですのでそんな難しいものではありません。補足だけでいける内容で書きます。トップページだけにスライドを表示したいのですが、「トップ」のhtmlにコードを貼り付けると横幅いっぱいにはなりません(下図)。「共通」にはりつけて、それをトップページ以外では非表示にする方法をとります。先に完成図がこちらです。横幅いっぱいになっています。下図を参考に、先ほどコピーしたコードを「共通」のhtmlに貼り付けます。別にこの場所でなくても構いませんが、上の完成図に合わせています。ここまでコピペでOKでしたがここから少し手入力です。貼り付けたコードの前後を<div>タグで囲み、適当なid属性をつけます。仮でsliderにします。続いて下のCSSを編集します。あると思いますので、その下の行にでも#slider{display:none;}と書き足して保存。編集画面のプレビューを見てもらうと分かりますが、今のところスライドは非表示になっています。「共通」の編集はここまでです。テンプレート編集の画面に戻ります。トップページだけスライドを表示させるトップページだけスライドを表示させたいので、次は「トップ」の編集をします。こちらはCSSだけです。「トップ」のCSSに今度は#slider{display:block;}と書き足します。これでトップページでだけスライド表示ができました。今回コピー&ペーストだけで済ませる方向けの内容ですが、HTML・CSSがある程度分かればもっと踏み込んで自由に編集できます。無駄になるものではないので、オンライン学習などで基礎だけでも知っておくとなにかと便利が良いと思います。