この記事は、「モバイルフレンドリーまでの道のり」に、「モバイルフレンドリーまでの道のり(その2)」と「モバイルフレンドリーまでの道のり(その3)」を追記したものになります。
数ヶ月前に、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」としてアップします。
↓ここに出ている「スポンサーリンク」のことです。
モバイルフレンドリーまでの道のり(その2)
上記のやり方により、はみ出てしまった広告のサイズを小さいものに変更するのでなく(自分はそうするつもりでした笑)、広告を左側に「24px」移動させるということで対応できました。
さて、これで「モバイルユーザビリティ」のエラーも解消だ!
・・・と期待したんですけど、このブログをiPhoneで表示してみると、横のスクロールバーが消えてないことに気づきました。
スクロールバーを右にスクロールすると、広告は本文のレイアウトの倍くらいあるままです。あれ?・・。
PC用広告とモバイル用広告
PCでの見栄えは修正されたけど、モバイルでは、広告が横長のまま。
なぜなぜ?なんでだろーなんでだろー??と考えながら、ネットでいろいろ検索して、やっとその答えを見つけることができました。
https://veranda-tomato.work/ads-under-relations-customize-2837
(リンク切れなのでリンク解除しました)
管理人さん、ありがとうございます!
この記事で、Simplicity2には、広告を貼るスペースが「PC用」と「モバイル用」とちゃんと分けて設置できるようになってることがやっとわかりました!
しかも、前回の「モバイルフレンドリーまでの道のり」では、広告を左寄せするコードをウィジェットにそのまま書き込んでいましたが(ま、コピペですけど笑)、ちゃんと広告用のウィジェットを使うと「左マージンのピクセル数」で数字だけ入力すればいいこともわかりました。
ということで、ウィジェットをPCとスマホ、それぞれ広告用を新しく追加して、これまで広告を貼っていたウィジェットを全部削除しました。全取り替えしました。
作業を終えて、ちょっとドキドキしながら、このサイトをiPhone環境で開けてみたら、、
やったー!横スクロールバーが消えてました!!
モバイルユーザビリティの結果
喜び勇んで、Google Search Consoleを開き、今度もドキドキしながら、サマリーの画面を見てみると、、
まだ、エラーはそのままでした。
ちょっとガッカリしましたけど、ま、Googleのロボットさんがクロールするにもある程度時間はかかるんだろうと、解釈し、その日の作業を終えました。
どれくらい待ったでしょうか、、
何日たっても、モバイルユーザビリティのエラーは消えません。
でも、自分のスマホ、iPhoneで見る限り、もう、横のスクロールバーも出てないし、どこも見にくいところがあるようには思えません。
そして、これも何度かチェックしたことは、それまでもあったんですけど、Google Search Consoleのエラー画面のところから、エラーの出てるページの詳細を見ることができるんですよね。
それで見ると、広告ではなく、アイキャッチ画像(「ブログ新着順」で表示される左の正方形の画像で各ページのタイトルに下に大きく表示されていた画像、現在は削除しています)がデカいんです、思いっきりはみ出てます。
でも、iPhoneで見ると、適正なサイズになっていたので、気にはなりつつも気にしてなかったんですが(笑)、ここでひとつの可能性について思い当たりました。
もしかして、問題は「アイキャッチ画像」?
え?もしかして、このエラーの正体って、そもそも、モバイルでのアイキャッチ画像なの?って。
だとすると、広告がレイアウトからはみ出ていたにもかかわらず、PC版ではエラーが一切出ていなかったのも、モバイル版でもリトモス系の記事にはほとんどエラーが出てなかったのは、問題ないアイキャッチ画像をずっと使いまわしていたから、リトモス系以外の記事でだけエラーが出ていたのも納得がいく。
ええー?そういうこと??笑
ということで、やっと本当の問題は、「アイキャッチ画像」にありそうだということまでわかりました。
モバイルフレンドリーまでの道のり(その3)
このサイトをスマホで見ている人がいたら、もう気がついているかもしれませんね。
ここまできて、やっと解決することができました。
アイキャッチ画像とは
「アイキャッチ画像」とは、言葉通り、人目を引くための画像です。
ブログの場合、何について書いてあるかを文字のみでなく、画像を使って、こんなことが書かれているのかな、とイメージングするための画像です。
どうやら、モバイルユーザビリティのエラーの原因は、アイキャッチ画像のモバイルでの表示にあるのかも、とわかったので、こんどは、アイキャッチ画像について、調べまくりました。
でも、検索の仕方、キーワードの引っかけ方が悪いのか、「モバイルフレンドリーまでの道のり(その2)」で書いた広告の幅の問題のように、アイキャッチ画像に関しては、「PC用」「モバイル用」といった切り分けが探し出せませんでした。
アイキャッチ画像の非表示
アイキャッチ画像を、PC用、モバイル用と別個に設定できないのであれば、、
「外してしまえ!」
笑
だって、それしか思いつかないんだもん。笑
だとしても、アイキャッチ画像が表示されるところは、2ヶ所あって、アイキャッチ画像のすべてを削除や表示させないようにしなくても、エラーの原因らしい各ページの本文のタイトルの下に表示される分だけを表示させないようにすればいいんでないか?と気づきました。
ページ本文のアイキャッチ画像を非表示にしても、タイトル一覧のページ「ブログ(新着順)」では、サムネイル表示されています。
実をいえば、ちょっと抵抗あったんですよね。
各ページごとのタイトルの下にある、えらいデカい画像が。笑
それを表示させないためのチェックマークを入れたり入れなかったりの箇所は見つけられたので、とりあえず、それを非表示にしてみることにしました。
これで、モバイルユーザビリティのエラーが改善されるか確認した上で、このアイキャッチ画像とやらの、PCとかモバイルだとかの表示について、じっくり調べてみようと思ったんです。
モバイルフレンドリー
翌日、Google Search Consoleをチェックすると、エラーの数が少し減ってました。毎日、少しづつ減っていって、1週間弱くらいかな?全部のエラーがなくなるまで。
Googleのロボットさんがクロールするのにある程度の時間がかかるということでしょう。
そして、不思議なことに、「コンテンツの幅が画面の幅を超えています」の対策として、本文ページでのアイキャッチ画像を非表示にしただけなのに、他の2つのエラー、「クリック可能な要素同士が近すぎます」と「テキストが小さすぎて読めません」(これは、エラーが一つだけだったから、本当にエラーだったのかも不明)も消えていきました。
そして、ついに、念願の「モバイルフレンドリー」サイトになりました。
モバイルでのアイキャッチ画像
モバイルでもちゃんとアイキャッチ画像が表示されるように調べて、対応していこうと思っていたんですけどね、いろいろモバイル表示とか調べているうちに、べつの気がかりなことが出てきました。
最近は、ネットワークスピードも速くなったとはいえ、画像はページが重い原因になり、重いページ、遅いページは、離脱率が高くなると。
たしかにそうですよね、モバイルであるサイトを見ようとして、なかなかページが表示されなかったら、べつのページを探しますよね、自分もそうします、せっかちなので。笑
ならば、モバイルの本文ページには、そもそもアイキャッチ画像は不要なのではないか、と。
じゃあ、PCのほうは?
んー、PCのほうもなくてもいい気がする。
大きすぎるなーと違和感あったし。笑
ということで、とりあえず、本文ページから、PCサイトもモバイルサイトも、アイキャッチ画像は非表示にする、ということで、解決しました。
いままでもモバイルで見てくれてた方は、軽く感じますか?
今回のエラー対応で学んだこと
WordPressは、いろいろ自由がきく分、いったんエラーが出てしまうと、ちょっと大変です、いや、すごく大変でした。笑
ただ、今回のエラーがあったことにより、いままで知らなかったこと、わからなかったことを調べ、考えたことで、たくさんの知識を得ることができたと思います。
何かしら、トラブルとか不具合、不都合がないと、なかなか人は動きませんから。笑
そういう意味では、とても貴重な経験ができたと思います。
ジャジャジャジャジャジャーン!!!
「くろのすけはかしこさが3あがった」
コメント