Blogger『TicTac Blue』テンプレートをCSS/JSでiPhone対応

MovableType 4ウェブリブログ に続けて、今度は Blogger (Blogspot) のブログを
iPhone で読みやすくしてみます。川崎は『TicTac Blue』テンプレートを使っています。
これは2ペインのテンプレートで、ボディが460ピクセル程度とかなり狭いやつです。
右側のナビゲーションをページ下部に追い出して、ページ横幅500ピクセルにしてみます。


http://www.blogger.com/home
ダッシュボード→ブログを管理→レイアウト→ガジェットを追加→HTML/JavaScript

で、ブログにインライン展開される任意の HTML を記述できます。


今回はタイトルを付ける必要はないので、空にしてください。

<script type="text/javascript"><!--
(function(){
  var ua = navigator.userAgent;
  if(ua.match(" AppleWebKit/") && ua.match(" Mobile/")){
    document.write('<meta name="viewport" content="width=500" />');
  }
})()
//--></script>
<!--[if !IE]>-->
<style media="only screen and (max-device-width: 480px)" type="text/css"><!--
body { width: 500px; -webkit-text-size-adjust: 133%; }
body #navbar-iframe { width: 500px; overflow: hidden; }
body #outer-wrapper { width: 100%; background-position: -41px 0; }
body #header-wrapper { background-position: -41px 0; }
body #header { padding: 10px 25px; background-position: -41px bottom; }
body #content-wrapper { width: 100%; margin: 0; }
body #main { width: 480px; padding-left: 0; }
body #sidebar { width: 100%; float: left; }
body #footer-wrapper { padding: 0; }
body #footer { padding: 25px; background-position: -41px 0; }
--></style>
<!--<![endif]-->


以上で完了。

やっていることは、2ペインの TicTac Blue テンプレートを1ペインに差し替えて、
横幅500ピクセルのレイアウトとして上書きしています(iPhone のみ)。
CSS で body を付けているのは、単なる # ID 指定よりも優先度を上げるためです。
viewport も 500 ピクセルとすることで、iPhone でも読みやすくなりました。
 
  
PS)
来月にも 800x480 ピクセルとか、もっと高解像度の次期 iPhone が出てきたら、
viewport の設定とか変更する必要があるかもしれない。実機が出てから考えよう。

"Blogger『TicTac Blue』テンプレートをCSS/JSでiPhone対応" へのコメントを書く

お名前
ホームページアドレス
コメント