link4818 link4819 link4820 link4821 link4822 link4823 link4824 link4825 link4826 link4827 link4828 link4829 link4830 link4831 link4832 link4833 link4834 link4835 link4836 link4837 link4838 link4839 link4840 link4841 link4842 link4843 link4844 link4845 link4846 link4847 link4848 link4849 link4850 link4851 link4852 link4853 link4854 link4855 link4856 link4857 link4858 link4859 link4860 link4861 link4862 link4863 link4864 link4865 link4866 link4867 link4868 link4869 link4870 link4871 link4872 link4873 link4874 link4875 link4876 link4877 link4878 link4879 link4880 link4881 link4882 link4883 link4884 link4885 link4886 link4887 link4888 link4889 link4890 link4891 link4892 link4893 link4894 link4895 link4896 link4897 link4898 link4899 link4900 link4901 link4902 link4903 link4904 link4905 link4906 link4907 link4908 link4909 link4910 link4911 link4912 link4913 link4914 link4915 link4916 link4917 link4918 link4919 link4920 link4921 link4922 link4923 link4924 link4925 link4926 link4927 link4928 link4929 link4930 link4931 link4932 link4933 link4934 link4935 link4936 link4937 link4938 link4939 link4940 link4941 link4942 link4943 link4944 link4945 link4946 link4947 link4948 link4949 link4950 link4951 link4952 link4953 link4954 link4955 link4956 link4957 link4958 link4959 link4960 link4961 link4962 link4963
トップページ > ONEDARI BOYS, iPhone・iPad・iPod, ブログ > ブログをiPhone閲覧用に最適化してますか?

ブログをiPhone閲覧用に最適化してますか?

iPhone発売から10日、そろそろ機能レビューなども落ち着いてきたところで、ブロガーが見落としがちな大切なこと。

商用サイトなら既に対応済みかと思いますが、一般ブロガーはまだやってない人多数だと思うこと。

前にiPod touchが発売されたときにも書いたのですが、iPhoneのSafariでは横幅がデフォルト980ピクセルとなっており、大抵のブログはキュッと小さく表示されています。

metaタグの「viewport」というのを設定してやると、ちゃんとブログの幅に合った表示にしてくれるので、挑戦してみてください。

以下はこのブログで使っているサンプル
<meta name="viewport" content="width=520; initial-scale=0.61;
maximum-scale=1.0; user-scalable=1;" />

  • width: 横幅
  • height: 高さ
  • initial-scale: 拡大率(1.0以下で縮小)
  • maximum-scale: 拡大率の上限
  • minimum-scale: 拡大率の下限
  • user-scalable: ピンチでの拡大縮小を許すかどうか

試しにONEDARI BOYSのサイトに適用してみました。(他のメンバーにはナイショだよ)

こじんまりしていたトップページは、横幅に合わせて拡大表示
ViewPort1

個別エントリーページは本文エリアだけを画面いっぱいに表示して読みやすく。
ViewPort2
でも横にスクロールさせればサイドバーもちゃんと表示できるよ。

上の例ではSafariのアドレスバーを非表示にするJavaScriptも仕込んでますが、適当にどっかからコピペしてきたのでよく分かってないとうか、なんかゴミ入ってるような気もしないでもないというか、詳しいひと解説プリーズ。

あとですね、iPhone用にCSSを割り当てるということも可能なんですが、フォントサイズ程度であればまだしも、大幅に見た目を変えるとなるとそもそものHTMLの構造から考え直さないといけないので、当分そんなことは手出ししたくないかな。



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2008年7月21日 00:29

» 拡散される推定値 from 【小人閑居シテ駄文記ス】
【元携帯勝手サイト運営者が、実際に使っていた端末IDの使い方とかばらしちゃうよ… [続きを読む]

トラックバック時刻: 2008年7月22日 23:08

» [M] mbdbをiPhone3Gからの閲覧に最適化してみました from [M] mbdb
ジェット☆ダイスケさんが書いていた「ブログをiPhone閲覧用に最適化してますか? — webdog」という記事を見て、サクサクとこのブログもiPhone… [続きを読む]

トラックバック時刻: 2008年7月29日 16:29

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介/ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 また、YouTubeのチャンネル登録はこちらからできます。

ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
▼Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
▼TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー