この記事に含まれるタグ (Keyword) :
スマートフォン iPad iPhone DS Wii jQuery Lightbox
最近は PC・スマートフォン・タブレット時代 などとも言われるように、ブログの閲覧環境も多種多用になっていますね。 現在、FC2ブログでは PC用・スマートフォン用・携帯(ガラケー)用 のテンプレートがあります。 振り分けは 以下のような感じ。
- PC用テンプレート が適応
PC,iPad,3DS,DSi,Wii,PSP,PS3,PSVita...等
追記 : 2013年3月頃~ iPad はスマホ用にも切り替え可能になっています。 - スマホ用テンプレート が適応
※殆どのFC2ブログで、PC用テンプレートとの切り替えが可能
iPhone,iPod touch,Android,Windows Mobile,BlackBerry,...等 - 携帯用テンプレート が適応
スマートフォンに分類されない 各社携帯電話
下の図は、このサイトで良くアクセスされるページ(1週間分の上位集計)です。
クリックで画像を拡大します
主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。
という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。
- ある条件の時は lightBox を機能させない
jQuery lightBox (拡大した画像や背景の何処をクリックしても閉じられるようにしてある) を タッチ操作のもの(iPad,iPod,iPhone,Android の場合) と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい! - ナビゲーションメニューの誤タップ対策
タッチ操作のもの(iPad,iPod,iPhone,Android,3DS 等) では、:hover(マウスオーバー)でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ(誤クリック)していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。
クリックで画像を拡大します
クリックで画像を拡大します
FC2ブログ共有テンプレート 『ari_seo1』『ari_seo2M』『ari_seo2L』 のナビゲーションは 今のところ 旧タイプ のままで、この部分を修正する予定はしていません。 ユーザーさんは、使いやすいものを選んで 必要に応じて各自で書き換えて使ってください。
1. ある条件の時は lightBox を機能させない
// <![CDATA[
$(function(){
var agent = navigator.userAgent;
if( ($(window).width() > 800) && (agent.search(/(Android)|(iPhone)|(iPad)|(iPod)|(Nintendo)/i) == -1) ) {
$('#content a[rel*=lightbox]').lightBox();
}
// ]]>
</script>
協力 (今回もコードのチェックと動作確認などでお世話になりました。)
- GANGAN-METALLIC ( @COLTdeGO さん)
追記 (2012/04/05) :
$(window).width() が取得する値が DS で見た時に期待とは異なっていたので、 $('html').prop('clientWidth') を試してみたところ、IE や Firefox ではOKなのに、Chrome と Opera で起動しなくなってしまいました。 さらに $('html').width() も試してみたのですが、これもブラウザ表示領域とは異なる感じでした。 なかなか難しいですね。。 取り敢えず $(window).width() か $('html').width() のどちらかが無難なのかも。。
ウィンドウサイズ: 横 1280 px, 縦 720 px (window).width()
- jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる
- jQueryでclientWidthが使えない - JavaScript - 教えて!goo
- ウィンドウサイズを取得 | WEBプログラム覚書
別に lightBox に限らず応用できると思います。 「if width(表示幅)が 800pxより大きく、且つ、スマートフォン用UA(ユーザーエージェント)でない場合・・・」 が目的の条件式 にしてあります。 801px以上 としたのは、Wii(Wii版 Opera9)の解像度が 横800px(固定)だからです。 何故か カクカクオーバーレイが機能する時と、クルクルするだけでいつまでも画像が表示されないケースがあるようなので... (法則は不明) 普通に画像を開く方が 良心的な気がします。
追記 (2012/04/04) :
3DS の $(window).width() ウィンドウサイズは 横980px でした (モニターは 横320px, 他 ズーム次第で変動..)。 そのため、除外対象に Nintendo を加え 3DS や DSi を除外できるように変えました。 当然、Wii も含まれます。 800px には拘らなくても良いかも。。
※PS3(プレイステーション3) からのアクセスもちょこちょこありますが、こちらは 解像度 1,920x1,080 の場合が多く、かなり快適に使えるみたいなので lightBox もおそらくスムーズに動くのではないかなと... 予想。 PSP は 800px以下 なので、除外対象になります。
それ以外のものも 機能はするけれど、開いたものを触って不意に閉じてしまったり... など閲覧者の予測しにくい動作になるよりは、普通にリンクで開く方がいいかなと思いました。
2. ナビゲーションメニューの誤タップ対策
※共有テンプレートユーザーさん向けの説明 になります。
※ class="navitop" が入っているリンクです。 間違えないようにご注意ください。
<a href="javascript:void(0);" class="navitop<!--各エリア変数--> this<!--/各エリア変数-->">
こんな感じにします。 href=" " を省いてしまうと、IE6,IE7 では :hover が効かなくなってしまうので、href="javascript:void(0);" (何もしない) を入れておきます。 リンク先はないので target="_blank" なども削除しておいてください。
これだけでもOKなのですが、リンクではない部分とリンクを明確にするために
スタイルシートの該当部分に
#nav .navitop {
(中略)
cursor:default;
}
を追加しておくと良いかと思います。
その場合、プルダウン無しでリンクを残す部分には
<a href="./archives.html" class="navitop<!--各エリア変数--> this<!--/各エリア変数-->" style="cursor:pointer" title="サイトマップへ">
のようにしておくとリンクと判りやすいと思います。
iPad など タッチ操作のものでは、タップ(クリック)してプルダウンを開くような動作になります。 プルダウンするメニューが長くなっている場合、下の方は 環境によっては選択しにくいと思いますので、その辺りも考慮してみると良いかもしれません。。
今回の変更は、テンプレユーザーさんからの要望 がキッカケで考えてみたものです。 確かにこの方が良さそうな感じもしたので、このサイトのものも変更してみました。
少しずつでも 閲覧しやすいブログ に近づけていきたいですね。。あ... ちなみに私、スマートフォン持ってないです。。 しょぼ~ん
追記 : 2012/04/28~ 旦那が iPad を持つようになったので 動作確認はOKです。
キーワード検索 : スマートフォン iPad iPhone DS Wii jQuery Lightbox
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。
URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-218.html
2012/04/03 ~ | Comment (7) tweet? | ↑ ページ先頭へ ↑ |- 文字サイズ変更ボタン をスマートフォン用テンプレートに設置
- 検索結果が何件かを表示する方法 (FC2 新変数)
- iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ
- スマートフォン用テンプレートのプレビュー方法
- ツイート数の表示を テキストで表示させる方法
- Newマーク 表示スクリプト を少し変更しました。
- FC2ブログで 同一ドメインの追加ページ を利用する
paruparuさん、いつも丁寧にいろいろ教えて下さりありがとうございます!!
わたしはバッチリだー。と思っていたのですが…
ipadで閲覧してくれている知人に、まだカテゴリ選べないよー、と
指摘されてしまいました。なるほどー。
そう思ってみると、paruparuさんのブログのナビゲーションメニューでは
親子カテゴリが展開型ではないので、どうやらタッチ系のデバイスでも閲覧しやすそう。
どこかに方法が書いて有りそうな気もするのですが、発見できず…。
お時間のあるときにでもご教授いただければ嬉しいです。
自分で自分のブログを確認しても、閲覧してくれている人程見ていないものですね;
ちなみに、わたしはスマホテンプレートも利用中で、
こちらは自分のブログもよくスマホで見ますが、とっても使いやすいです♪
ありがとうございます!
単純プルダウンできました!
最新コメントのスペースも追加しました。
たぶんnewマークで苦戦してた時に消しちゃったんだと思います;
(わたしも¥マークが出てしまいあわあわしてました)
また、非表示カテゴリの記事を読んで、
ちょっぴりカテゴリの変数のこともわかりました。
paruparuさんの記事はいつも丁寧でわかりやすいです。
いまくらいのカテゴリ数であれば問題ないのですが、
生後1年までは1月毎にカテゴリ分けようと思っているので…
増えてきて見難くなったら、親カテゴリのリンクをnavitopと同様に
無効にしようかなと思います。
⇛http://toypoodles.blog.fc2.com/?template=navicategory&index
親カテゴリ一覧に飛べなくなってしまうので、悩ましい所ではあるのですが、
スマホも含めて、今後タッチ系のデバイスでの閲覧者増えそうなので、
TOPはそうしようかなぁ、と。PCの人は、サイドバーにもリンクありますし。
paruparuさんのサイトは特性上PCユーザーが多いかと思いますが、
わたしはアメブロから移ってきたのもあって、スマホのUUがPCと同等近くあります。
スマホはPV増えがちなので、PVベースだと半数以上かもしれません。
(スマホでPC版を見ている人がどれくらいいるか不明ですが…)。
わたしも、あまり使わなくなっていたipadで自分のブログをチェックするようになりました。
スマホやipadってPCほどには、自由に閲覧できないので、
paruparuさんのテンプレートのようにナビゲーションがしっかりしていて、
情報がTOPの方で探しやすくすっきりしたページは、すごく閲覧しやすいです。
iphone5は大きくなる?なんて噂もありますし、PC版テンプレートで、
スマホから閲覧する人も増えるかもしれないですよね。
きっとまたいろいろわからなくて質問することもあると思いますが、
その際にはよろしくお願いします。今回もありがとうございました!
ちょっと変えた部分だと思うのですが、
IE で見ると 子カテゴリー が 2行分 になってしまっているので
以下のようにすると、ブラウザを問わず希望通りに表示できると思いますよ。
<span class="f_right"><%category_count></span><%category_name>
数箇所あると思うので、修正してみてください。
ちゃんと各ブラウザで確認しないとダメですね…!
わたしはchromeなので、全然気が付きませんでした。
教えていただいたとおり(?)修正したところ、
カテゴリ名と、記事数の表示が逆になってしまいます…。
何か、他に修正すべき点があるのだと思うのですが…。
何度も何度もお手数をおかけしてすみません!よろしくお願いします。
子カテゴリー に関連した3箇所 (category_sub_hasnext と category_sub_end と category_nosub) を ↓ のように直せば 多分大丈夫なハズ。。
一応、再度テスト済みです。
<li><a href="<%category_link>"><span class="f_right"><%category_count></span><%category_name></a></li>
おかげさまで、無事修正出来ました。
何度もお手数をかけてすみません。
<li><a href="<%category_link>">の、最後の"が抜けておりました。。。
いろんなことわからないまま、paruparuさんのソースをコピーさせて頂いて、
使っているもので…。お恥ずかしいです!
ありがとうございました。
コメントを投稿する 記事: iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ
お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。
7 Comment