はてなブログにパソコンとスマホの表示切り替えボタンを実装する

2015/8/15

スマホPC切替ボタン実装アイキャッチ

私がはてなブログで使用しているのは「Blank」というテンプレート。

Blank – テーマ ストア

 

レスポンシブデザインなのだから、わざわざPC表示に対応させる必要はないっちゃないのだが、スマートフォンからのネット利用者数が多いこのご時世、このブログのように1記事あたりの文量が比較的多い場合は「PC表示への切替え」にも対応させておくだけで、ユーザーに最後まで記事を読んでもらいやすくなるのも事実……ということで、PC・スマートフォン切替えボタンを設置してみました。

はてなブログでの「PC・スマートフォン表示切替え」

はてなブログをレスポンシブデザインに対応させている場合は、PC用とスマートフォン用のcssをワンソースで管理している事になる。

 

PC用とスマホ用のデザインをそれぞれ別のcssで管理しているときは、サイトをスマートフォン用表示にしたときのみ、フッタに「PC表示に切替え」の表示が現れることになっているが、レスポンシブデザインの場合は、どの端末で開いても「PC・スマホ表示に切替え」の表示は現れないので、必要ならば自分で作るしかない。

「PC・スマートフォン表示に切替え」の設置方法

はてなブログ設定→詳細設定→検索エンジン最適化→「headに要素を追加」に以下のソースコードを貼り付ける。

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/swView.js"></script>
<script>
$(function(){
btnPc = 'swPc';
btnSp = 'swSp';
btnAcvClass = 'btnAcv';
vpPc = 'width=1024';
vpSp = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no';
// ViewPort
$('head').prepend('<meta name="viewport" content=' + ($.cookie('swView') == 1 ? vpPc : vpSp) + '>');
setBtn='#'+(btnPc)+',#'+(btnSp); setBtnPc='#'+(btnPc); setBtnSp='#'+(btnSp);
$(setBtn).on('click',function(){
$.cookie('swView', $(this).attr('id') == btnPc ? 1 : 0);
location.reload();
return false;
});
// BtnActive
var cookie = $.cookie('btnAcv');
if(cookie == 'acvPc'){
$(setBtnPc).addClass(btnAcvClass);
$(setBtnSp).removeClass(btnAcvClass);
} else if(cookie == 'acvSp'){
$(setBtnPc).removeClass(btnAcvClass);
$(setBtnSp).addClass(btnAcvClass);
}
$(setBtnPc).on('click',function(){
$.cookie('btnAcv','acvPc',{expires:7, path:'/'});
$(setBtnSp).removeClass(btnAcvClass);
$(this).addClass(btnAcvClass);
});
$(setBtnSp).on('click',function(){
$.cookie('btnAcv','acvSp',{expires:7, path:'/'});
$(setBtnPc).removeClass(btnAcvClass);
$(this).addClass(btnAcvClass);
});
});
</script>

 

これで、レスポンシブデザインでもPCとスマートフォン表示の切替えが出来るようになる。

「PC・スマートフォン表示に切り替え」ボタンを作る

ボタンはヘッダでもフッタでもサイドバーでも良いので、任意の場所に以下のコードを貼り付ける。

 

<div class="switchBtn">
Display mode : <a href="javascript:void(0);" id="swPc">PC</a>｜<a href="javascript:void(0);" id="swSp">SP</a>
</div><!--/.switchBtn-->

 

（設置例）

１はてなブログ切り替えボタン

今はテキストのまま表示させているが、cssでカスタマイズすれば好きなデザインに変更することが可能だ。「PC・スマートフォン表示切り替え」の導入に関しては、こちらの記事を参考にさせて頂いた。

 

▼参考サイト

jQueryでレスポンシブサイトでPC画面とスマートフォン画面の切り替えスイッチを実装する実験

ADVERTISEMENT

hiroseyonaka