ウェブリブログ（１ペイン・横700ピクセル）を iPhone 対応させる

2～3ペインの MT4 のブログを iPhone 対応 させた続編。
ウェブリブログは、横幅700ピクセルと（今では少し狭い）１ペインのシンプルなブログです。
ナビゲーションバーを追い出す必要もないので、iPhone で読みやすくさせるのも難しくありません。

まず、
設定→表示項目設定→サイドバー表示項目設定→フリースペース
の画面で、トップ・月別・テーマ別・記事全てを表示 ON にします。
続けて、フリースペースの編集画面で、以下の内容を貼りつけます。

<script type="text/javascript"><!--
(function(){
  var ua = navigator.userAgent;
  if(ua.match(" AppleWebKit/") && ua.match(" Mobile/")){
    document.write('<meta name="viewport" content="width=700" />');
    document.getElementById('container').style.overflow = "hidden";
  }
})()
//--></script>

以上！

iPhone・iPod では、デフォルトで横960ピクセル扱いになるため、
700ピクセルのウェブリブログでは無駄な左右に余白ができてしまいますが、
上記の JavaScript により、余白を省いてギリギリまで表示します。

overflow: hidden; はオマケで、ソースコードなどで改行できない場合に
その分を無視します。

ウェブリブログのページは、もともと700ピクセルと幅が狭いので、
余白（画面の横幅）以外の項目については、デフォルトのままでも
問題なく読めそうです。

speck iPhone 3G PixelSkin BLACK PIXELSKIN-IP-BK
Speck Products

ユーザレビュー:
保護性は十分iPho ...


Amazonアソシエイト by