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 で個別に設定できます)

実際に閲覧した際のデモ

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


 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でWillFeelTipsをフォローしよう!


  関連記事

FacebookのOGPをBloggerに対応させる方法

前回の記事『自分の指定した任意の場所でJavascriptを実行させる Tips ...

Blogに彩りを持たせるレコメンドリンクの設置 - zenback , LinkWithin , Outbrain

ブログを書くものとしては、一つ一つのエントリーが自分の創作物であり、愛情を持って ...

WordPressなどのブログで自分のサイトがはてブされた時に通知される設定方法

はてなブックマークは、自分のためにブックマークしておくだけではなく、コメント(ブ ...

「この記事が気に入ったらいいね」をブログに設置する方法

記事の最後にFacebookページヘのいいね!やTwitterのフォローボタンを ...

あなたのBlogもアクセスアップ!ソーシャルメディアとSEO効果の関連性とBloggerでの対策

Blogは第三者への自己表現手段であり、記事にした後にレスポンスがあれば良くも悪 ...

 - Blogger