楽天GOLDでスマートフォンページを作成する際必ず使うべき「viewport」
こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。
こんにちは、昨日何ヶ月かぶりに38度の熱が出たオガリア中村です。病院で熱を測る時はいつも、できる限り高熱の測定値が出る様にがんばってしまいます。
さて本日は、楽天ショップのスマートフォン特設ページ作成について、書きます！
楽天の場合、「スマフォTOPページ」と「商品ページ」についてはRMSに編集機能がついているのですが・・・企画用の特設ページ等については自身でHTMLページを作成しなければなりません。その際に最低限必要な「viewport」の設定についてお話します。
画面の大きさに合わせて横幅を100%表示にする「viewport」
スマフォでHTMLページを開いた際の初期表示は横幅980pxとなります。つまりそのままでは、文字や画像が小さく表示されてしまいます。
それを、スマフォ画面の横幅にピッタリ合わせて、全体の表示や文字の大きさを調整してくれるのが「viewport」です。
設定は簡単！以下のHTMLをコピペします。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5, user-scalable=yes">
上記を、<head>～</head>内に挿入するだけでOKです。
PC用の画像を横幅ピッタリに表示するには
PC用に作成した画像も、スマフォで横幅ピッタリに表示させるには・・・「width=”100%”」を使えばOKです。
<img src="***.jpg" width="100%">
意外と簡単に出来ると思いませんか？＾＾
尚、以前記事でご紹介した「smartphone simulator」を使えば、PCブラウザからスマフォ表示を確認出来ます。
ちなみに、楽天ショップの販促を支援するオガリアでは、『スマフォ用バナー素材』や、『楽天スーパーセール用のスマフォHTMLテンプレート』もご用意しておりまして。
(楽天スーパーセール対策「お手軽パッケージ」今回も準備しています！)
スマフォ運営が不安な店長様も、ご安心を。
次回はスマフォ特設ページに「検索窓」を設置する方法について書きたいと思います！
では。オガリア中村(微熱)でした～！
(ご不明な点は、コメント欄もしくはogaria@ogaland.comへ！)
コメントはまだありません。