カラーミーショップにスライドを配置

2018年10月10日

ネットショップで売れているお店はどういうレイアウトで、どのような見せ方をしているのか調べてみようと「カラーミー大賞2018」の授賞ショップを見てみました。

 

もちろん細かい部分に違いはありますが大体共通しているのは、

 

1・トップページに横幅いっぱいのスライドで目玉となる商品やサービスの紹介、

 

2・スライドの下は2カラムになっていて商品リストなどのサイドバーは左に配置が多い

 

 

 

といったところです。

 

カラーミーショップに限らず最近の主流レイアウトだなと感じます。
売れるショップ作りは売れているお店の真似から

 

まずはカラーミーだけで同じレイアウトを構成してみようと思います。

 

カラーミーショプで使うスライドを作成する

有料のテンプレートを利用する手もありますが、スライドの配置ぐらいなら無料テンプレートでも簡単です。
ちなみに私の使っているのは「カラーミーキット(2カラム)」(無料)です。

 

管理画面 > デザイン > スライドショー
カラーミー スライド

「ファイル選択」でスライドに使いたい画像を保存。
「画像単位設定」でリンクURL、文字入れ(どちらも任意)を個別登録、保存。

 

 

カラーミースライド

 

 

スライドの種類、スピードなどの設定を済ませると下側に出力用HTMLが表示されていますので、これをコピーしておき次にすすみます。

 

 

 

スライドを表示させる

管理画面 > デザイン >デザイン >テンプレート編集

スライドはトップページだけに表示させることがほとんどだと思いますので、その体でいきます。
HTMLの操作なので当然ながら上級者モード(HTML・CSS編集)です。

 

先ほどコピーしておいたhtmlコードを貼り付けるだけですのでそんな難しいものではありません。

 

余白や画面幅など細かい調整をしたければcssの知識が必要になりますが、とりあえず今回はコピー&ペースト + 補足だけでいける内容で書きます。

 

トップページだけにスライドを表示したいのですが、「トップ」のhtmlにコードを貼り付けると横幅いっぱいにはなりません(下図)。

カラーミーショップ スライド

 

 

なので「共通」にはりつけて、それをトップページ以外では非表示にする方法をとります。
先に完成図がこちらです。きちんと横幅いっぱいになっています。

 

カラーミーショップ スライド

 

HTMLの編集

下図を参考に、先ほどコピーしたコードを「共通」のhtmlに貼り付けます。別にこの場所でなくても構いませんが、上の完成図に合わせています。

カラーミーショップ

 

 

ここまでコピペでOKでしたがここから少し手入力です。
まずは貼り付けたコードの前後を<div>タグで囲み、適当なid属性をつけます。仮でsliderにします。

 

<div id="slider">
   (コピー&ペーストした部分)
</div>

 

HTMLの編集はこれで終わりですので「保存」

続いて下のCSSを編集します。

 

 

CSSの編集

CSS冒頭に @charset “euc-jp”; とあると思いますので、その下の行にでも

#slider{display:none;}

と書き足して保存。

 

 

編集画面のプレビューを見てもらうと分かりますが、今のところスライドは非表示になっています。
「共通」の編集はここまでです。テンプレート編集の画面に戻ります。

 

トップページだけスライドを表示させる

トップページだけスライドを表示させたいので、次は「トップ」の編集をします。こちらはCSSだけです。
「トップ」のCSSに今度は

 

#slider{display:block;}

 

と書き足します。

これでトップページでだけスライド表示ができました。

 

今回コピー&ペーストだけで済ませる方向けの内容ですが、HTML・CSSがある程度分かればもっと踏み込んで自由に編集できます。

無駄になるものではないので、オンライン学習などで基礎だけでも知っておくとなにかと便利が良いと思います。

プログラミングのオンラインスクールのCodeCamp

 

(Visited 167 times, 1 visits today)