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

＝＝＝

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

ABOUT ME

コレカラウェブ

コレカラウェブです。フリーランスとしてWebライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格：認定SEOコンサルタント・SEO検定1級・Webライティング実務士・ウェブ解析士・応用情報技術者・情報セキュリティスペシャリスト・簿記2級・FP2級・AFPなど。

BLOG：https://corekara-web.net/blog/