Jetpackのモバイルテーマのカスタマイズ[追記あり]

ここの所、スマートフォンからのアクセスが非常に多くなって来ています。

店頭で、Android実機で本サイトを表示させてみると、表示のされ方が機種によってまちまちです。奇麗に表示される機種もあったり、ぐちゃぐちゃになっちゃう機種があったり、コンテンツ(画像)が表示されない機種があったり。

iOS機だとそんな事はないのですが。Androidめ。IE6で表示が崩れているのは知っていたけれど、もう滅んだ(はずだ)し、無視する事が出来ます。

でも、Androidはそうは行きません。

モバイルテーマのプラグインとして、Jetpackの物が良さそうとは、あたりを付けていました。実際に、Android実機で確認しても、ちゃんと読めます。もちろん、iOS機でもちゃんと表示されます。なかなか、快適です。

でも、デフォルトのテーマだと、色が気に入らないんですよ。カスタマイズするためには、Jetpackプラグインの中を直接いじらないとダメかと思っていました。

この方法だと、Jetpackプラグインが更新されたら、毎回変更しなくてはならなくなるはずです。Jetpackは、頻繁に更新があるので、毎回の変更は避けたいです。

(追記 2014-05-21 23:10 でも、こちらのページのおかげで、Jetpackのモバイルテーマがどこにあるかわかりました。カスタマイズするにしても、元の記述がわからないと、手の出しようがありません。大変参考になりました。ありがとうございます。)

そう思って、ちゃんと調べてみたら、Jetpackの中の人が、具体的なカスタマイズの方法を載せていてくれました。

この方法を試したら、うまく行きました。ヤッター!

調子に乗って、CSSのカスタマイズを続けていたら、逆にぐちゃぐちゃにしてしまいました。オリジナルのテーマ(PC用)のカスタマイズも一緒に組み込もうとしたら、おかしくなってしまったのです。

元のテーマをカスタマイズして使っているのですが、WordPressやCSS, PHPを使いだした最初の頃だったので、良く理解しないまま、汚く触っていました。