楽天GOLDでスマートフォンページを作成する際必ず使うべき「viewport」

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました!こちらからご確認できます。

楽天GOLDでスマートフォンページを作成する際必ず使うべき「viewport」

こんにちは、昨日何ヶ月かぶりに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へ!)

  1. コメントはまだありません。

  1. トラックバックはまだありません。