FC2ブログ画像で「コンテンツの幅が画面の幅を超えています」エラー

FC2ブログを運用しています。
サーチコンソールのモバイル ユーザビリティにて「コンテンツの幅が画面の幅を超えています」のエラーが続出するようになりました。
スマホではレスポンシブデザインを採用していて、各記事自体は問題がないようなのですが、クリック先の画像自体が「コンテンツの幅が画面の幅を超えています」と指摘されているようです。
大きさ自体は「1300×900」程度でそれほど大きくないと思うのですが…
たしかに画像クリックすると、スマホ画面では横幅が一画面には収まっていません。
そこで、以下の質問をさせてください。

①一画面に収まるように画像のサイズを設定したいのですが、スマホのテンプレで横幅をいくつに設定すれば良いのか分かりません。どうやって調べればいいでしょうか？
②知識がなく、横幅の数値調整くらいしかアイディアがないのですが、他に対策があれば教えてください。お恥ずかしながら、タグや記述の知識はほとんどありません。
③現在エラーが200ほど出ているのですが、一括で修正する方法はあるでしょうか？
④ちょうど「コンテンツの幅が画面の幅を超えています」のエラーが続出するようになってから、当ブログの主要キーワードの検索順位が大幅に下がりました。これはペナルティを受けているからでしょうか？サーチコンソールには警告メッセージは届いていません。順位としては、例えば平均掲載順位1位だったものが33位、同じく1位だったものが12位…といった具合です。

以上、ご回答いただけますと幸いです。
参考としてエラー画面を添付します。
宜しくお願いします。

質問者からの補足コメント

• 

  ごめんなさい、追加質問です。
  エラーが200程度なので、画像のサイズ自体を訂正して貼りなおすことも考えております。
  スマホテンプレの横幅を知りたいのですが、どうやって調べればいいのでしょうか…？
  検索したのですが今回のケースにしっくり来る回答が得られず…
  恐れ入りますが、宜しくお願いいたします。

  No.2の回答に寄せられた補足コメントです。 補足日時：2019/03/21 06:18

No.8 ベストアンサー 回答者： t_fumiaki 回答日時： 2019/03/21 21:13

やはりアルバムが原因の様ですね。

htttps://ブログ名.com/imgs/画像名.jpgはアルバムです。
直接画像は、https://blog-imgs・・・・・ですから。

●fc2での処置

プラグイン設定で、スマートフォン用の「ブラグイン管理」をクリックして、アルバムが有ったら削除して下さい。
携帯用の「ブラグイン管理」も同じ様にしてアルバムを削除して下さい。

また念の為、「sky_flow_sp」のCSSに1行追加しておいて下さい。
bodyの上辺りで構いません。
img{max-width: 100%;}　←この1行を追加。

●googleサーチコンソールでの処置

過去のものが、既にgoogleにインデックスされてしまっていますので、インデックス削除依頼をして下さい。

サーチコンソール画面で行います。
対象は、エラーが出ている画像のurlです。

画面の左上≡からメニューに入り、以前のバージョンに戻すをクリックして旧バージョン画面にします。

・左メニューの▼googleインデックス⇒urlの削除

・一時的に非表示にするボタンをクリックしてurlを入力する。
画像は全て要らないので、imgs/を入力して、リクエストを送信ボタンクリック。

htttps://ブログ名.com/img/画像名.jpgだと書いてありましたが、img/では無くて、正しくはimgs/だと思います。

良く確認して正しく入力して下さい。

携帯用の画像urlも確認してフォルダ毎一括削除して下さい。


エラーが出ていても、記事そのものの順位には関係無いので、ジックリ処置して下さい。

この回答へのお礼

アドバイスありがとうございます！進めてみました。
以下、質問と確認です。

①プラグイン設定で、スマートフォン用の「ブラグイン管理」をクリックして、アルバムが有ったら削除して下さい。
→有効 or 無効の選択しかできませんでしたので無効にしました。結果、スマホでアルバムが表示されなくなりました◎
　携帯用のほうはもともとプラグインが無効になってました。

②また念の為、「sky_flow_sp」のCSSに1行追加しておいて下さい。
bodyの上辺りで構いません。
img{max-width: 100%;}　←この1行を追加。

→スタイルシートでbodyが単独で出てくる記述が


/*============================================================
Basic
============================================================*/
body {
background: #FFF;
font-family: Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
font-size:13px;
color:#585858;
word-break: break-all;
-webkit-text-size-adjust: none;
}


のみになります。


============================================================*/
☆
body {

の２行の間(☆の部分)に追加でOKでしょうか？

ちなみに

img{max-width: 100%;}

はどういった記述でしょう？アルバムではなく画像のサイズ関連ですよね？画像を画面横幅いっぱいにする…でしょうか？？

～文字数オーバーになってしまったので、質問6のお礼に続きを書かせていただきますm(__)m～

お礼日時：2019/03/22 04:25

No.7 回答者： t_fumiaki 回答日時： 2019/03/21 17:14

矢次早の投稿で済みません。

環境設定⇒ブログ設定の中に有る、スマートフォン版の表示設定

ここの「スマートフォンの表示設定」が「有効にする」になっていたら、
「無効にする」に設定し直して、試して下さい。

スマホ版でブログ表示したり、googleでエラー通知されてるurlとか・・。
携帯画像・・・とか、を試して下さい。

FC2問い合わせ前に試して見て下さい。

有効にしてるから、スマホレスポンシブを無視して設定を優先している様に思えます。

この回答へのお礼

ご回答ありがとうございます！

ごめんなさい、そもそものお伝えが間違っていました。。。
「レスポンシブデザイン」というのが、ブログ内画像の横幅が勝手に表示に合わせられることだと思い込んでいました。
テンプレは、スマホとPCでは別のものになります。

スマホ版のテンプレは「sky_flow_sp」
PC版は「eyecatcher-2c」です。

アルバムはあえては入れていないのですが、スマホ版のもともとのテンプレートに入っています。
使わないので、もし外せるなら外したいのですが…
今回の質問をする前に画像クリックをした時にアルバム内画像に移動することに気付いたので、現在は設定を変えてクリック後はアルバムとリンクさせずに直接画像が表示されるようにしています。
が、新規投稿からこちらの設定は反映するようで、過去投稿分はアルバム内の画像をすべて削除してもなぜかアルバム内に移動してしまいます。

できればスマホとPCでテンプレを変えておきたいので「スマートフォンの表示設定」は「有効にする」にしておきたいのですが、ご指示の「無効にする」に切り替えるとどのようになるのでしょうか？

お礼日時：2019/03/21 18:37

No.6 回答者： t_fumiaki 回答日時： 2019/03/21 16:05

もしかしたら、アルバムをプラグインしてませんか？

この回答へのお礼

～No.8への続きです～

③過去のものが、既にgoogleにインデックスされてしまっていますので、インデックス削除依頼をして下さい。

→了解です！
　こちらから、現在エラーが出ているURLを送れば検索画面に表示されなくなる(=サーチコンソールのエラーに出なくなる)…という認識で合っているでしょうか？

ちなみに、画像名は　htttps://ブログ名.com/img/画像名.jpg　なんです。実際…

例えば直近でエラーが出た画像URLをそのまま張り付けると

https://nara-osaka-gourmet.com/img/2019030916410 …

です。

こちら、なにか影響がありますでしょうか？？

お礼日時：2019/03/22 04:26

No.5 回答者： t_fumiaki 回答日時： 2019/03/21 13:52

エラー指摘されている画像は、ブログ記事内の画像をクリックした時に表示される画像名とはurl異なっています。

htttps://ブログ名.com/img/画像名.jpg/で表示されるのは、アルバムを直接表示した場合のurlで、レスポンシブとかは関係ない表示のようです。

ブログ記事内の画像をクリックした時に表示される画像はurlが上のhtttps://ブログ名.com/img/画像名.jpg/とは異なっていて、この表示画像はスマホ幅に合わせたレスポンシブ表示となります。

fc2への問い合わせ画面より具体的に問い合わせを行ってください。

<<<例文>>>

スマホ側で「コンテンツの幅が画面の幅を超えています」と言う警告をgoogleから多数受けています。

該当するurlは代表すると、htttps://ブログ名.com/img/画像名.jpg ← 具体的に書く。
これはアルバム画像のurlだと思いますが、確かにスマホで表示すると、ブラウザの横幅を超えてしまいます。

元画像のサイズを修正する以外に、ブラウザの横幅内に納める方法が有りましたら教えて下さい。

または、検索エンジンにクロールさせない方法が有りましたら教えて下さい。

記事内画像をタップして表示される画像はレスポンシブで表示されます。

No.4 回答者： t_fumiaki 回答日時： 2019/03/21 12:07

>>モバイル ユーザビリティ→コンテンツの幅が画面の幅を超えています

>>htttps://ブログ名.com/img/画像名.jpg/

もしそうなら変ですね？少し調べて見ます。

>>SEO面で減点対象
そうです。がSEOはあくまでページ単位です。
記事やブログ全体じゃ無く、その画像のURLが減点対象になります（僅かに）。

だから、余り気にする必要は有りません。

No.3 回答者： t_fumiaki 回答日時： 2019/03/21 11:22

>>スマホテンプレの横幅

機種によってマチマチなので、そこをカバーする為のレスポンシブなのですが・・・。

エラーが出ているのは、そこじゃ無いと思いますが・・・・。
画像だけをクリックして画像単体表示する人がそんなに多く居るとは思えません。

htttps://ブログ名.com/img/画像名.jpg/
これは、画像だけを単体表示してる訳で、テンプレは無関係です。

サーチコンソールのエラーを辿って、urlが何かを調べた方が良いのでは？

因みに、スマホの縦表示の最小幅機種は320ピクセルです。

また、順位に影響する事は先ず有りません。

この回答へのお礼

細やかにお返事いただいて、ありがとうございます。

モバイル ユーザビリティ→コンテンツの幅が画面の幅を超えています

の画面で表示されてるのが、

htttps://ブログ名.com/img/画像名.jpg/

なんです。※もともとの質問に添付した画像がそちらです。

今年の1/31からクロールのたびに上記の画像URLがエラーとして蓄積されていっている現状です。

実は本当のエラーは表示されてるURLズバリではなく、元のブログ記事のどこかだったりするのでしょうか…？

ちなみにひとつだけブログ記事のURL

https://ブログ名.com/blog-entry-記事番号.html

がエラー表示されてましたが、一部を修正して更新したら消えました。

おっしゃる通り、画像単体表示する方はあまりいらっしゃらないと思いますし、
クリック先の画像自体を上位表示させたい訳ではありません。

気になるのが、「モバイルフレンドリーじゃない画像がたくさんあるブログ」として
SEO面で減点対象にならないかというところです。

お礼日時：2019/03/21 11:48

No.2 回答者： t_fumiaki 回答日時： 2019/03/20 22:07

その画像をクリックした時表示される大きい画像のURLが次の様になってませんか？

https://blog-imgs・・・・・.jpg
.jpgの部分は拡張子なので、.pngとか、.gifかも知れませんが・・・・。

もしそうなら、htmlやcssは関係なく、FC2の内部処理になります。
この場合は、FC2に問い合わせないと解りません。

この回答へのお礼

クリックした時表示される大きい画像のURLは以下になっています。

https://ブログ名.com/img/画像名.jpg/

テンプレートの修正では直らないということでしょうか？？(^^;

お礼日時：2019/03/21 05:23

No.1 回答者： t_fumiaki 回答日時： 2019/03/20 17:44

クリック先の画像は貴方のブログのクリック先ページに掲載してる画像ですか？

スマホテンプレートを修正すれば良いと思います。

body img{width:○○%;} を先頭当りに追加する。

スマホの横幅一杯に表示したいなら、100%、半分なら50%・・・・。
ただし、記事中の画像全部に適用されますが・・・。


これで良くて、やり方が難しいなら、問題のurlと使ってるスマホ側テンプレート名を提示して見て下さいな。

この回答へのお礼

早々にご回答をありがとうございます。

クリック先の画像は貴方のブログのクリック先ページに掲載してる画像ですか？

⇒ブログ本文の画像をクリックすると、そちらが単独の画像として大きく表示されるページに移動します(同じブログ内です)。

body img{width:○○%;} を先頭当りに追加する。

⇒入れるのはスマホテンプレの中ですよね？HTMLのほうでしょうか？スタイルシートでしょうか？とはいえ、お恥ずかしながらどこに挿入すれば良いのか分かりません…(-_-;)
　使用しているのはFC2公式テンプレの「sky_flow_sp」です。
　100%にすると、ブログ本文だけでなく、クリックして表示される(別画面の)画像も画面幅に合うようになるのでしょうか？

教えていただけると幸いです。

お礼日時：2019/03/20 18:16