複眼中心がスマートフォン用レイアウトに対応

複眼中心がiPhoneやAndroidなどのスマートフォンに最適化されたレイアウトに対応した。WordPressのスマートフォン対応というとWPtouchが有名だが、インデックス・ページが日付ばかり強調されてしまうデザインなのと、個別ページがRSSそのままみたいな素っ気なさがどうも気にくわなかったので自分で作成することにした。デスクトップ用レイアウトの雰囲気を維持したままスマートフォン対応できたと思う。

スマートフォン用レイアウトを作成するには、HTMLはそのままでCSSだけで変更する方法とHTMLもCSSも変更してしまう方法があるが、後者のほうが転送量が減らせる点となんだかんだでHTMLごと変更してしまったほうが制約が少なくて楽という理由から後者を採用した。

端末ごとにWordPressのテーマを切り替えるプラグインは WPtap Mobile Detector が有名だが子テーマに対応していないので、Multi Device Switcher を使用している。

残っている課題は3つ。

1. iPadではデスクトップ用レイアウトで表示されるが、Androidタブレットではスマートフォン用レイアウトで表示されてしまう
2. スマートフォン用レイアウトから手動でデスクトップ用レイアウトに変更することができない
3. Opera Mobile for Android / Opera Mini for Android でのレイアウト崩れ

1については、Multi Device Switcher は「Android」という単語が見つかっただけでスマートフォンとして認識してしまうことが原因だ。正しくは Google ウェブマスター向け公式ブログ: Android のユーザーエージェントの検出について にあるとおり、「Android」と「Mobile」の両方が見つかったときだけスマートフォン用にしないといけない。正規表現で振り分けられるプラグインがあると良いんだけど、Multi Device Switcher のソースコードを直接変更して対応してしまうかもしれない。

2についても Multi Device Switcher では対応できないので、同様にソースコードを直接変更するかもしれない。

3についてはどうしようかな……。Operaの市場シェアを考えると無視できないのは分かるんだけど……。

なお、デスクトップ用レイアウトのCSSは親テーマの Twenty Ten のCSSをできるだけ生かして書いていたが、スマートフォン用レイアウトはこだわらずに書き直したので、デスクトップ用レイアウトよりすっきりした構成になった。今後はデスクトップ用レイアウトのほうも再構成したい。