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

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

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

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

レスポンシブ入門(要点2つ)

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

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

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

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

https://naeco.jp/customize/responsive-colorme-kit

無料テンプレート Organic(オーガニック)

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

https://shop-pro.jp/news/140120org/

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

今回はカラーミーキットを使います。
余分なスタイルも多いので、中を読める方は必要なものだけコピーしても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を入れるコードを追加します。

おわりに

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

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

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴11年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

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