EC-CUBEにBootstrapを入れてスマートフォン最適化する方法

このエントリーをはてなブックマークに追加
Pocket

前回の記事でEC-CUBEにBootstrapを導入しPC画面のレイアウトを作りました。

ここではPC用のレイアウトをレスポンシブ化し、スマートフォンに最適化されたレイアウトを作ってみます。

EC-CUBEをスマートフォン最適化する方法

headにレスポンシブ用コードを追加

EC-CUBEに限らずレスポンシブなWebサイトを作るにはhead要素内にmetaタグを入れる必要があります。どのようなサイトでも追加する内容は決まっているのでコピペしてしまってOK。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  
  // その他のタグ

</head>

これでEC-CUBEをレスポンシブ化する準備は完了です。

Bootstrapのグリッドをレスポンシブ化

EC-CUBEのスマートフォン最適化でまずやることは、Bootstrapで作ったグリッドレイアウトをレスポンシブ化することです。

前回使用した方法ではサイズごとにレイアウトを変えていないため、どの画面サイズでも同じ見た目になります。
EC-CUBEのレスポンシブ化

画面サイズごとにレイアウトを変更するために、classの記述を書き換える必要があります。Bootstrapのレスポンシブレイアウトについては公式ドキュメントのページを参考にして下さい

では実際にレスポンシブ化してみます。前回のレイアウトで追加したBootstrapのclassを以下のように変更します。

<!--{* ▼LEFT COLUMN *}-->
<!--{if $arrPageLayout.LeftNavi|@count > 0}-->
<div id="leftcolumn" class="side_column col-xs-12 col-sm-3">
    <!-- コンテンツ -->
</div>
<!--{/if}-->
<!--{* ▲LEFT COLUMN *}-->

<!--{* ▼CENTER COLUMN *}-->
<div id="main_column" class="col-xs-12 col-sm-9">
    <!-- コンテンツ -->
</div>
<!--{* ▲CENTER COLUMN *}-->

ここではxs（スマートフォン）サイズで１カラムレイアウト、sm（タブレット）サイズから２カラムレイアウトにしています。ヘッダーやフッターはPC画面でもスマホ画面でも１カラムなので前回のままとなります。

このままだと以下の画像のようにヘッダーの下にサイドバーが表示され、メインコンテンツはサイドバーの下になってしまいます
EC-CUBEのレスポンシブ化３

このような場合はBootstrapのoffsetを利用すれば問題を解決することができます。やり方は、先ほどのコードのサイドバーとメインカラムを上下入れ替え、offsetクラスを追加すればOK。

<!--{* ▼CENTER COLUMN *}-->
<div id="main_column" class="col-xs-12 col-sm-9 col-sm-push-3">
    <!-- コンテンツ -->
</div>
<!--{* ▲CENTER COLUMN *}-->

<!--{* ▼LEFT COLUMN *}-->
<!--{if $arrPageLayout.LeftNavi|@count > 0}-->
<div id="leftcolumn" class="side_column col-xs-12 col-sm-3 col-sm-pull-9">
    <!-- コンテンツ -->
</div>
<!--{/if}-->
<!--{* ▲LEFT COLUMN *}-->

これでスマートフォン画面でも正しく表示されるようになります。
EC-CUBEのレスポンシブ化4

スマートフォンサイズで非表示にしたいコンテンツがある場合の対処法

基本的にはBootstrapのclassを変更するだけでレスポンシブ化が可能ですが、ヘッダーのナビや一部のコンテンツで非表示にしたいものが出てくるかもしれません。

スマートフォン表示の際にコンテンツを非表示にするには、.hidden-xsを使用します

<div id="header_wrap">
    <div id="header" class="clearfix">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-6">
            <div id="logo_area">
                <!-- コンテンツ省略 -->
            </div>
          </div>
          <div class="col-sm-6 hidden-xs">
              <!-- コンテンツ省略 -->
          </div>
        </div>
      </div>
    </div>
</div>

ここではヘッダーログインを非表示にしてみました、実際はこちらの画像のようになります。
EC-CUBEのレスポンシブ化5

表示・非表示の切り替えはスマートフォンだけでなく、タブレットサイズやPCサイズでも可能です。目的に合わせて切り替えてください。

スタイルの変更はメディアクエリを使用

ここまででレイアウト部分の最適化は完了です。あとはスタイルの細かい部分を画面サイズごとに最適化する作業のみ。

画面サイズごとにスタイルを最適化するにはメディアクエリを使用します。Bootstrapを使用する場合のメディアクエリは以下のようなパターンがあります。

// xs（スマホ）サイズのみ適用
@media (max-width: 767px) { ... }

// sm（タブレット）サイズのみ適用
@media (min-width: 768px) and (max-width: 991px) { ... }

// md（PC小）サイズのみ適用
@media (min-width: 992px) and (max-width: 1199px) { ... }

// lg（PC大）サイズのみ適用
@media (min-width: 1200px) { ... }

例えばスマートフォン時のみ文字サイズを大きくする場合はこのような書き方になります。

// xs（スマホ）サイズのみ適用
@media (max-width: 767px) {
  font-size: 18px;
}

まとめ

ここまででEC-CUBEのレスポンシブ化は完了。古いバージョンのEC-CUBEでもBootstrapを使用することで比較的簡単にレスポンシブ化することが可能です。

１つのテンプレートで複数のレイアウトを考慮する必要があるため、慣れるまでは難しいかもしれませんが、是非挑戦してみて下さい。

こちらのショップでは既にレスポンシブ化したテンプレートを販売中。価格もお手頃なので是非チェックしてみてくださいね！
EC-CUBEレスポンシブテンプレート販売中！　TetraThemes