読者です 読者をやめる 読者になる 読者になる

よなかのはなし

http://www.hiroseyonaka.com/

はてなブログに「PC・スマートフォンの切り替えボタン」をつけました

f:id:hiroseyonaka:20160527130312p:plain

私がこのブログに使用しているのは「Blank」というテンプレートで、トレンドを押さえてきっちりとレスポンシブデザインにも対応している。


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


f:id:hiroseyonaka:20160120160634p:plain

Blank - テーマ ストア

はてなブログでの「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-->


(設置例)

f:id:hiroseyonaka:20150815103551p:plain


このサイトではテキストのまま表示させているが、cssでカスタマイズすれば好きなデザインに変更することが可能だ。


「PC・スマートフォン表示切り替え」の導入に関しては、こちらの記事を参考にさせて頂いた。