モバイルフレンドリーまでの道のり(その2)

すみません、本当は、リトのほうの記事をアップしようと思ってたんですが、今晩、イチロー引退の緊急会見が入ってしまったので、下書きしてあるほうを使いました。
明日は、リトのサビの記事をアップするつもりです。(いくつか、ベースは書き溜めているんですが、サビ記事の場合、いろいろ作業や検証が必要で、そこに時間がかかってしまう、ということでして・・。)


前回の「モバイルフレンドリーまでの道のり」で、Simplicity2のレイアウトからはみ出てしまった広告サイズの修正方法について書きました。

モバイルフレンドリーまでの道のり
数ヶ月前に、GoogleのSearch Consoleが「新しいSearch Console」を使用するようメッセージが出るようになってから...

はみ出てしまった広告のサイズを小さいものに変更するのでなく(自分はそうするつもりでした笑)、広告を左側に「24px」移動させるということで対応できました。

さて、これで「モバイルユーザビリティ」のエラーも解消だ!
・・・と期待したんですけど、このブログをiPhoneで表示してみると、横のスクロールバーが消えてないことに気づきました。
スクロールバーを右にスクロールすると、広告は本文のレイアウトの倍くらいあるままです。あれ?・・。

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

スポンサーリンク

PC用広告とモバイル用広告

PCでの見栄えは修正されたけど、モバイルでは、広告が横長のまま。

なぜなぜ?なんでだろーなんでだろー??と考えながら、ネットでいろいろ検索して、やっとその答えを見つけることができました。

無料WordPressテーマ、Simplicity 2 のカスタマイズを紹介しています。この記事では、関連記事下にビッグバナー広告を貼る方法と、インフィード広告のサイズ変更を行って貼り付ける方法を解説。また、広告のモバイル表示についても書いています。

管理人さん、ありがとうございます!
この記事で、Simplicity2には、広告を貼るスペースが「PC用」と「モバイル用」とちゃんと分けて設置できるようになってることがやっとわかりました!

しかも、前回の「モバイルフレンドリーまでの道のり」では、広告を左寄せするコードをウィジェットにそのまま書き込んでいましたが(ま、コピペですけど笑)、ちゃんと広告用のウィジェットを使うと「左マージンのピクセル数」で数字だけ入力すればいいこともわかりました。

ということで、ウィジェットをPCとスマホ、それぞれ広告用を新しく追加して、これまで広告を貼っていたウィジェットを全部削除しました。全取り替えしました。

作業を終えて、ちょっとドキドキしながら、このサイトをiPhone環境で開けてみたら、、

やったー!横スクロールバーが消えてました!!

モバイルユーザビリティの結果

喜び勇んで、Google Search Consoleを開き、今度もドキドキしながら、サマリーの画面を見てみると、、
まだ、エラーはそのままでした。
ちょっとガッカリしましたけど、ま、Googleのロボットさんがクロールするにもある程度時間はかかるんだろうと、解釈し、その日の作業を終えました。

どれくらい待ったでしょうか、、
何日たっても、モバイルユーザビリティのエラーは消えません。

でも、自分のスマホ、iPhoneで見る限り、もう、横のスクロールバーも出てないし、どこも見にくいところがあるようには思えません。

そして、これも何度かチェックしたことは、それまでもあったんですけど、Google Search Consoleのエラー画面のところから、エラーの出てるページの詳細を見ることができるんですよね。

それで見ると、広告ではなく、アイキャッチ画像(「ブログ新着順」で表示される左の正方形の画像で各ページのタイトルに下に大きく表示されていた画像、現在は削除しています)がデカいんです、思いっきりはみ出てます。
でも、iPhoneで見ると、適正なサイズになっていたので、気にはなりつつも気にしてなかったんですが(笑)、ここでひとつの可能性について思い当たりました。

もしかして、問題は「アイキャッチ画像」?

え?もしかして、このエラーの正体って、そもそも、モバイルでのアイキャッチ画像なの?って。

だとすると、広告がレイアウトからはみ出ていたにもかかわらず、PC版ではエラーが一切出ていなかったのも、モバイル版でもリトモス系の記事にはほとんどエラーが出てなかったのは、問題ないアイキャッチ画像をずっと使いまわしていたから、リトモス系以外の記事でだけエラーが出ていたのも納得がいく。

ええー?そういうこと??笑

ということで、やっと本当の問題は、「アイキャッチ画像」にありそうだということまでわかりました。

次回へつづく・・。

次回で最終回です。
現時点で、モバイルユーザビリティのエラーはすべて解消してますので。