2018.01.26 Fri

PC用とスマホ用サイトを自動振り分けする方法


こんにちは、戸井です。

今までPCサイトだけだったけど、新しくスマホサイトを作った!という方はいらっしゃいますか?
もしかして、スマホでもPCサイトが見れたり、PCでスマホサイトが見れる状態になってないですか?
デバイスにあったサイトが見れないという状態は、改善すべきです。
なので、「.htaccess」を使用して、スマホサイトとPCサイトを振り分ける設定をお伝えいたします。

ファイル構成例

下記が今回設定をするファイル構成の例です。

もちろん、このようなファイル構成でなくても設定は可能です。

 

1.全てのページをそれぞれにリダイレクトさせる場合


全てトップページにリダイレクトさせる方法です。
下記を「.htaccess」に記載します。

RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

 

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

こちらには、URLに/sp/を含まずスマホで閲覧した場合は、ファイル名の前にsp/を追加するという設定です。

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /

こちらには、URLに/sp/を含みスマホ以外で閲覧した場合は、URLからsp/を取り除くという設定です。

 

2.全てトップにリダイレクトさせる場合


PC用サイトとスマホ用サイトのそれぞれのファイル名が違う場合、先ほどお伝えした方法では正しくリダイレクトされません。
その場合、スマホサイトからのアクセス全てをTOPにリダイレクトにしたほうがいいです。

RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/ [R]
RewriteBase /

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ / [R]
RewriteBase /

 

まとめ


いかがでしたでしょうか?
折角作成したサイトなので、リダイレクトを設定して、デバイスにあったサイトを閲覧してもらいましょう。

WRITERこの記事を書いた人

戸井

戸井

宮崎オフィスの戸井です。 よろしくお願いします。

宮崎オフィスの戸井です。 よろしくお願いします。

CATEGORY

Genius Web in Japan コーポレートサイト

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW

CATEGORY