カラーミーネットショップのデザインで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を設定していますね。なにわともあれ、これでネットショップをスマホ対応させることができました。

＝＝＝

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします！

「いいね！」と思ったら、クリックお願いいたします<m(__)m>