[WordPress] ブログのモバイルテーマを自作しました

スポンサード リンク

@_harashinです。

かねてから手を付けようと思っていたブログのモバイルテーマを制作しました!

モバイルテーマを自作した背景


▲WPTouchを適用した画面

これまでは簡単にモバイルテーマを導入できるプラグイン「WPTouch」を使っていました。

しかしお手軽な反面、使っている人も多いので、見た目が似たり寄ったりになってしまうことと、カスタマイズの自由度が制限されることが難点。

そしてGoogle Analyticsを見てわかったんですが、アクセスの半分くらいがiPhoneから来てるんですね。

なので、PCのテーマに沿った形で、iPhoneからも見やすいページを作る必要があると感じていました。

やったこと

こちらの記事を参考にさせてもらいました。

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

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

PC用のテーマは前に自作したので、そこから必要ないものを削って調整していけばなんとかなりそうだとわかりました。

シミュレーターで確認しながら調整

ローカルサーバーのWordPressに、元になるテーマをモバイル用にリネームしてからコピー。制作開始。

ヘッダー画像を削って幅を調整して、サイドバーを削って、メニューバーの表示を調整して、文字や画像のサイズを調整して、関連記事の表示を変えて、アドセンスの位置を変えて…。

この際の表示チェックには「Mobilizer」というシミュレーターを使いました。

完璧に同じ表示にはなりませんが、文字や画像等の大きさの調整に役立ちました。

あとiPhoneだけでなく、Androidでの表示も確認できます。

Mobilizer | Springbox

実機で確認、微調整

概ねできたところで、モバイル用にテーマを適用できるプラグイン「WPTap Mobile Detecter」をインストールして、実機で確認。

細かい調整の末、だいたい3時間半ほどで完成しました!

PC用テーマを元に、その面影を残しながらモバイル用にカスタマイズできて個人的に大満足です。

今後の課題

サイドバーを削った分、カテゴリーやタグへのアクセスが恐ろしく不便になってしまいました。
そのうち改めて、ヘッダーかフッターにまとめて置きたいですね。

おわりに


というわけで、テーマを自作された方なら思ったより簡単にできそうなモバイルテーマの自作。
気になる方は、ぜひ時間を見つけて取り組んでみてください。

もし表示の乱れなどあったら、@_harashinまでお教え頂けると助かります。

スポンサード リンク

最後まで読んで頂きありがとうございます。
気に入って頂けたら、RSSフィードの購読をお願いします。

RSS FEED

« »