VERSIONFIVE

「iWPhone」でWordPressをiPhone/iPod touch対応に

Article entry published at | Comments -15 | Trackbacks 18

画像 : iWPhone適用例

昨年の10月にiPod touchを購入してからtouchのSafariでWebサイトをみるようになりました。Safariは確かに使いやすくパソコンの解像度を想定して作られたWebサイトでも見やすくするUIになっていますが、やっぱりiPhone/iPod touchに最適化されたサイトの方が見やすいなぁと正直思いました。
てことでWordPressのプラグインを使うことでこのサイトをiPhone/iPod touchに対応してみることに。

iWPhone WordPress Plugin and Theme

とってもうれしいことに、WordPressには「iWPhone」というプラグインがContentRobotさんから公開されています。
主な特徴としては、

  • iPhone/iPod touch専用テーマとプラグインのセット
  • iPhone/iPod touchからのアクセスの時のみ専用テーマを表示する
  • それ以外からのアクセスではいつものテーマで表示される

という便利なもの。UserAgentでiPhone/iPod touchからのアクセスを判定して表示形式を振り分けています。

使いかた

iWPhone WordPress Plugin and Theme | ContentRobotを引用し翻訳してみます。

  1. iWPhone WordPress Plugin and Themeのzipファイルをダウンロード
  2. "iwphone-wordpress-plugin-and-theme"フォルダを解凍
  3. "iwphone-wordpress-plugin-and-theme"フォルダの中の"iwphone.php"ファイルをwp-content/plugins/ディレクトリにアップロード
  4. 同様に"iwphone-by-contentrobot"フォルダをwp-content/themes/にアップロード
  5. WordPressのプラグイン管理画面から"iWPhone"をアクティブにする。ただし、テーマ管理画面からiWPhone-by-ContentRobotをテーマには設定しないこと
  6. iPhoneかiPod touchのSafariを起動してブログのURLを入力すると、iPhone/iPod touchに最適化されたテーマでみることができるはず

とりあえず、上の作業をすればiPhone/iPod touchでサイトをみるときだけそれに最適化された形式でみることができます。テーマ自体もなかなかよくできていていい感じです:-)

どんな感じかはこのサイトにiPod touchでアクセスしていただければわかると思います。ほんとはスクリーンショットも載せたかったのですが僕は素のtouchを使っているのでできません;-(
ソフトウェアアップデート2.0からスクリーンショットが撮れるようになったので載せました:-)

テーマのCSSをカスタマイズ

これだけじゃただ適用しただけなので、テーマの気になった点をいくつか修正してみました。
主にフォントサイズの変更をしただけ[1]ですが、個別エントリの表示時のタイトル周りとか、pre要素の表示あたりを修正するようにしてみました。

使い方は、下のCSSをiWPhone-by-ContentRobotテーマのstyle.cssの最後に追加すればOKです。

CSSコード

/*User Styles*/
body {font:13px/1.231 'Lucida Grande', 'Trebuchet MS', Verdana, Arial, sans-serif !important;}
* {line-height: 1.5 !important;}
#pagewrapper,
#maincontent .entry, #maincontent .entrytext,
#maincontent h3#respond {font-size: 13px !important;}
#footer,
#maincontent .commentmetadata {font-size: 10px !important;}
#maincontent h2.thetitle, #maincontent h2.thetitle a, #maincontent h2.thetitlesingle, #maincontent .postpage h2.thetitle,
h2.pagetitle {
	margin-right: 20px !important;
	width: auto !important;
	line-height: inherit !important;
	font-size: 19px !important;
}
#maincontent .postnohit h2.thetitle, 
.postnohit h2.pagetitle {margin-right: 0 !important;}
#maincontent .postinfo {font-size: 11px !important;}
#maincontent .entry h3, #maincontent .entrytext h3 {font-size: 17px !important;}
#maincontent .entry h4, #maincontent .entrytext h4 {font-size: 16px !important;}
#maincontent .entry h5, #maincontent .entrytext h5 {font-size: 15px !important;}
#maincontent .entry h6, #maincontent .entrytext h6 {font-size: 14px !important;}
#maincontent .section {margin: 0 0 1.5em 0 !important;}
pre {
	overflow: scroll !important;
	color: #fff !important;
	background-color: #555 !important;
	font-family: monospace !important;
}
pre * {color: #fff !important;}
#maincontent .entry em, #maincontent .entrytext em {font-weight: bold !important;}
#maincontent .entry strong, #maincontent .entrytext strong {color: #dc143c !important;}

WebClip Bookmark Iconも設定

前回の記事で紹介したWebClipアイコンを設置or指定しておけばさらによいかもです。

iWPhone-by-ContentRobotテーマのheader.phpを開いて、head要素の最後に以下のようにHTMLを追加します。
ついでにmeta要素が閉じられていないとこも修正しておきましょう:-)

<meta name = "Viewport" content = "maximum-scale=1.6,width=320" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png(画像のパス)" />

ちなみに、このname="Viewport"なるmeta要素もiPhone専用のもので、ピンチイン/アウトの拡大率やサイトの横幅の初期値などを指定することが出来ます。前回同様、ドキュメンテーション「iPhone Dev Center」の「Optimize for Page Readability」に詳しい記述があります。

作業時間はそれほどいらないと思います。僕みたいに自分のiPod touchで自分のサイトみるようなヒトは特に満足できるんじゃないかと思います;-)

  1. Safariからのアクセスしかないでしょうし、フォントサイズは手っ取り早くYUIのfonts.cssを参考に直接px指定しています。 [back]
  • older-entry
  • newer-entry
  • Skip to Top

Comments 3

  1. haru

    ありがとうございます。
    グッと見やすくなりました。

  2. versionfive

    >haruさん
    こちらこそ使っていただいてありがとうございます:-)

  3. vans

    情報ありがとうございます。助かりました!

comment-form
Remember

Trackbacks 0

Author Information

画像 : 管理人

Web Creator
の (versionfive)

学生時代はWebにどっぷりはまり、現在は赤坂で働く会社員。Web制作とは直接関係がないモバイル関係の仕事をしてます。
几帳面で凝り性だけど、おおざっぱさはしっかり持っているO型。興味も知識も広く深くがモットーです。

Site Information

Web制作に関するブログを中心に、フォントなどもマイペースに制作。
デザインがクールでコードがクリーンなサイトを目指してます。