カラーミーショップのレスポンシブサイトに必要な設定とviewportについて

カラーミーショップで作られたサイトのソースをブラウザで見ると、テンプレート内では見なかったmetaタグがたくさん書いてあります。
カラーミーショップのサーバー側で追加されてた部分で、ふだんはあまり気にしないかもしれません。

カラーミーショップ制作を仕事にする場合は、ゼロからレスポンシブサイトを構築することもありますので、知識としてviewportについて知っておかなければいけません。

今回は仕事としている人や自分でカスタマイズする人向けの、すこし難しい内容です。

カラーミーショップのレスポンシブの設定

カラーミーショップの管理画面のショップ作成>デザインの「スマートフォンの表示状態」を確認します。

【スマートフォン専用テンプレート】が設定されています の場合、
パソコン閲覧時は「デザイン」で作成したテンプレートが表示され、
スマートフォン閲覧時は「スマートフォンショップ」のテンプレートが表示されます。

レスポンシブテンプレートの場合は
【PCテンプレート】が設定されています に変更しておくことが必須です。

レスポンシブに必要なviewportについて

レスポンシブサイトでは、<head>内にmetaタグのviewportを指定する必要があります。スマートフォンのような小画面のデバイスでどう表示するかというような指定ができます。

お約束として、コピペで使っているかもしれません。

<meta name="viewport" content="width=device-width, initial-scale=1.0">


カラーミーショップ側がviewportの指定を自動で挿入することはありませんので、自分で新規にレスポンシブなカラーミーサイトを作るときは、metaタグを<head>内に記述する必要があります。

カラーミーショップでは、集客>検索エンジン対策の「headタグ内フリースペース設定」に書くことができます。

有料のレスポンシブテンプレートでは、共通HTML内や外部ファイルのJavaScriptで、<head>内にmetaタグを追加するにコードが記述してあります。
レスポンシブテンプレートをベースにサイトを作る場合は、どこかに下記のようなJavaScriptが書いてありますので、うっかり消さないようにします。

<script>
  // headタグの中にviewportのmetaタグを入れる
  (function () {
    var viewport = document.createElement('meta');
    viewport.setAttribute('name', 'viewport');
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(viewport);
  }());
</script>


上のコードはMONOテンプレートの記述例です。
(function () { }()); はJavaScriptの即時関数の書式です。
設置場所は共通HTMLの先頭がおすすめ(早めに読み込むのがよいです)。

私もテンプレートを配布する機会が多いんですが、「headタグ内フリースペース設定」を使わずに、テンプレート内にJavaScriptを書いています。
<head>内にコピペしわすれたり、手間を省けますからね。

viewportのパラメータをいじる機会は多くありませんが、こういう仕事をしていると、ときどき頼まれます。どういうことができるか頭に入れておくと、viewportの指定を変えればできますよ、という話もできす。

たとえば、カラーミーショップがピンチアウトしない理由はviewportの「maximum-scale=1.0」にありますので、ピンチアウトの要望があるときはパラメータを「maximum-scale=5.0, user-scalable=yes」変更すれば対応できます(user-scalableはデフォがyesなので省略可能)。

viewportはどこに書いてあるのか

カラーミーショップのviewportの指定の仕方は、以下の3パターンがあります。
共通HTML内にあるか、外部のJSファイルにあるか(ファイル名はまちまち)、そもそもないか、です。自動で勝手に読み込んでくれたりはしません。

有料テンプレートをカスタマイズしている場合は、ほとんど意識することはありません。そういうこともあって、知識として知らないことが多く、はまると厄介です。

レスポンシブテンプレートでないテンプレート、古いテンプレートなどは、そもそも記述がありません。そういうテンプレートをベースにレスポンシブテンプレートを作ると、記述漏れに気づかず、レスポンシブしない理由もよくわからない事態に陥ります。

viewportの間違った書き方

カラーミーショップのテンプレートで、以下のような記述がしてあることがあります(カラーミーキット、Bitなど)。

$(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);
});


DOMの読み込みが終わってから処理する jQuery おなじみの書式ですが、これは間違いです。

カラーミーショップの既存テンプレートでよく使っているbxSliderなどで、ブラウザ幅を縮めたりする際にスライドショーが追従しない不具合が発生します(他にもよくわからないバグも引き起こしてそうな気がします)。

詳細は下記の記事にも記載しています。興味のある方は参考にどうぞ。

おわりに

レスポンシブサイトを作るときは、カラーミーショップの設定とviewportが必要なことをセットで覚えておきましょう。

カラーミーキットをベースにするときは、viewportの書き方にも注意が必要です。

執筆者

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

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

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