NOTICE:情報が古いことが多々あります。ご了承ください。

  • --

スポンサーサイト

カテゴリ:スポンサー広告   あとで読む はてなブックマーク - スポンサーサイト  このブログのRSSを購読する

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

このページの先頭へ
  • 10

徒然ゲームブログさんで提案されていた、「【提案】PSPで閲覧しやすいサイトをデザインする
こちらではサイズ可変(画面に対する、各ブロックのパーセント指定)で対応していましたが、
うちのブログでどうなるのかを検証してみました。割と見にくい……?

検証の詳細と「対案」は続きから。

最終追記:2008/4/10 23:55

現在のPSPブラウザへの対応状況

SiteScreenShot_3

PSPブラウザで見ると、こんな感じです。

SiteScreenShot_2

スクリーンショットが入ると少しバランスが悪くなりますね。

提案通り、PC表示のまま%表示にしてみる

PCと同じ割合(うちは元々%でした)で表示させ、提案を再現してみます。

SiteScreenShot_1
若干下にスクロールしました。タイトルはちゃんと表示されます

さて、いかがでしょう?両端のメニュー部分がかけました。
左メニューの「カスタムファームウェア」をすべて表示させると、おそらく記事部分が見にくくなるでしょう。
このままではあまり見栄えがよくなく、また少々読みにくくなります。

(なお、いずれ表示モード「通常」・文字サイズ「小」でスクリーンショットを取りました)

なぜまんま%表示だと見にくくなる?

うちのブログは見ての通り、「3カラム」と呼ばれる形式をとっています。
PC向け表示では、サイドバー20%ずつ、メイン部分を60%で表示しています。
この状態でも、PCで左メニューの画像がかけている方もいらっしゃるかと思います。

おそらく徒然~の方はサイドバー15%くらいに設定しているかと思います。
対して、うちのブログではメニュー部が広めな上、メニューに画像が使われています。
おそらく、それが窮屈に見えてしまう原因かと思います。

また、解説が主となるPSPサイト・ブログにとって、
メイン部分での改行が必要以上に多くなる状況はいただけませんね。

【対案】PSPに独自CSSを読み込ませる

先ほどの画像を見ていただければわかるかと思いますが、PSP版では左メニューを表示させていません。
その代わり、記事部分の面積を広くしています。
(左メニューで表示されている項目は、リンクについてのみ、右メニューの一部にPSPでのみ表示するプラグインに記載することで対応しています)

これはPSP向けにのみ独自のCSSを読み込ませることで対応しています。
単に%表示にするより自由に指定できるため、PSPでの見やすさも向上するのではないでしょうか。

以下にこのブログで使用しているコードを載せておきます。
参考にするもよし、コピペするもよし、好きにお使いください。
(psp.cssにPSP向け記述をしています。こちらのファイルは自分で用意してください)

<script type="text/javascript">
<!--
if (navigator.userAgent.indexOf("Mozilla/4.0 (PSP (PlayStation Portable); 2.00)") != -1) {
document.write('<link rel="stylesheet" type="text/css" href="http://blog-imgs-17.fc2.com/w/i/n/winterwind/psp.css" />');
}
//--></script>



欠点


(書き忘れ失礼しました、追記しました)
この方法はJavaScriptを使用しているため、セキュリティなどの都合でオフにしている場合はPCと同じ表示になります。

ちなみに、現在のアナライザ(解析)の結果では、PC、PSP合わせておよそ97%のユーザーがJavaをオンにしているようです。


PSP関連のサイト・ブログをお持ちの方は、ぜひ一工夫したデザインで、PSPブラウザでのみやすさを追求してみてはいかがでしょう?
ご要望であれば、ご自身のサイトをPSPで表示させたときのスクリーンショットをお送りします(できる範囲で)

なお、HTMLやCSSなどの質問はお断りさせていただきます。ご了承ください。

#本家の方、「標準」ではPCと同じ表示になるんですね;
#もしかしてPSP対応やめた?まさかなぁ……;
スポンサーサイト

このページの先頭へ

コメント

コメントの投稿コメントの投稿 ※承認後表示されます。

管理者のみ表示  [質問する前に]

トラックバックトラックバック

アクセスカウンタ

お知らせ / ひとりごと

アクセス解析/ブログスカウター

jubeat knit

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