Yuriko.Net 個別記事

2009-09-30

Ktai Style を iPhone, Android 対応にした

ゆりこ による 03:08:00 の投稿
カテゴリー: WordPressハック,モバイル・携帯電話
タグ: , , , ,

iPhoneでKtai Styleの出力を行う

iPhoneでKtai Styleの出力を行う

viewport設定をしないとiPhoneでは字が小さい

viewport設定をしないとiPhoneでは字が小さい

拙作の WordPress 用携帯対応プラグイン「Ktai Style」を、iPhone および Android でも適用できるよう改造してみました。まだ正式版／ベータ版での配付はなく、CVS 版しかありません。一早く試してみたい人は使ってみてください。ベータ版よりもさらに品質が落ちますので、その点はあしからず;-)

実際に表示させてみると、通常のウェブ表示よりは見劣りしますが、それなりに使い勝手は悪くありません。Android では文字の大きさが適切でしたが、iPhone では viewport の設定をしないと文字が小さくて見ずらい状態でした。以下のように viewport 指定の meta タグを入れてやれば、ちょうどいい大きさになりました。この meta タグは、Ktai Style の附属テーマおよび別途配付テーマにおいて、iPhone 閲覧時に自動的に入るようになる予定です。

<meta name="viewport" content="width=device-width,initial-scale=1.0;" />


Ktai Style で iPhone, Android テーマを設定できます。

Ktai Style で iPhone, Android テーマを設定できます

iPhone 用には WPtouch というすばらしいプラグインがあるので、デフォルトでは iPhone, Android は Ktai Style の表示になりません。「キャリア別のテーマ設定」で変更してやる必要があります。やはりここは iPotch テーマを選択するのがいいかもしれません ;)



AndroidでもKtai Styleを適用できるようになります

AndroidでもKtai Styleを適用できるようになります

Ktai Styleを使わない場合はモバイルデバイス用CSSを適用させます

Ktai Styleを使わない場合はモバイルデバイス用CSSを適用させます

おっと、iPhone だけじゃなくて Android の画面も載せておきましょう。ということで、本投稿もめでたく HT-03A モニター記事ってことで ;-)

本サイトは、もともとスタイルシートの調整で iPhone, Android に最適化させていました。その表示は、携帯表示のページ最下部「PC 表示にする」のリンクをタッチすることで切り替えることができます。

上に戻る
« カテゴリー別新着記事を見せる  Androidの内蔵ブラウザーはアドレスバーが変 »

トラックバック・コメント »

  1. [...] バージョン 1.74 から3か月空いてしまいました。今回は iPhone, Android でも Ktai Style を適用できるオプションの導入、Contact Form 7 との連携機能、画像の回り込み改善など機能アップを図って [...]

    Yuriko.Net » Ktai Style 1.80 ベータ1配布からのピンバック — 2009年10月21日 22時12分37秒
    返信する »

  2. [...] 約5か月ぶりのマイナーアップデートとなります。今回は iPhone, Android でも Ktai Style を適用できるオプションの導入、Contact Form 7 との連携機能、画像の回り込み改善など機能アップを図っ [...]

    Yuriko.Net » 携帯対応プラグイン Ktai Style バージョン 1.80 リリースからのピンバック — 2009年12月2日 21時53分06秒
    返信する »

上に戻る

※スパム対策プラグインの影響により、すぐにトラックバックが反映されない場合があります。お手数ですが、半日ほど待ってみてください。

コメント投稿

※発言の責任を明確にするため「名無し」「通りすがり」「匿名希望」等の匿名は不可とします。捨てハンドルでもいいので必ず名乗ってください。
XHTML (使えるタグ): <a href="" title="" ktai=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt=""> .
※スパム対策プラグインの影響により、すぐにコメント内容が表示されない場合があります。お手数ですが、半日ほど待ってみてください。

上に戻る