ウェブリブログ(1ペイン・横700ピクセル)を iPhone 対応させる

2~3ペインの MT4 のブログを iPhone 対応 させた続編。
ウェブリブログは、横幅700ピクセルと(今では少し狭い)1ペインのシンプルなブログです。
ナビゲーションバーを追い出す必要もないので、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.co.jpで買う
Amazonアソシエイト by ウェブリブログ商品ポータルで情報を見る

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 2

なるほど(納得、参考になった、ヘー)
ナイス

この記事へのコメント

この記事へのトラックバック