ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
スマートフォン  iPhone  ブラウザ  プレビュー  テンプレート  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

スマートフォン用テンプレートのプレビュー方法

2011/09/10 (土)  カテゴリー: ブログカスタマイズ上級

FC2ブログを スマートフォン(iPhone, Android, Windows Mobile 等) 及び iPod touch から閲覧する時に適応される テンプレート、これをカスタマイズ出来るようになりました! 2011年8月30日頃~ 一部サーバーで導入, 2011年9月7日 公式アナウンス 有り

iPhone 3G/4G tester でスマートフォン用テンプレートをプレビューしたもの

でも、「iPhone とか持ってないし...」 という方も多いですよね。 私も持っていないので 殆どが手探りの状態ですが、スマートフォンを持っていなくてもプレビューすることは可能ですので、その方法をいくつか紹介します。

まず、知りたいのは 今どんな見え方になっているかですよね。 現在FC2ブログで用意されている スマホ用公式テンプレートは 2種類あるのですが...

追記 (2012/04/24) :
今は 公式・共有で100種類以上の スマートフォン用テンプレート が使えるようになっています。

FC2ブログ Webクリップアイコン 
(apple-touch-icon.png)

IE や Sleipnir 等 (Trident エンジン) のブラウザでは 確認できない CSS設定 がいくつか入っています。

また、それ以外のブラウザでも (カスタマイズしない状態では) 各所のリンクをクリックすると パソコンでの表示に戻ってしまうので、色々と不都合があります。 (※カスタマイズすれば、辿りやすいリンクに変更も可能)

と、いう訳で...



Safari のユーザーエージェントを変更して iPhone の実際の表示に近いもので 動作確認(プレビュー)をする方法

iPhone表示は、ブラウザ『Safari』で比較的近い確認できると思います。ブラウザメニューの設定→詳細→開発表示チェック。メニューの開発→ユーザエージェント(iPhone)。ウインドウ狭める。 http://www.apple.com/jp/safari/
http://twitter.com/paroday/status/108564599934173184

と、Paroday(@paroday)さん から教えて頂いたので、早速 Safari(Windows版)をダウンロード。 以下の手順で設定しました。 簡単です^^

Safari 「UserAgent」を変更するための 開発メニュー表示方法

最初に 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


キーワード検索 : スマートフォン  iPhone  ブラウザ  プレビュー  テンプレート  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-204.html

2011/09/10 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-0 Comment

コメントを投稿する 記事: スマートフォン用テンプレートのプレビュー方法


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。