[K] Bloggerユーザ・管理者必読!モバイルテンプレートのスワイプでのページ切り替えを無効化する方法

最終更新日:
201205070655

かつてはBloggerユーザだった、@knk_nです。おはようございます。

今回は当ブログのトピックからは少々外れるものの、以前から気になっていたBloggerの問題の解決方法を見つけたのでご紹介します。

私のBlogger時代のギモンのひとつですね。
そしてBlogger管理者必読です。

Bloggerモバイルテンプレートへの不満

Googleが提供しているブログサービス「Blogger」。
私も以前使っていたのでよくわかるのですが、一昨年頃Bloggerはスマートフォン向けの「モバイルテンプレート」に対応しました。

aN unsKilled everNoter, Knk_n: Bloggerユーザがモバイルテンプレートを使うべき3つの理由

iPhoneなどスマートフォンでいい感じに見られるようになったのですが、問題がひとつ。

自動ページ切り替えがメンドクサイ

Bloggerユーザならよく見るであろう、スワイプによる自動ページ切り替えです。
一見便利そうなこの機能。実は弊害のほうが多い。

記事ページでは次の記事・前の記事、インデックスページでは次のインデックス・前のインデックスと勝手にページ切り替えされてしまいます。

しかもこのスワイプですが、ムダに精度が高すぎるというかスクロールが少し斜めになった程度でもスワイプと認識されるレベル。

相当意識してスクロールしないと記事を最後まで読むことなんてできません。

この点で多くのBloggerユーザは大きくユーザビリティを低下させ、また損をしていると言わざるを得ません。

モバイルテンプレートのスワイプでページ切り替えをさせない方法

何ごとも調べればあるものですね。
モバイルテンプレートのスワイプでページ切り替えをさせない方法が紹介されていました。

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

私も元Bloggerユーザですので自分のブログで実践してみました。

1. HTMLでショートコードを埋め込む

Screenshot 2012 05 07 5 42 17

Bloggerのダッシュボードのサイドメニュー「テンプレート」で「HTMLの編集」を選ぶ。

Screenshot 2012 05 07 5 42 38

続行続行。

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

このコードを埋め込む。コピペでおk。

2. モバイルテンプレートを”カスタム”にする

Screenshot 2012 05 07 6 05 32

先ほどのダッシュボードで歯車アイコンから入り、

Screenshot 2012 05 07 6 10 16

モバイルテンプレート”カスタム”を選択。カスタムにすると背景などのスタイルがPCテーマと同じになります。

これで完了です。

拙いながらも動画を撮ってみました。スワイプしてもページが切り替わらないことがわかるかと思います。

機能まで含んだデザインを

これで私のBlogger時代のギモンもひとつ解決しました。

デザインとは、単にどのように見えるか、どのように感じるかということではない。 どう機能するかだ。

スティーブ・ジョブズ

改めて思うのが機能まで含んだデザインって難しい。

今回の記事は以前のカスタムツイートボタンと並んで、おすすめ以上に「ぜひやってもらいたい」と願ってのカスタマイズです。

多くのBloggerユーザに浸透するといいな。読者の一人として願ってます。

Categories:
Tags:
記事が気に入ったらシェアお願いします!