fc2ブログでPCサイトURLとスマホサイトURLを取得して選択できるようにする

HTML/CSS/CMS(サイト構築)
(お約束)ご利用は自己責任でお願いします

fc2ブログでは、スマホでアクセスすると

『hoge.fc2.com/?sp』 や
『hoge.fc2.com/123.html?sp』

というように後ろに『?sp』 が付きます。

しかしスマホでアクセスしても『?sp』 が付かず PC用サイトでアクセスしてしまうことがあります。またスマホでもPC用サイトで見たいときもあります。

そこで『?sp 付きのURL』 と『?sp無しのURL』 へのリンクを表示してユーザさんに選択してもらう方法がこちらです。Javascriptを使います。

<body>
<script type="text/javascript">
var thisURL = location.href;//今アクセスしているURLを取得
if (thisURL.indexOf('?sp') != -1) {//URLに?spを含んでいたときの処理
	var PC_URL = thisURL.replace("?sp","");//PC用URLはthisURLから?spを削除
	var SP_URL = thisURL;//スマホ用URLはそのまま
}
else{	//URLに?spが無いときの処理
	var PC_URL = thisURL;//PC用URLはそのまま
	var SP_URL = thisURL+"?sp";//スマホ用URLは後ろに?spを付ける
}
document.write('<div class=""><a href="' + PC_URL + '">PC用サイトで見る</a> | <a href="' + SP_URL + '">スマホ用サイトで見る</a></div>');
</script>
</body>

説明のためにいちいちコメント付けましたが、ごちゃごちゃするので、実際のソースではコメントを取ってもいいと思います。

document.write の部分はHTMLなので、適時CSSで表示を修飾してください。

(お約束)ご利用は自己責任でお願いします

コメント

タイトルとURLをコピーしました