Hatena::ブログ(Diary)

焼肉開発日記 このページをアンテナに追加 RSSフィード

2010-03-20

iPhone用に最適化したブログも構築する

iphonePCページが見れるのはうれしいのですが、無駄な通信に時間をとられたり、拡大縮小がこまめに必要だったりで、逆に効率が悪い場面も多いです。

ということで、通常のブログ構築と同時に、iPhone用に最適化したブログも同時に再構築する方法です。

iUIを使っていてPCからでもiPhoneチックに動作するので楽しいです。

ちなみに、Movable Type3.3xか4.0x〜4.1推奨のようですが、MTOS4.32でもできました。


1.ダウンロード

(1) テンプレート雛形とスキン

http://cremadesign.jp/blog/iphone/tpl-1.01.zip

(2) iUIライブラリ

http://code.google.com/p/iui/

http://iui.googlecode.com/files/iui-0.31.tar.gz

2.iphoneディレクトリを設置する

i -+- iui
   |
   +- css
   |
   +- img

MT4iでMovableTypeのブログを携帯向けページと同期する - 焼肉開発日記携帯向けと同期でも"i"を使ってしまったので"i"がかぶる。別名称にしたいところですが、固定パス記述がいくつかあったので念のため断念しておく。


3.テンプレートを作成

(1) iPhoneトップページ

(2) iPhone 用個別ページ用

(3) アーカイブパス設定

基本的に雛形のコピペです。

インデックスから個別ページへのリンクhtmlで決めうちのようですが、私の大元の個別ページは"php"設定なので、記述を少し修正ました→、"i/%c/%F.html"

4.".htaccess"でiPhoneリダイレクトを追加

iPhoneトップページアクセスした場合ジャンプさせます。

RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)

RewriteRule ^$ http://www.example.com/i/index.html [R]

5.確認

f:id:nago8:20100321001228j:image

http://www.yakedo.net/


★追記

つながった長い単語(URLなど)が本文にあると、横幅が広がってレイアウトがくずれてしまうため、

"i/css/style.css"のbodyに"word-wrap: break-word;"を追加。

body {
	background-color: #ffffff;
	font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
	color: #000000;
	font-size: 20px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.5;
        word-wrap: break-word;  
	-webkit-text-size-adjust:none;
}

参考サイト

http://cremadesign.jp/blog/iphone/iphone_template_for_mt.html

http://www.koikikukan.com/archives/2008/08/06-025555.php

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/nago8/20100320/1269098293