3119571903115

7/9 WP日記2

(PCから見た人用)スマホではこんな感じで表示される

先週、半年ぶりに記事を書いた後、自分のサイトのGoogleでの検索結果を見たら、「ページがモバイルフレンドリーではありません」という一文が。その文をクリックすると、やれ文字が小さいだのリンクが近すぎるだのとダメ出しを食らってしまった。大きなお世話だと思いつつもいろいろ調べてみると、どうやら少し前にGoogleのポリシーが変わったらしく、サイトがモバイルフレンドリーでないと検索順位が下がってしまうらしい。
※ちなみにこのリンクから任意のWebサイトがモバイルフレンドリーかどうかテストできます。

確かに最近はPCで見るよりスマホで見る方が多いだろうけど、今のスマホの解像度なら通常のPC用サイトも表示できるし、文字が小さければ拡大して見ればいい。だいたい、自分がスマホで一番よく見るグ○ーンの公式サイトもスマホ対応してないし、一口クラブのサイトでは人気の大手クラブや新興系はだいたい対応しているが、ラ○ィアンやウ○ンはスマホ対応してない(携帯サイトには対応してるみたい)し、シ○ーなんてスマホ対応してない上にデザインも微妙だしw

だが例えば実際に「ブリージーウッズの18」でGoogle検索してみると、確かに全然出て来ない。そりゃまあこんな弱小サイトで検索上位を取れるわけがないのだけど、地方オーナーズというニッチな世界で募集された1歳馬でそんなに話題に上がることは多くないはずなのに、検索語と完全一致していないページの方が上に来て、数ページ進めてやっと出てくるような状態で、ちょっとプライオリティが低すぎ。検索ツールで期間指定すればもう少し上位に出るかと思ったら、検索中位以降なぜかいかがわしいサイトばかり出て来て逆に検索結果に出なくなる始末。広告貼ってるわけでもないし、別に検索順位が低くてもいいんだけど、なんとなくやな感じではあるので、ブログのモバイルフレンドリー対応を進めることに。

数年前にCMSをWordPressにしたので、既存のテーマを使っていればモバイル対応も問題なかったはずだけど、元々のデザインにこだわったためテーマを自作していたのが仇となり今回も自力対応。まずモバイルとPCで表示するテーマを変えるプラグインを入れ、元のテーマをコピーして名前を変更してモバイル用テーマに割り当てる。デザインは左右にあるサイドバーを一つにまとめて全体のフォントを大きくする方向で対応してみるが、投稿欄の左に写真、右に成績表テーブルのような特殊なページを作ってしまっているので、モバイルの横幅ではサイドバーなしの1カラムじゃないとレイアウトが大きく崩れる可能性が高い。そうするとサイドバーのコンテンツはページの下に回すことになるが、本文が長めの傾向なので、相当スクロールしないと見えないため使い勝手もよくない。となると残された案はボタンを押すと横からニュっと出てくるいわゆるドロワーメニューにするしかないが、この機能を自作のテーマに組み込むのはしんどそう。いや、よく考えたらモバイル用には別テーマを割り当てるんだから既存のWordPress用テーマにしてカスタマイズした方が早いんじゃ…と思い直して、Cocoonというフリーのテーマを使うことにした。

このテーマ、何がいいかってテーブルの体裁を自動的に整えてきれいに表示してくれるし、しかも横幅が長いテーブルの場合は自動で横スクロールしてレイアウトが崩れないようにしてくれるという優れもの。最近の記事のほとんどが成績表示用のテーブルありきの本ブログにはぴったり!他にもある程度のカスタマイズは設定画面からできたり、かなり多機能でよさそう。

それでもなるべく今のデザインを残したいのでソースのカスタマイズは必要。ドロワーメニューもCocoon付属の機能では自由度が少ないため、CSSで機能を実現する凡例があったので別途それを組み込んだ。というわけで出来上がったのが今のこのサイト。PCから見てる人はほとんど見た目は変わってませんが。これでほんとに検索順位上がるのかなぁ…あ、半年に1回しか更新してないんじゃ意味ないか。


コメント