2012/02/15

Bloggerモバイルテンプレート フリック無効化のやり方


みなさんお久しぶりです!11月から更新をストップしておりまして3ヵ月程放置状態になっていました。 マズいマズい。。。という事で久しぶりの記事を書いていこうと思います!

テーマ「Bloggerモバイルテンプレートのフリック無効化大作戦!」


実は先日このブログを読んで頂いている方からコメントがありました。

「このブログ記事の内容は良いのにモバイル(きっとスマホ)で見ると勝手に前後のページに移動してストレスが溜まる。改善して頂きたい」と。。。

実はこのBloggerってやつは便利な機能が備わっておりましてPCから見るのとスマホから見るのを自動で判別し、それぞれの端末に合った表示をしてくれるのですが、スマホから見た場合に指を左右にフリックすると現在見ている記事の(前の記事/次の記事)と移動してくれる便利な機能が備わっているんですね!それが結構敏感に反応してしまい、意図せずページを移動するという問題が起きていました。

せっかく読んで下さっている方の改善案、対応したい気持ちはあるが、一体どうやったらフリックの無効化が出来るのか全く分かりませんでした。

「Blogger フリック ページ移動 無効」などでググってみても出てこず。。。

そんなある日一つのブログを見つけたのです。

ブログ:Felidae

実はこのブログスマホから見るとフリックしてもページを移動しない!!

僕はその奥義を教えて頂きたく運営者の756Rさんに問い合わせ!!!

そうするとわざわざ丁寧に分かりやすく教えてくれました!(本当助かりました!)

*正確には756Rさんはブログをカスタムしてるんだけど、そのカスタムで勝手にフリック無効化になっていた(理由は分からない)→ 自分の為に無効化する為の情報を探して教えてくれた。→ 感謝すべき経緯があったのです!



今日はその奥義「Bloggerモバイルテンプレート フリック無効化」の手順を公開したいと思います!


① Bloggerのダッシュボードで「デザイン」を選択

② 「HTML の編集」を選択

③ テンプレートを編集でcommand + f(Mac) Ctrl + f(Windows)を押して「</head>」を検索

④ </head>の前に秘密のコードをペースト

<秘密のコード>

<b:if cond='data:blog.isMobile'>
     <script src='http://dl.dropbox.com/u/393924/hackblogger.js' type='text/javascript'/>
    <style>
   body.mobile  {
background-size: auto;
}
.mobile .body-fauxcolumn-outer {
background: transparent none repeat scroll top left;
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
padding: 0 0;
}
body.mobile .AdSense {
margin: 0 -0;
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
canvas {
    display: none;
}
</style>
</b:if>


⑤ 秘密のコードを埋め込んだら保存。

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

これでモバイルから見た時にフリック操作が無効になっています。


自分で分からない事があればいつもGoogle先生に聞いてるんですが今回の「モバイルテンプレートフリック操作無効化」には大変悩まされました。。。


本当756Rさんありがとうございました!


そしてこの奥義の情報源 Inutuka Linの研究室 さん 勉強になりました!
ありがとうございました!


今回の経験を通して、この KYAN BASE も誰かの役にたてるブログにしていきたいと再認識!


(報告!!!)
KYAN BASEのURLが変更しました!

  (旧URL) http://kyanbase.blogspot.com/

(新URL)   http://www.kyanbase.com/

ブックマーク等されている方は変更ヨロシクお願いします!

今後もKYAN BASEの応援ヨロシクお願いします!





このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿

他の記事紹介

Related Posts Plugin for WordPress, Blogger...