スマートフォンページにPCサイトへのリンクを設ける

Webサイトにアクセスしてきた端末をユーザーエージェントで自動振り分けしているサイトがありますが、スマートフォンページ内にクエリパラメータを使ったPCサイト閲覧のリンクを設ける方法を解説します。

ユーザーからのアクセスを自動振り分けしているものの、スマートフォンからPCサイトを閲覧できないサイトも多く存在します。
しかしスマートフォンユーザーでもPCサイトを閲覧したい人はいますから、PCサイトへ切り替えるリンクボタンをスマートフォンページに設けることはユーザビリティの向上につながります。

【コンテンツ】

  1. クエリパラメータでPCサイトを閲覧できるようにする
  2. .htaccessに判別ルールを追加する
  3. HTMLにPCサイトへ移動するリンクを追加する

クエリパラメータでPCサイトを閲覧できるようにする

クエリパラメータとは検索などでよく使われますが、URLの末尾に文字列を特定の形式で付加し、クライアントからサーバーに渡す情報です。
URLの末尾に「?パラメータ名=パラメータ値」の形式で記述します。「?」以降をクエリストリングといいます。

このクエリパラメータを使い、PCサイト閲覧のリクエストだと判別します。
例えば、「http://example.com/?site=pc」のときはPCサイト閲覧リクエストだとします。

.htaccessに判別ルールを追加する

自動振り分けを、.htaccess にユーザーエージェント判別ルールを記述することで行っている場合は、クエリパラメータを判別する条件も追加します。

以下は .htaccess の記述例ですが、iPhone, Androidスマホ, Windows Phone のアクセスを、spディレクトリの下にあるスマートフォンページにリダイレクトしています。

これに、クエリストリングが「site=pc」の場合はリダイレクトしない条件を追加します。

以下が条件を追加した .htaccess の記述です。
「RewriteCond %{QUERY_STRING} !site=pc」の行を追加しています。

上記の記述では、トップページ以外も「!site=pc」を付けないとスマートフォンページにリダイレクトされてしまいます。
トップページにだけ振り分けルールを適用する場合は以下のようにします。

この記述なら、一旦PCサイトに入ったらずっとPCサイトに滞在できます。

HTMLにPCサイトへ移動するリンクを追加する

スマートフォンページには、以下のようなリンクを設けておきます。
トップかボトムにリンクボタンを設けておくのがよいでしょう。
これでスマートフォンからも自由にPCサイトを閲覧できるようになります。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ