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

このページの記事目次 (タグ: iPhone の検索結果 3 件)

  

iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ

2012/04/03 (火)  カテゴリー: ブログカスタマイズ上級

最近は 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週間分の上位集計)です。

アクセス解析 : 
PC用テンプレートでの閲覧を辿ると iPad, DS, Wii 等の他、「iPhone や Android 等のPC版表示」 でもアクセスされていることが判ります。
クリックで画像を拡大します

主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。

という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。

  1. ある条件の時は lightBox を機能させない 
    jQuery lightBox (拡大した画像や背景の何処をクリックしても閉じられるようにしてある) を タッチ操作のもの(iPad,iPod,iPhone,Android の場合) と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい!
  2. ナビゲーションメニューの誤タップ対策 
    タッチ操作のもの(iPad,iPod,iPhone,Android,3DS 等) では、:hover(マウスオーバー)でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ(誤クリック)していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。

キーワード検索 : スマートフォン  iPad  iPhone  DS  Wii  jQuery  Lightbox  

スポンサーリンク

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

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

2012/04/03 ~ | Comment (7) 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版)をダウンロード。 以下の手順で設定しました。 簡単です^^

キーワード検索 : スマートフォン  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? | ↑ ページ先頭へ ↑ |

iPhoneで適応されるFC2ブログのテンプレート

2010/11/18 (木)  カテゴリー: FC2マニア・仕様関連
FC2ブログをiPhoneで見たときの表示イメージ
↑ 上の図にカーソルを合わせると
2ページ目ページエリアを表示します。

個別記事ページをiPhoneで見たときの表示イメージ

FC2ブログ には PC用テンプレート と 携帯用テンプレートがあり、デザインなども自由に選べるのですが、2009年10月頃から iPhone でのブログ閲覧の際には iPhone専用のテンプレートが適応されるようになっています。

現在では、iPhoneを含む その他のスマートフォンAndroidWindows MobileBlackBerrySymbian 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&amp;cat=<%topentry_category_no><%tail_url>"><%topentry_category></a>

こんな感じでリンクにしてもらうと全体のPVも少し増えるかも...。 (携帯用テンプレートにも使えるので、設置していない方は是非入れてみてくださいね。) もしくは スマートフォン表示の場合は 関連記事リストを表示できるようにできたら凄いかも。。。

プラグインメニューも トップページでしか表示されないので 同じカテゴリーの記事を読んでみたいと思っても結構面倒かも。。。毎回トップページに戻って プラグインメニューから カテゴリーリストを選んで... なんて面倒だと思うので 殆ど使われないのでは。。。

コメントとトラックバック部分はリンクになっているようですが、コメントのリンクは 「参照」のみで「投稿」には対応していないようです。 追記: -webkit-border-image や text-shadow の設定が反映されなかっただけで、コメント投稿へのリンクもありました。申し訳ありません。 実際には 青背景の枠付きリンク で表示されると思います。


その他、細かい部分に関しては 実際にスマートフォンでアクセスした訳ではないので不明ですが、ちょっと気になったので。 ちなみに 先にも書きましたが、このスクリーンショットは Sleipnir(スレイプニル) で撮りました。

iPhone用 UserAgent での表示テスト

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

スポンサーリンク

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

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

2010/11/18 ~ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。