WPtouchを卒業iPhoneに最適化されたテーマと簡単なカスタマイズ方法などwordpress

公開日:2012.02.03 最終更新日: 2014.09.26

どーも@nori510です。

当ブログのiPhoneからのアクセスの際の表示はずっと、簡単にiphone最適化表示が出来る「WPtouch」を使ってきました。

pluginを導入するだけで簡単にiPhoneに最適化された表示になり、非常に使い勝手がよろしいのですが、色々と思うところがあり、この程WPtouchを卒業する事にしました。

iPhone最適化テーマとカスタマイズ方法など

iPhone用に最適化されたテーマへの変更方法と、ちょっとだけカスタマイズの方法などをご紹介したいと思います。

が、まずはWPtouch卒業の理由。

1.唯でさえ狭いiPhone画面の横幅が、縁取りのお陰で更に狭いのが☓

勿論文字もですが、画像が多い当ブログにとって、表示域の狭さは致命的だなと思いまして。

2.WPtouchを利用する人が多すぎるのが☓

やっぱりオリジナリティー(?)を大切にしたい天邪鬼な私としては、WPtouchを卒業してチョッピリ背伸びがしたかった。

の、2つが変更の大きな理由です。

僕の変更の前提として、PCサイトの表示はそのまま変更しなくてもよい、というコトがありました。

という事で、iPhoneからのアクセスの場合のみ、別テーマに切り替えて表示をしてくれるプラグイン「WPtap Mobile Detector」を導入しました。

iPhoneのテーマのみ変更するならば「iPhone theme switch」というプラグインもあります。

が、「WPtap Mobile Detector」の方はiPhoneのみならず、iPad,android,など詳細に設定でテーマの変更が可能です。

私は多機能に惹かれて、コッチにしました。

iPhoneからのアクセス時に表示するテーマを変更するプラグイン「WPTap Mobile Detector」を導入したら、あとはどのテーマを指定するかの選択です。

もちろん自作するという手がありますが、既にあるテーマをカスタマイズした方が楽ですから。オリジナリティー(笑)

テーマ選びで、iPhoneに最適化されたレスポンシブデザインのテーマを選べば、勝手にiphoneに最適化された表示をしてくれるという訳です。楽チン。

参考にさせて頂いた記事はコチラです。

という事で私は、iPhoneからの表示は、iPhoneに最適化されたレスポンシブデザインのテーマ「Renova」にしてみました。

Renova WordPress Theme | llow

あとは「WPtouch」を無効化して、「WPTap Mobile Detector」を有効化し設定からiPhoneのテーマを先程選んだレスポンシブなテーマを選択。

コレでもうOKかなと思っていたら、記事内の画像がほぼすべてwidth500pxで指定しているからなのか、iphooeて表示してみると画像がはみ出してしまいました。

ですので、以下のcssを追加して画像の横幅を指定してやる必要がありました。

[css]
img{
max-width: 100% !important;
height: auto !important;
}
[/css]

コレで、画像の表示もOKです。意外と簡単で感嘆。

という感じに結構なんなく設定したiPhone用表示ページは、こんな感じになりました。

縁取りがなくなって、画像の表示幅も「WPtouch」時に比べて、

多少広くなりました。満足です。それに簡単でした。

ほぼやったのはコレだけで、あとは細かな個人的に気になる所を、テーマファイルイジってこちょこちょ変更しただけです。

コレでiPhoneからアクセスされた際の表示は、WPtouchを卒業して、最適化されたテーマに変更出来ました。

WPtouchから変更したいという方の少しでも参考になれば。

※当ブログの表示がオカシクなったなどありましたら@nori510までお教えいただけると嬉しいです。