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

2012/02/15　10:20

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 -->