最近は 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 を機能させない
<script type="text/javascript">
// <![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>
関連記事
協力 （今回もコードのチェックと動作確認などでお世話になりました。）
追記 （2012/04/05） ：
$(window).width() が取得する値が DS で見た時に期待とは異なっていたので、 $('html').prop('clientWidth') を試してみたところ、IE や Firefox ではOKなのに、Chrome と Opera で起動しなくなってしまいました。 さらに $('html').width() も試してみたのですが、これもブラウザ表示領域とは異なる感じでした。 なかなか難しいですね。。 取り敢えず $(window).width() か $('html').width() のどちらかが無難なのかも。。
別に 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です。
FC2ブログを スマートフォン（iPhone， Android， Windows Mobile 等） 及び iPod touch から閲覧する時に適応される テンプレート、これをカスタマイズ出来るようになりました！ 2011年8月30日頃～ 一部サーバーで導入， 2011年9月7日 公式アナウンス 有り
でも、「iPhone とか持ってないし...」 という方も多いですよね。 私も持っていないので 殆どが手探りの状態ですが、スマートフォンを持っていなくてもプレビューすることは可能ですので、その方法をいくつか紹介します。
まず、知りたいのは 今どんな見え方になっているかですよね。 現在FC2ブログで用意されている スマホ用公式テンプレートは 2種類あるのですが...
追記 （2012/04/24） ：
今は 公式・共有で100種類以上の スマートフォン用テンプレート が使えるようになっています。
IE や Sleipnir 等 （Trident エンジン） のブラウザでは 確認できない CSS設定 がいくつか入っています。
また、それ以外のブラウザでも （カスタマイズしない状態では） 各所のリンクをクリックすると パソコンでの表示に戻ってしまうので、色々と不都合があります。 （※カスタマイズすれば、辿りやすいリンクに変更も可能）
と、いう訳で...
Safari のユーザーエージェントを変更して iPhone の実際の表示に近いもので 動作確認（プレビュー）をする方法
と、Paroday（@paroday）さん から教えて頂いたので、早速 Safari（Windows版）をダウンロード。 以下の手順で設定しました。 簡単です^^
最初に 1～3 の設定をしたら、後は 4 のアイコン → 開発 → ユーザエージェント → Safari iOS 4.3.3 - iPhone を選択 （メニューの 開発 からでも同様） でOKです。
これで見ると、FC2ブログの広告表示 や 「スマートフォン版テンプレート」 から 「パソコン版テンプレート」 に切り替えた時の表示なども 実際に近い状態でページが辿れ、表示確認 ができます。 公式テンプレートのままでは ちょっと問題がある ということにも気付くかも。。 使いやすく修正してみたり、アクセス解析のタグ を入れたり... 今後はいくらでもできますね！ カスタマイズに関しては また別の記事にまとめます。。。
上記は FC2ブログで使われているアドレスの一部ですが、パソコンから UserAgent を変えずにクリックした時と、設定を iPhone に変えてクリックした時とでは 表示されるページが異なりますので試してみてくださいね。
Safari（横幅）を 限界まで小さくすると、丁度 320px になります。 iPhone の ディスプレイ解像度 は 3.5インチサイズで 480×320ピクセル （上のSafariの画像は 横320px）です。 手軽に サイズを合わせられるのも便利ですよ。
ちなみに... 最初の画像にある 「パソコンから iPhone での表示（みたいな）テストが出来る」 iPhone 3G/4G tester はちょっとクセがあって、スマホ用アドレス のままでは テスト出来ません。。 短縮アドレス なら確認できるので、パラメータを省略しているからかな と思います。
http://arinogotokuatumarite.blog19.fc2.com/?sp 等を一旦短縮すれば使えます。
スマートフォン各OS で使われるブラウザは、実際には色々あります。 なので、ここで紹介した方法は あくまでも「疑似（それっぽい表示）」です。
スマートフォン の OS と 主なブラウザ
主流スマートフォン等 の
OS と 主な
ブラウザ ※（ ）内がブラウザ
- iPhone OS （Mobile Safari， Sleipnir Mobile）
- Google Android （Chrome Lite， Opera Mobile， Opera Mini， Sleipnir Mobile）
- Windows Mobile （Internet Explorer Mobile， Opera Mobile）
- BlackBerry （Opera Mobile）
- iPod touch※ （Mobile Safari）
※iPod touch は厳密には 「スマートフォンの分類には入らない」 ようですが、スマートフォン用テンプレートが適応されます。 なお、 iPad の ブラウザも Mobile Safari ですが、PC用テンプレートが適応されます。 Wii や DS 等のゲーム機も PC用テンプレートです。
Android （アンドロイド） 携帯端末一覧
そもそも、「スマートフォンって何？ ドコモの Xperia が Android 携帯 ってことは知っているけど、他の機種はよく知らない」 というレベルだった私。。 アクセス解析などを元に Android の携帯機種 を調べてみましたが、色々あり過ぎて調べきれない。。。
という訳で、以下はそれをまとめてあったサイトから引用させていただきました。
これほど多いとさすがに把握しきれないですね。
docomo
Android搭載端末一覧！～NTTドコモ編～ | andronavi (アンドロナビ)
Xperia ray SO-03C｜MEDIAS WP N-06C｜Xperia acro SO-02C｜GALAXY S II SC-02C｜P-07C｜F-12C｜AQUOS PHONE f SH-13C｜Optimus bright L-07C｜AQUOS PHONE SH-12C｜Xperia arc SO-01C｜MEDIAS N-04C｜Optimus chat｜REGZA Phone｜LYNX 3D｜GALAXY S｜LYNX｜Xperia｜HT-03A
au
Android搭載端末一覧！～au編～ | andronavi (アンドロナビ)
MIRACH IS11PT｜Xperia acro IS11S｜INFOBAR A01｜G’zOne IS11CA｜AQUOS PHONE IS11SH｜AQUOS PHONE IS12SH｜REGZA Phone IS11T｜htc EVO WiMAX ISW11HT｜SIRIUSα IS06｜IS05｜REGZA Phone IS04｜IS03｜IS01
SoftBank
Android搭載端末一覧！～ソフトバンクモバイル編～ | andronavi (アンドロナビ)
Vision 007HW｜Yahoo! Phone 009SH Y｜007SH KT｜AQUOS PHONE THE PREMIUM 009SH｜シンプルスマートフォン 008Z｜AQUOS PHONE THE HYBRID 007SH J｜Sweety 003P｜AQUOS PHONE THE HYBRID 007SH｜AQUOS PHONE 006SH｜GALAPAGOS 005SH｜DM009SH｜Libero｜DELL Streak｜GALAPAGOS 003SH｜HTC Desire HD｜Desire｜SoftBank 004HW
↑ 上の図にカーソルを合わせると
2ページ目ページエリアを表示します。
FC2ブログ には PC用テンプレート と 携帯用テンプレートがあり、デザインなども自由に選べるのですが、2009年10月頃から iPhone でのブログ閲覧の際には iPhone専用のテンプレートが適応されるようになっています。
参考 （2010年11月）
追記 （2011/09/11） ：
スマートフォン用テンプレートも ブログユーザーが自由にカスタマイズ出来るようになりました！
追記 （2012/04/24） ：
今は 公式・共有で100種類以上の スマートフォン用テンプレート が使えるようになっています。
現在では、iPhoneを含む その他のスマートフォン（Android，Windows Mobile，BlackBerry，Symbian OS 等） での閲覧の際にも このテンプレートが適応される仕様 になっているようです。 図は その表示イメージです。 （※パソコンのブラウザ Sleipnir で表示したものですので、実際の見た目 や フォントとは異なります。）
スマートフォン専用テンプレートで FC2ブログ を表示した時に気になったこと
最初の図は トップページの表示です。 カーソルを合わせると 2ページ目（ページエリア）を表示します。
トップページのみ 下にプラグインリスト が入っています。 携帯用テンプレートの場合、このプラグインの表示をどのようにするか （プラグインリストの編集 部分を使うと） 自由に設計できるのですが 、この専用テンプレートでは 「プラグイン名」 部分のみしか反映されません。 プラグイン名 部分には必ずそのプラグインエリアへのリンクが張られます。
私がちょっと思ったのは、このエリアぐらいは 携帯用テンプレートと同様に 柔軟なカスタマイズができるようになっていれば、この部分に 「アクセス解析用のタグを入れる」 というようなこともきっと可能なのに... ということです。 今の仕様では それが出来ないので スマートフォンユーザーの（専用テンプレートでの閲覧）アクセスは 解析できない状態です。
スマートフォンは 携帯電話市場の 2割 を既に超えているようなので、私のブログにも多少のアクセスはあると思うのですが... どの程度見てもらえているのかが判らないのがちょっと悲しいところです。
専用テンプレートの右上の「PC」というリンク をクリックすると PC用のテンプレートで表示されるので （初回は ?pc&～ というパラメータ付きのアドレスになるようですが）、その場合はテンプレートに設定している アクセス解析 が機能しています。
※一旦、PC用表示を適応した後、再び スマートフォン専用ページへ戻したい場合には、
http://arinogotokuatumarite.blog19.fc2.com/?sp
もしくは、個別記事ページ表示の場合は、
http://arinogotokuatumarite.blog19.fc2.com/?no=175&sp など （他の形式もあり）
というURLへアクセスすると戻れます。
次に 個別記事ページ スッキリしたデザインで読みやすいと思うのですが... 記事下にある 「カテゴリー表示」 これ、残念ながらリンクになっていないようです。
カテゴリ：<a href="<%url>?m&cat=<%topentry_category_no><%tail_url>"><%topentry_category></a>
こんな感じでリンクにしてもらうと全体のPVも少し増えるかも...。 （携帯用テンプレートにも使えるので、設置していない方は是非入れてみてくださいね。） もしくは スマートフォン表示の場合は 関連記事リストを表示できるようにできたら凄いかも。。。
プラグインメニューも トップページでしか表示されないので 同じカテゴリーの記事を読んでみたいと思っても結構面倒かも。。。毎回トップページに戻って プラグインメニューから カテゴリーリストを選んで．．． なんて面倒だと思うので 殆ど使われないのでは。。。
コメントとトラックバック部分はリンクになっているようですが、コメントのリンクは 「参照」のみで「投稿」には対応していないようです。 追記： -webkit-border-image や text-shadow の設定が反映されなかっただけで、コメント投稿へのリンクもありました。申し訳ありません。 実際には 青背景の枠付きリンク で表示されると思います。
その他、細かい部分に関しては 実際にスマートフォンでアクセスした訳ではないので不明ですが、ちょっと気になったので。 ちなみに 先にも書きましたが、このスクリーンショットは Sleipnir（スレイプニル） で撮りました。
iPhone用 UserAgent での表示テスト
ブラウザの UserAgent（ユーザーエージェント） を任意に変更することは Firefox のアドオン や Opera などでも出来るようですが、Sleipnir では最初からその設定が搭載されていました。 長いこと使っていて全く気付かなかったのですが。。。
クリックで画像を拡大します
Sleipnir オプション → ビュー → Trident 基本設定 → UserAgent の設定
既に使える状態のものだけでも ズラズラ～っと、かなりの数があり適応するのも簡単でした。 この中には 主要ブラウザの他、各社携帯電話の UserAgent も含まれているので、いつも見ているサイトの 携帯での表示雰囲気 が簡単に分かるのも面白いですよ。
さらに... PersonalChannel という Sleipnir用のプラグインを追加すると
サイドバーに個々に設定した UserAgent でページを表示することも可能 でした♪
※情報： @10th543 （肉球ざんまい™） さん、ありがとうございます。
設定の一例 （自分用メモ）
- Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7C144 Safari/528.16
- Opera/9.30 (Nintendo Wii; U; ; 2047-7; ja)
Yahoo!や YouTube等が Wii版 で見れます。Wiiを持っていない方の簡易確認用にも。
- その他ゲーム機なども試してみましたが 特に違わない感じ...
スマートフォン専用テンプレート の評判は．．．？
iphoneでの表示について - FC2リクエスト
ここに書かれているコメントなどを見ると、「使いづらい・不便」 などと感じている方が多いのでしょうか．．．。 2009年10月 当初のものとは 色々と変わっているようにも思うのですが、実際に使っている方々 どうですか？
※情報： yosoilue さん、ありがとうございます。
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
iPhone表示は、ブラウザ『Safari』で比較的近い確認できると思います。ブラウザメニューの設定→詳細→開発表示チェック。メニューの開発→ユーザエージェント（iPhone）。ウインドウ狭める。 http://www.apple.com/jp/safari/
