WEBサイトの振り分けについて

WEBサイトの振り分けについてご教授いただきたいと思い、投稿しました。

○ドメインと各サイトの設置位置です。
ドメイン：http://abc.com

モバイルサイト：http://abc.com/
PCサイト：http://abc.com/pc/
スマホサイト：http://abc.com/pc/sp/

※最初にモバイルサイトを作成してしまい、PCサイトとスマホサイトが変な位置にあります。

.htaccess、JavaScriptで振り分けを行ってみたのですが、うまくいかない状況です。

○やりたいこと

モバイルサイトに
PCからアクセス→PCサイトへ
スマホからアクセス→スマホサイトへ

PCサイトに
モバイルからアクセス→モバイルサイトへ
スマホからアクセス→スマホサイトへ

スマホサイトに
モバイルからアクセス→モバイルサイトへ
PCからアクセス→PCサイトへ

ネットでいろいろ調べたのですが、うまくいきません。

上記のやりたいことを実現するには、どのように記述すればよろしいでしょうか。
トップページだけの振り分けを考えております。

お詳しい方がいらっしゃいましたら、
.htaccessもしくはJavaScriptでのご教授をお願い致します。

どうぞ宜しくお願い致します。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/12/25 17:40

振り分けが交錯するので難しいと思います。

さすがそこまで複雑な物は経験ないです。

＞.htaccessもしくはJavaScriptでのご教授をお願い致します。
　異なるアプローチで改善されることをお勧めします。そのほうが本来の方法ですしSEO的にも優れています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［IHTML4.01仕様書.2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　想定されている物は、PC,スマホ,携帯電話のようですが、ウェブサイトを利用するユーザーエージェントは、スクリーンリーダー、印刷機、展示端末、検索エンジンなどもあるのです。

Q: 想定されている三つの端末向けの内容はまったく異なるのですか？
　もしそうでないなら、トップページはどのユーザーエージェントにも対応する物にして、スタイルシートをつかって端末ごとに表示を変えるのが良いです。

　現在モバイル用(handheld)になっているページで、パソコンなどでないと利用できないページへのリンクはスタイルシートで隠してしまいます。パソコンやスマホで開いた場合はモバイル専用のページへのリンクは隠してしまいます。
　たったそれだけで解決するのでは・・・・

　具体的には
<!-- スマホ・パソコン -->
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/screen.css">
<!-- 携帯電話、PDA用 -->
<link rel="Alternate StyleSheet" type="text/css" media="handheld" href="/styleSheet/handheld.css" >
<!-- 印刷用 -->
<link rel="styleSheet" type="text/css" media="print" href="./styleSheet/print.css">

ディレクトリ構成は
abc.com
　|-- 共通コンテンツ
　|-- /mobile 携帯電話PDA専用コンテンツ
　|-- /pc PC専用--でなくても良いが(^^
　|　　|-- /sp スマホ専用

　なお、PC用もスマホ用もメディアタイプはscreenですから、同じものにすべきです。
　⇒CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き( http://webdesignrecipes.com/web-design-for-mobil … )

この回答へのお礼

ご丁寧にアドバイスをいただきありがとうございます。
ベストアンサーにさせていただきます。

お礼日時：2014/12/26 12:12