備忘メモ：モバイル用テーマを再構築した
うちのサイトは、いい加減に作ってあるので仕様についてちょいちょいgoogleさんに怒られる。
で、ここ最近
「サイト https://www.chatarou.net/ で「モバイル ユーザビリティ」の問題が新たに 検出されました」
と言うマイナートラブルが出ていたのをちょっと改善させたので備忘メモ。
この問題、簡単に言うとスマホ用サイトに対応できてなくて、PC用サイトの表示だとスマホで見づらいよ、と言う苦情なのだが、一応うちのサイトはモバイルサイト用にカスタムCSS適用できるプラグインを適用していたはず…なので大丈夫なはずなのになんでだろうなあ…とおぼろげに思っていたが、原因が判明した。
少し前にwordpressのバージョンがメジャーアップデートして5.0になった際に、モバイルサイト用CSSを適用してくれているWPtouchプラグインが非対応になっていたのだ。放っておけばそのうちWPtouchがwordpress 5.x対応になってくれるかもしれないが、どうやら2か月近く対応されないまま放置されているっぽいので、この機会にWPtouchプラグインの利用をやめて、将来的にレスポンシブWebデザインとやらに地道に対応していくことにした。
正式なレスポンシブWebデザインと言うのは、html(と言うかテーマファイルのひな型php)は同じものを出力しつつ、css内にスマホ用・タブレット用・PC用と表示を変える記述をしておき、実際のアクセス時に表示を変えるということらしいが、とりあえずめんどくさいのでスマホ用(兼タブレット用)テーマファイルを書いておき、Multi Device Switcherプラグインでテーマファイル適用を変えるという実に玉虫色な解決することにした(これじゃあMulti Device Switcherプラグインが使えなくなったらまた同じトラブルにはまるんじゃないかと言うツッコミがありそうではあるのだけど)。
まあMulti Device Switcherプラグインはwordpress 5.xでも動くようなので当座は問題ないし。
モバイル用テーマ作成及び適用の大まかな手順としては
・まずプラグインの中でモバイルサイトを自動出力するようなもの(上記WPtouchやjetpackなど)の機能を停止させる。
・さらにプラグインの中でキャッシュ作成するようなものも停止させる。僕はこの機会にキャッシュ系プラグインは削除してしまった。あまり有効になった気がしないし。
・モバイル用のテーマをどこかから用意する。僕の場合はPC用ページで使っている自作のChatarou HTML5StyleのテーマをffftpでコピーしてChatarou HTML5StyleMobileとし、そのテーマファイル内のphpやcssを書き換えていった。僕のサイトは手抜きで非常に単純なthemeファイルなのでまあ手書きでシコシコ書き換えでなんとか対応できている(きちんときれいなファイルになっているかはわからないが)。
・モバイル用テーマの作成にあたっては、PC用の装飾をカットして、画面めいっぱい表示できるかつ文字が細かくなり過ぎないように、あたりが目安か。とりあえずやったこととしては、PC用サイトの装飾的なヘッダーやパンくずリストは廃止、文字色のベースをPC用はダークにしているがスマホ用はライトに変更、PC用ではトップサイトで概要表示せず先着記事4件をベタ表示しているがスマホ用では概要表示にする、そして後述の通りスマホ用表示タグを若干書き込んだ。
・スマホ用対応としては、まずhtmlのヘッダ記載部分(うちだとheader.php)に
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
を書き足す。viewportとは何ぞやって言うのはこの単語で検索するのが早いが、まあ要するにスマホサイトなどでは小さい画面で対応できるように実際の画面画素数とは別に仮想的な画面サイズを用意しているので、そっちに依存するように変更してやるということ。これにより、文章本文の文字が細かくなりすぎて見づらくなるのを防ぐ。
なお、viewportが絡んでくるのでスマホ用のレイアウトを厳密にやるのは非常に困難らしいので、スマホ用サイトは割とあきらめと言うか、凝ったことをせずに文字を右に配置か、左に配置か、ぐらいにとどめておくのが良いと思う。
さらに、style.cssに
@media only screen and (max-device-width : 480px) {
img {
width:100%;
height: auto;
}
}
を書き足し、画像表示が無難に収まるようにしておく。
・上記のモバイル用テーマを書き上げたら一旦適用し、PCやスマホなどで簡単に確認して問題ないかチェックしておく。問題なければ、テーマファイルをPC用のものに戻した後、Multi Device Switcherプラグインを起動し、プラグインの設定(外観の設定のマルチデバイスに組み込まれている)からスマホ用等のテーマを随時適用して終わり。ガラケー用とかゲーム端末用とかまでテーマファイル適用設定があるが、まあうちみたいな適当サイトでは全部スマホ用テーマで充分だろう。
といった感じでとりあえず問題は回避した。
うちのサイトではこれ以外でも
「サイト https://www.chatarou.net/ で「対象範囲」の問題が新たに 検出されました」(なぜかFirefoxでは表示できるURLがChromeでは500エラーだったりする)
とかの問題も出てたりするが原因も分からないので無視。
そう言えばFlickr badgeプラグインもChromeサイトでは動かなかったりするけど無視してるなあ…。いつか対策しなきゃいけないだろうか。