2012/05/22

[blogger]モバイルカスタムテンプレートを使いたい!ページトップに戻るボタンをモバイルでは表示させない!・・あと、埋め込み動画の対処。


以前に、
【blogger】「ページトップに戻る」ボタンを付ける。そして回転させる・・・。 - sunabox
いくつかのサイトで、画面を下にスクロールすると現れる画面最上部に戻るボタン。 ...

こんな感じでつけた「ページトップに戻るボタン」(正式名称なんていうんだろ)
回転させて、更にマウスポインタを離した時にも回転するのがお気に入りでしたが、Chromeのアップデートが来て以降、何故かポインタを離した時の回転がなくなってしまって(´・ω・`)です。

そちらは、いずれ対処するか諦めるかするとして、今回は、ちょっと違う方向です。

bloggerのモバイルテンプレートの「カスタム」を設定した時に、「ボタン」を表示させない方法です!

「カスタム」を選ぶと、画像のリサイズもしてくれるし、背景画像もイメージのまま使ってくれるしいいんですが、何も設定してない状態で、ページトップボタンを追加していると、紹介したコードだけでは、モバイル画面でも矢印が表示されてしまって、それが大層邪魔だということに気付きました。

そこで、
モバイルでもLinkWithinは出しておく!画面からはみ出さないようにするCSS設定。 - sunabox
Linkwithinでも設定できたし、これでも出来るのかと思ったら、とても簡単だったのでご紹介。


●カスタムCSSに追加

.mobile #back-top{display:none;}
はい、おしまい・w・

追加した方法によっては、『#back-top』の部分は、他の名前になっているかもしれませんが、基本的には『.mobile』を付けて設定するだけです。

これで、スマートフォンなどでカスタムテンプレートを表示させた時、貴重な画面を矢印に占領されることなく使うことが出来ますよ~。


おまけ

おまけと言って、こちらがメインになる人もいるかもしれませんが。

同じくモバイルテンプレート使用時に、youtubeやUSTREAMなどの埋め込み動画を、はみ出さないようにする設定です。

こちらも、CSSの追加から、
.mobile table, .mobile iframe{
height:auto !important;
width:auto !important;
}
と追加するだけです。

今までスマートフォンで見た時に、サイズ変更されず横に大きくはみ出してしまっていた埋込み動画が、綺麗に画面幅に収まってくれます。
youtubeなどの埋め込み動画をよくブログに載せるんだって人は、こちらの設定をしておくと気分良くスマートフォンでのチェックが出来るかと思いますよ!

0 件のコメント:

コメントを投稿