rakuishi.com

[WordPress] 自作モバイルテーマを作成しました & 役立ち情報・コツをお教えします

先日、自作ブログテーマを作成したので、モバイルテーマもあわせて作りました。シンプル・イズ・ベター!

モバイルテーマ作成初心者ですが、作る際にいろいろと調べたり、コツのようなものも学んだので、シェアします。

この記事が役に立ったり、きっかけを与えられたらなあと思います。

モバイルテーマにスイッチさせるプラグイン

WPtap Mobile Detector というのを使いました。@nori510 さんが詳しく説明されています。

参考:WPtouch を卒業!!iPhone に最適化されたテーマと簡単なカスタマイズ方法など[wordpress] | nori510.com

スマートフォン表示の確認方法

iPhone で表示を確認する際は、Safari の開発モードで見ると便利です。

参考:iPhone、iPad でどのように Web ページ・ブログが表示されているのかを確認する方法 | OZPA の表 4

しかし、このモードでも表示のズレが発生するので、Xcode に内蔵されている iOS シミュレータが見た目そのままで表示してくれていい感じです。

iOS シミュレータは、以下のアドレスに入ってます(Spotlight で検索するほうが早いです)。

Developer/Platforms/iPhoneSimulator.platform/
Developer/Applications/

難点は Xcode の容量が大きいことですかね。

Xcode 4.3(無料)Xcode 4.3(無料)

PC テーマを削いで、モバイルテーマを作る

僕はモバイルテーマを作る際に、PC 向けブログテーマファイル(2 カラム)をコピーして、それを雛形としました。

モバイルテーマでは、サイドバーを表示すると記事が見難くなるので、サイドバーを表示させる WordPress の関数を削除しました。

<?php get_sidebar(); ?>

消した後に、記事を表示させている横幅をブログテーマ全体の横幅と一致させると、それだけでわりとそれっぽくなります。

横幅の見た目を自分で設定する

iPhone Safari は、PC におけるブラウザのウィンドウサイズに該当する Viewport という概念を持っているらしいです。なんで、iPhone でサイトを開くとなんだか違った感じに表示されます。

参考:Viewport [iPhone 生活]

そこで、ViewPort を設定して、こちらが指定したブラウザサイズをするように iPhone に伝えるとこちらの思い通りの横幅で表示できます。

僕は以下のように設定しました。画像横幅が 500px、昨日利用したスライドシェアが 450px なので、それよりも少し大きい 600px で設定しました。

<meta name="viewport" content="width=600, user-scalable=yes" />

微調整を繰り返して完成!

で、後は機能を削ぎに削ぎ落として、iPhone で表示を確認しつつ、微調整を繰り返します。

僕は作業開始してから、3 時間程度で今のカタチになりました。基本的に、PC 向けテーマからコードを消していくだけでできたので、思ったよりも時間がかかりませんでした。

現在は、フッターに検索しかありませんが、後でアーカイブ・カテゴリ・タグなどのコードを貼り付ける予定です。

自作ブログテーマを作られた方は、是非、モバイルテーマを自作されてみては?

そう、君のことです!