2012/02/15

Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする

　Google Bloggerでモバイルテンプレートを有効にすると、閲覧しやすいようサイズを最適化した表示にしてくれます。しかし、閲覧時にちょっと左右にスワイプしただけでページ切り替えを行うというありがた迷惑な機能も併せて付いてきます。

ブラウジングしている時に、誤ってページが切り替わるのはユーザビリティを低下させる原因にもなりますね。そこで、モバイル閲覧時のスワイプによるページ切り替えを無効にするTipsを紹介致しますので、Bloggerユーザーは参考にしてみてください。


Inutuka Linの研究室: Bloggerハック　〜スワイプ無効化（テスト版）〜


こちらを参考にカスタマイズを行いました。

Step1：テンプレート＞HTMLの編集から</head>の手前に下のコードをペースト

<!-- No Swipe Mobile -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
 window.addEventListener = null;
})()
</script>
<style>
canvas {display: none;}
</style>
</b:if>
<!-- /END -->

追記：Happy-Go-Luckyさんによると、動作しないjsやウィジェットが出るので、下記のように修正

以下のコードを </body> の直前に追加
<!-- No Swipe Mobile -->
<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
(function() {
  var c = document.getElementById("main");
  c.addEventListener = null;
})()
</script>
<style>
  #spinner-canvas {display: none !important;}
  #left-arrow {display: none !important;}
  #right-arrow {display: none !important;}
</style>
</b:if>
<!-- /END -->

Step2：モバイル テンプレートを「カスタム」にする

以上で完了です。簡単ですね！

参照元ページからの変更点

  • addEventListener=nullを行うタイミングをページ読み込み時に実行させることで、読み込み完了前にスワイプが動作してしまうのを防ぐ
  • モバイルテンプレートカスタム化に伴う最低限のCSSを記述を簡略化
    （モバイル閲覧時のCSS編集方法は .mobile で個別に設定できます）

    参考：Bloggerを便利に利用する方法 Tipsまとめ

実際に閲覧した際のデモ

このように、ストレス無くBrowsingすることが可能になります。 Bloggerを利用している方は、設定されることをおすすめします。
Time: