モバイルフレンドリーまでの道のり

数ヶ月前に、GoogleのSearch Consoleが「新しいSearch Console」を使用するようメッセージが出るようになってからだっただろうか。

いろいろなレポートが新しいほうでないと利用できないようになり、しぶしぶ新しいレポートに移行したところ、モバイルユーザビリティのエラーが出まくっていた。

ネットで調べるも、どれも自分のケースとは違うようで修正できず、途方に暮れかけていた最近、やっと解決策らしきものが見つかった。

といっても、今回は全面解決ではなく、一時的な解決策のつもりだったんだけど、これもありかな、とも思いはじめ・・。

ということで、もしかしたら、モバイルユーザビリティのエラーで修正できず悩んでいる自分のような初心者のWordpressユーザー、なかでも、「Simplicity2」のテーマを使用している人にとっての解決へのアイデアになるかもしれないのと、自分への忘備録として、ことの顛末をメモっておこうと思います。

↓ここに出ている「スポンサーリンク」のことです。

スポンサーリンク

WordPressのテーマは「Simplicity2」

WordPressをはじめたときからずっと「Simplicity2」を使用しています。

今回、Search Consoleのモバイルユーザビリティで指摘されていたエラーは、
・コンテンツの幅が画面の幅を超えています
・クリック可能な要素同士が近すぎます
・テキストが小さすぎて読めません

もうずいぶん前すぎて最近の記憶と被ってしまっているんですが、たしか、60個くらい出てたと思います。1個目と2個目はほぼ重複してました。
全体の記事の20%弱くらいのエラー数でした。

それと、上の2つがずっと出ていて、3つめの「テキストが小さすぎて、読めません」は最近1件だけ出てきていました。

WordPressのモバイルアプリも使ったことはあるんだけど、仕上がりがぜんぜんPCのときと違っていて、けっきょく、PCだけからの入力に戻ってしまった過去以来、そもそもモバイルでの表示を気にかけることもなく、ここまできてしまっていたのも問題だったと思います。

ひさびさに、iPhoneで自分のブログを見てみたら、下に横スクロールバーが出て、横にスクロールできようになってるんです。
こりゃ、指摘されるわな。笑

もともとPCサイトでも、横長の長方形の広告がレイアウトから、はみ出していることも気になっていて、「この広告が原因なんだ」と思いました。

ただ、だとしても、PC版では、エラーが出ておらず、またリトモス系の記事はほぼほぼエラーが出てないのも不思議でした。

はみ出ている広告への対応 1

「Simplicity2」のレイアウトの枠線より、一般的な横長の広告が長い、ということでしょうか。

これに対しては、サイズの小さい広告に変更するということではなく、「Simplicity2」のレイアウトの枠線の左側の余白、マージンを詰めてしまおう、という対応のようです。

最初は、CSS(スタイルシート)を使う方法が紹介されていました。

ただ、「Simplicity」や「Simplicity2」と限定されてるわけではなかったですが、たぶん、自分の理解力が足りないようで、以下の方法では、解決できなかったので、リンクは控えます。

「カスタマイズ」画面一番下の「追加CSS」に以下コードを入力する。

.ad-space-wide {
margin-left: -24px;
}

つぎに、「外観」の「ウィジェット」の広告を貼るところに、

<div class=“ad-space-wide”>

”広告バナーのコード”

</div>

と入力します。上の最初の「ad-space-wide」が下のクラス指定で「ad-space-wide」となってるってことです。

でも、自分ではこの通りにやったつもりですが、広告を左に「24ピクセル」移動することはできませんでした。

なので、つぎにいきます!笑

はみ出ている広告への対応 2

つぎに見つけたのは、「外観」の「ウィジェット」にそのままコードを入れる方法です。

<div style=”margin: 0 -24px 15px;”>
//ココに「ビックバナー728×90」のコードを記入する
</div>

これはうまくいきました!

ずっとうざいなーと思っていた、レイアウト枠からはみ出す広告、やっと、左に「24px」ずらすことができ、レイアウト内にきちんとにおさまるようになりました。

ところが、PC版での見栄えはよくなったものの、モバイルでは横のスクロールバーが出たままでした。

モバイルユーザビリティの改善にはなりませんでした。

※ 長くなったので、このあとの経緯は「その2」としてアップします。

↓ここに出ている「スポンサーリンク」のことです。