カラーミー 2022年09月09日 naeco.jp カラーミーショップテンプレート

カラーミーの無料テンプレートOrganicをレスポンシブ対応する

昨今のスマートフォン用サイトはレスポンシブウェブデザイン（Responsive Web Design, RWD）と呼ばれる手法で実装されていることが多いです（以下では簡単にレスポンシブと呼びます）。

カラーミーショップの場合、有料テンプレートは（ほぼすべて）レスポンシブ対応していますが、無料テンプレートは一部のみ対応です。

今回は、無料テンプレート Organic（オーガニック）をレスポンシブ対応するための修正箇所を記事しました。レスポンシブ未対応の無料テンプレートを使っている方は参考にどうぞ。

レスポンシブ入門（要点２つ）

・横並び要素は絶対単位（px）にせず相対単位（%）を使う
　width: 200px; → width: 25%;

・メディアクエリを用いてデバイス幅ごとにCSSを変更する
　@media screen and (max-width: 480px) { }

レスポンシブについて大まかにまとめると、上の二つを考慮してサイト制作します。
一つのページがブラウザの幅に応じてレイアウト変化して、これまでのようにパソコン用・スマートフォン用ページと分けて制作しなくてよくなります。

レスポンシブ初心者の方は、以前書いた記事を参考にどうぞ。

カラーミーキットの中を見て、レスポンシブ対応について学ぶ

無料テンプレート Organic（オーガニック）

今回は無料テンプレート Organic（オーガニック）を取り上げます。
このテンプレートを使っているショップサイトをよく見かけますが、追加されたのが2014年と古いため、レスポンシブ対応していません。

無料テンプレートOrganic(オーガニック)を追加しました。

カラーミーキットを読み込み

今回はカラーミーキットを使います。
余分なスタイルも多いので、中を読める方は必要なものだけコピーしてもOKです。
参考）カラーミーキット - ネットショップ作成サービスカラーミーショップ

集客＞検索エンジン対策＞headタグ内フリースペース設定から、headタグ内に以下のコードをコピペします（your-id部分はご自身のショップURLで）。

<link rel="stylesheet" href="https://your-id.shop-pro.jp/css/framework/colormekit.css" type="text/css" />
<link rel="stylesheet" href="https://your-id.shop-pro.jp/css/framework/colormekit-responsive.css" type="text/css" />

これであらかじめ用意されているスタイル（CSS）を利用できます。

横並び要素を相対単位にする

デベロッパーツールで修正箇所を把握します。
修正箇所（何行目）は無料テンプレート Organic（オーガニック）を追加した直後のものです。

共通CSS

#container　74行目
width:960px;　→　max-width: 960px;

#side　96行目
width: 200px;　→　/* width: 200px; */

#main　102行目
width: 700px;　→　/* width: 700px; */

.foot_sk_box　258行目
width: 200px;　→　/* width: 200px; */

.item_box　335-336行目
margin: 0 41px 45px 0; 　→　/* margin: 0 41px 45px 0; */
width: 205px;　→　/* width: 205px; */

.box_small .item_box　386-387行目
margin: 0 33px 45px 0;　→　/* margin: 0 33px 45px 0; */
width: 113px;　→　/* width: 113px; */

.product_images　480行目
width: 400px;　→　 /* width: 400px; */

.add_cart　498行目
width: 270px;　→　/* width: 270px; */

.zoom-small-image　717行目
width: 400px;　→　 /* width: 400px; */

#box_sellers .seller_image　 1047-1048行目
margin: 0 10px 0 0;　→　/* margin: 0 10px 0 0; */
width: 80px;　→　/* width: 80px; */

#box_sellers .seller_detail　1053行目
width: 104px;　→　/* width: 104px; */

共通HTML

95行目
<div id="main">　→　 <div id="main" class="col col-lg-9 col-sm-12">

110行目
$history max=5　→　$history max=4

111行目
<div class="item_box<{if $smarty.section.num.iteration % 5 == 0}> box_last<{/if}>">
↓
<div class=" col col-lg-3 col-sm-6 item_box<{if $smarty.section.num.iteration % 4 == 0}> box_last<{/if}>">

141行目
% 5 　→　 % 4

154行目
<div id="side">　→　<div id="side" class="col col-lg-3 col-sm-12">

346、376行目
<div class="foot_sk_box">　→　<div class="col col-lg-3 col-sm-12 foot_sk_box">

358行目
<div id="pay" class="foot_sk_box">　→　<div id="pay" class="col col-lg-3 col-sm-12 foot_sk_box">

396行目
<div id="mobile" class="foot_sk_box"> 　→　<div id="mobile" class="col col-lg-3 col-sm-12 foot_sk_box">

243-248行目（ if～div間を置き換え）

<div class="col col-lg-6 seller_image">
  <{if $seller[num].img_url != ""}>
    <img src="<{$seller[num].img_url}>">
  <{else}>
    <img src="https://img.shop-pro.jp/tmpl_img/67/l.gif">
  <{/if}>
</div>
<div class="col col-lg-6 seller_detail">

トップHTML

49行目
<div class="item_box　→　<div class="col col-lg-4 col-sm-6 item_box

78-80行目（コメントアウト）

<!--<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
    <br style="clear:both;" />
<{/if}>-->

商品一覧HTML

105行目
<div class="item_box　→　<div class="col col-lg-4 col-sm-6 item_box

137-139行目（コメントアウト）

<!--<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
    <br style="clear:both;" />
<{/if}>-->

商品検索HTML

54行目
<div class="item_box　→　<div class="col col-lg-4 col-sm-6 item_box

87-89行目（コメントアウト）

<!--<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
<br style="clear:both;" />
<{/if}>-->

商品詳細HTML

26行目
<div class="add_cart">　→　<div class="col col-lg-5 col-sm-12 pull-right add_cart">

140行目
<div class="product_images">　→　<div class="col col-lg-7 col-sm-12 product_images">

211行目
<div class="add_cart">　→　<div class="col col-lg-5 col-sm-12 pull-right add_cart">

310行目
<div class="item_box　→　<div class="col col-lg-4 col-sm-6 item_box

341行目
$recommend max=5　→　$recommend max=4

342行目
<div class="item_box<{if $smarty.section.num.iteration % 5 == 0}> box_last<{/if}>">
↓
<div class="col col-lg-3 col-sm-6 item_box<{if $smarty.section.num.iteration % 4 == 0}> box_last<{/if}>">

371-373行目（コメントアウト）

<!--<{if $smarty.section.num.iteration % 5 == 0 and $smarty.section.num.last == false}>
    <br style="clear:both;" />
<{/if}>-->

スマートフォン用メニューの実装

今回は無料テンプレート Bit についているシンプルなハンバーガーメニューを実装します。
コードはBitの共通HTML 3-18行目を参考にどうぞ。

共通HTML

22行目
<div id="top_line">　→　<div id="top_line" class="hidden-phone">

29行目
<div id="header">　→　<div id="header" class="hidden-phone">

157行目
<div class="box" id="side_nav"> 　→　 <div class="hidden-phone box" id="side_nav">

27行目（挿入）

  <div class="visible-phone">
    <div class="dropdown-wrapper header-link header-dropdown google-font">
      <ul class="dropdown-nav">
        <li class="view-cart"><a href="<{$view_cart_url}>"><span><i class="icon-w icon-cart"></i>view cart</span></a></li>
        <li><a href="<{$home_url}>">home</a></li>
        <li><a href="/?mode=srh&amp;cid=&amp;keyword=">all items</a></li>
        <li><a href="<{$sk_url}>">ordering info</a></li>
        <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}>

        <li><a href="<{$view_inq_url}>">contact</a></li>
        <{* フリーページをヘッダーメニューに追加 (スマホ・タブレット用) *}>
        <!-- <li><a href="?mode=f1">freepage1</a></li> -->
        <!-- <li><a href="?mode=f2">freepage2</a></li> -->
      </ul>
      <span class="btn-dropdown">menu<i class="icon-b icon-list pull-right"></i></span>
    </div>
  </div>

共通HTMLの一番下に挿入

スマートフォン向けにviewportの指定が必須です。

<script>
$(function(){

// viewport
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(viewport);

// dropdown menu
$('.btn-dropdown').click(function () {
  $(this).parent().children('.dropdown-nav').slideToggle('fast');
  $(this).toggleClass('btn-dropdown-close');
  $('.icon-list', this).toggleClass('icon-chevron_thin_up');
});
$('.dropdown-wrapper').skOuterClick(function () {
  $('.dropdown-nav' ,this).slideUp('fast');
  $('.btn-dropdown' ,this).removeClass('btn-dropdown-close');
  $('.icon-list', this).removeClass('icon-chevron_thin_up');
});

});
</script>

共通CSSの一番下に挿入

@media (max-width: 768px) {
  #container {
    margin-top: 45.6px;  
  }  
  .icon-b, .icon-w {
    display: inline-block;
    width: 24px;
    height: 24px;
    *display: inline;
    *zoom: 1;
  }
  .icon-b {
    background-image: url(http://img.shop-pro.jp/tmpl_img/69/icon24_b.png);
  }
  .icon-w {
    background-image: url(http://img.shop-pro.jp/tmpl_img/69/icon24_w.png);
  }  
  .icon-list {
    background-position: -288px -144px;
  }
  .icon-chevron_thin_up {
    background-position: -192px -216px;
  }  
  .icon-cart {
    background-position: -264px -96px;
  }  
  .header-dropdown {
    position: absolute;
    top: 0;
    z-index: 200;
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
    background-color: #fff;
    background-image: url(https://img.shop-pro.jp/tmpl_img/67/texture.png);    
  } 
  .header-dropdown .btn-dropdown {
    padding-left: 34px;
    font-size: 16px;
    line-height: 1.6;
  }
  .view-cart a {
    background-color: #4d4d4d;
    color: #fff;
  } 
  .header-dropdown .dropdown-nav a {
    display: block;
    padding: 10px;
  }
  .header-dropdown .dropdown-nav li {
    border-bottom: 1px solid #dbdbdb;
    text-align: center;
  }  
  .google-font {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    font-family: 'Karla', sans-serif;
  }  
  .view-cart span {
    display: block;
    width: 130px;
    margin: 0 auto;
  }
  .view-cart .icon-w {
    float: left;
    margin-top: -2px;
  }
}

カラーミーショップの設定変更

ショップ＞デザイン＞スマートフォンでの表示状態（赤枠部分）が「【スマートフォン専用テンプレート】が設定されています」になっています。
右横の「変更する」から「PC版表示」を選択することで、レスポンシブ対応完了です。

Organic（オーガニック）レスポンシブ対応済み例

基本的にコピペで動くと思います。文字色、要素の隙間の微調整は各自でスタイルを入れて下さい（凝ると結構大変）。
下の画像例は左メニューと右コンテンツの隙間などを追加で調整しています。

カラーミーキットを読み込んだために、既存のスタイルの一部が上書きされています（リンク色や「カートに入れる」ボタン）。!importantやclass名を変えるなどで対応します。

要素間の調整はメディアクエリを使って、デバイスごとにスタイルを細かく指定します。

商品並びが崩れるときは jquery.tile.js を導入するか、clearfixを入れるコードを追加します。

おわりに

カラーミーショップのOrganicテンプレートのレスポンシブ対応について書きました。考え方は他テンプレートでも同様なので、参考にしてください。

いまのところ、スマートフォン用テンプレートを使っているショップサイト（＝レスポンシブ未対応サイト）だからといって、SEO的にすぐに問題になる訳ではありません。
Googleが言うところでは、スマートフォン用サイトのコンテンツを、パソコンで見たときと同様に整えておくことが重要とのことです。

引き続きスマートフォン用テンプレートを使う場合は、スマートフォン用サイトにコンテンツ不足がないか、確認しましょう。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら