SIRIUS(シリウス)のiPhoneサイトでPC表示を可能にする切り替えボタンを実装する【レスポンシブテンプレート限定】

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

iPhoneサイトでPC表示を可能にする切り替えボタンを実装する【レスポンシブテンプレート限定】

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

この記事はレスポンシブテンプレート限定の内容です。

通常のブログなんかだとPCはPC用レイアウトで、
iPhone(スマホ)ではスマホ用に最適化されたレイアウトで表示された方が
とても見やすいんですね。

 

でもECサイトや商品紹介サイトなんかだと
余計な表示は省いたスマホ用レイアウトではなく、
PC用レイアウトでサイト全体をじっくり見渡したいと思う時が
たまにあるもんです。

 

こんなとき、iPhone(スマホ)サイトの先頭や最後あたりに
「PC・スマホ」切り替えボタンがあって
PCボタンをタップするとPCレイアウトに切り替わり、再度スマホボタンをタップすると
通常のiPhone(スマホ)レイアウトに戻ってくれたりするとめっちゃ嬉しくないですか。

 

サイト作運営側にしてみれば、表示方法が選択可能な2パターンあった方が
よりじっくりサイトを見てくれるという期待もあるでしょう。

 

これ、以前から挑戦はしてたんですが、
通常のシリウステンプレートで実現させるのは難しかったんです。

 

しかしレスポンシブデザインテンプレートなら
なんとかなります。

 

こちらがその実装キャプチャ画像。

 

キャプチャ画像

 

”PC表示”をタップすると…PCと同じ画面に変わります。

 

キャプチャ画像

 

今回の「PC・スマホ」切り替えボタンは、PCで見た場合はボタンが表示されずiPhone(スマホ)で見たときのみボタンが表示されるというものです。

 

ということでSIRIUS(シリウス)への実装方法をご紹介します。

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


てっぺん