カラーミーネットショップのデザインでviewportを設定する方法

どうも、久しぶりの更新です。個人的などうでもいい日常ネタについてはfacebookページにて書いていくことにしたので、こちらの方の更新が止まってしまっていました。というわけで4月分の投稿数を稼ぐためにちょっとしたエントリーを書きます。

業務でGMOグループが運営している「カラーミーショップ」のネットショップの構築をしているのですが、作成したお店をスマホで表示させるときのテクニックを紹介します。

カラーミーショップは簡単なデザインの変更は可能なのですが、制約が多く、特にheadタグの中身についてはカスタマイズすることができなくなっています。となると、スマホに対応させるためのviewportの設定もできないんですよね。どうしようかなー、なんて思っていたのですが、テンプレートのカスタマイズでbodyタグ内の編集は可能なので、headタグ内にviewportの設定するmetaタグをJavaScriptを使って動的に追加することにしました。

コードはこんな感じです。

このJavaScriptのコードをbodyタグのどこかにscriptタグを使って書けばOKです。

カラーミーショップではもともとjQueryのライブラリは組み込まれているので、上記のようなコードで動的にviewportを設定したmetaタグを追加することが可能です。

カラーミーショップで配布されているスマホ対応をうたっている公式テンプレートも同じような方法でviewportを設定していますね。なにわともあれ、これでネットショップをスマホ対応させることができました。

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

あわせて読みたい


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&ライター。フリーランス目指していろいろと活動中。このブログではWeb制作やライティングでお役に立ちそうは知識から、ドレッドの雑記的な内容まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

jQuery | Posted on 2014/04/28 18:20

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です