スマートフォンページに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サイトを閲覧できるようになります。

スポンサーリンク

ページの先頭へ