突然、関連記事に画像が表示されなくなり困りました…Blogger

2020年10月10日土曜日

ブログ

オクラ(和名:アメリカネリ)の白い花
オクラ(和名:アメリカネリ)の花
原産地はエチオピアが有力視される
オクラ(英語:okra)米国南部では野菜としてポピュラーですね

関連記事に画像が表示されない問題

原因は未だハッキリしませんが、突然、関連記事に画像が表示されなくなり困ってしまいました。 

関連記事で画像が表示される投稿のHTMLと表示されないHTMLを比較して違いを見極めようとしたのですが、力足らずでした(-_-;)
関連記事に画像が表示されていない画面
上の段の左端の記事に画像がありません

色々なサイトを参照させて頂きながら、試行錯誤を繰り返したのですが、諦めかけた時にヒントになったのが次のサイトです。
Bloggerのメモブログ
この中で、記事本文中の画像サイズの設定の仕方が説明されておりますが、src=から始まるコードの中の横幅表示が異なっていることに気付かされたのです。

問題のない記事ではsrc=コード内の横幅表示は「Bloggerのメモブログ」内の説明と同じで、問題のある記事では異なることが分かったのです。

勿論、この時点では、その違いが関連記事に画像が表示されない原因か否かはわかりませんでしたが、異なる部分を変更してみましたところ、関連記事に画像が表示されるようになったのです(^O^)/

画像が表示されなかった関連記事に画像が表示されるようになった画面
位置は上段の右から2番目に変わってますが、画像が表示されています。

何故そうなってしまうのかは分かりませんが、取り敢えず、小手先での問題解決は出来たという次第です。
何れ、原因は分かり次第、ご報告致します。

解決方法

まずは、投稿エディタのHTMLレビューで画像の部分を確認してみます。
(画像要素の表示は全て同じという訳ではありませんが、その違いを気にする必要はありません)

次の画像は一般的で問題のない要素になっています。
一般的で問題のない画像のHTML要素
問題のない画像のHTML

上記の画面で太字の数字が画像の横幅を規定するピクセルですね。
“640”とありますのはサイズが「特大」ということです。

上の画面の中断にある太字の数字頭には“s”が付いていますが、この“s”が重要になります。

なお、これらの太文字の上段の数字が下段の数字よりも小さいと、画像の鮮明度が失われるそうです。

次の画像は、違いとその違いを修正したものです。
画像HTMLの違いとそれの違いを修正した画面
画像HTMLの違いとそれの違いを修正した画面

上の画面内の画像HTMLでは、上段(src=から始まる部分)に“/w740-h398/”とありますが、何故、”/s〇〇〇/”ではなく、“/w〇〇〇-h〇〇〇/”となっているのかは分かりません…

それはさて措き、赤字の“w”を“s”に置き換えることによって問題は解決します。
“/s740-h398/”のようにです。

その変更によって、記事本文内の画像に問題が発生することはありません…少なくとも私が何回かチェックした結果ではです。
但し、例の如く、私のケースが全ての方に適合するとは申しませんので、問題が発生する場合は悪しからず…それでも、この変更は簡単に元に戻せる筈ですからね。

なお、“740”とありますのは、私が画像の大きさをレイアウト幅一杯に広がるサイズにするためです…特大サイズ“640”ですと、一行の文の幅(長さ)よりも狭くなります。

備 考

QooQのバージョンを1.26から1.28にアップしましたが、このバージョンアップは関連記事に画像が欠ける原因ではありません。
何故なら、バージョン1.26の時から問題が発生しましたので…

Bloggerの新エディタを使い始めた頃から問題が発生したような気もしますが、写真編集に新たなアプリを使い始めた頃とも言えそうですので、定かではありません。

Translate

ブログ内の検索

読んで頂きたい投稿

日本を素晴らしい国にするために人口2億を目指す

アーカイブ

ラベル

Follow by Email

連絡フォーム

名前

メール *

メッセージ *

QooQ