私がはてなブログで使用しているのは「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・スマートフォン表示切り替え」の導入に関しては、こちらの記事を参考にさせて頂いた。
▼参考サイト
