PCサイト表示とスマートフォン表示を行き来するボタンの設置

a-blog cms では、PC用とスマートフォン用のテーマをそれぞれ作成・適用できますが、スマートフォンでの表示の場合、スマートフォン用だけでなく、PC用の表示を見たいという場合があります。

ここでは、スマートフォン用テーマでの「PCモードに切り替える」ボタン、PC用テーマでの「スマートフォンモードに切り替える」ボタンの作成について解説します。

サンプルコード(スマートフォン用テーマの任意の場所に追加)

<form action="" method="post" id="switch_theme">
<input type="hidden" name="cookie[]" value="acms_http_header_User-Agent" />
<input type="hidden" name="cookie[]" value="js-switch_theme" />
<input type="hidden" name="acms_http_header_User-Agent" value="pc browser" />
<input type="hidden" name="js-switch_theme" value="on" />
<input type="submit" name="ACMS_POST_Cookie" value="PCモードに切り替える" />
</form>

サンプルコード(PC用テーマの任意の場所に追加)

<form action="" method="post" id="switch_theme" style="display:none;">
<input type="hidden" name="cookie[]" value="acms_http_header_User-Agent" />
<input type="hidden" name="acms_http_header_User-Agent" value="Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16" />
<input type="submit" name="ACMS_POST_Cookie" value="スマートフォンモードに切り替える"  />
</form>

<script type="text/javascript">
$(function() {
if ( 'on' == $.cookie('js-switch_theme[0]') ) {
$('#switch_theme').show();
}
});
</script>

基本的に、PC、スマートフォンとも、移行先のユーザーエージェントの内容を渡して再度同じページの読み込みをしているものになります。

上記のPC用テーマに追加するコード中では、移行先となるユーザーエージェントの内容はiPhoneのものになっていますので、必要に応じて変更してください。また、スマートフォン用テーマに追加するコード内では、移行先となるPCのユーザーエージェントとして仮に「pc browser」としてあります。こちらも必要に応じて変更してください。

PC用テーマのscript部分は、スマートフォンでの表示時のみ切り替えボタンを表示するためのものです。