IT

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

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

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

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

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

$(function() {
     var viewport = document.createElement('meta');
     viewport.setAttribute('name', 'viewport');
     viewport.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no');
     document.getElementsByTagName('head')[0].appendChild(viewport);
});

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

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

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

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。記事執筆・ホームページ制作・メディア運営・コンサルティングのお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

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

CAPTCHA