ブログ掲載画像の右端が切れる…Simplify2

BloggerのテーマSimplify2

タダで利用させて頂けるものに、とやかく難癖をつけるのは、どうかとは思うのですが…
そうは思いましても、困ることがあれば困るのでありますから…

掲載写真の端が切れてるよと娘からメールが入ったのです。
彼女はスマホで見て、具体的に切れている写真を指摘してくれました。
私はPCでしか見ていませんので、そんなバカな!?という軽いショックを受けましたね(>_<)

掲載した写真が大きすぎたかな…いや、そんな筈はないなあ~…レスポンシブなんだから…などとブツブツ言いながらチェックし始めました。

まずは、その問題の写真が掲載されている投稿をブラウザに表示し、ブラウザの幅をスマホ幅程度まで縮小してみました。
確かに、彼女が指摘した写真の右端が切れます…他にも、そのような写真がありました。

HTML表示にして、右端が切れていない写真と切れている写真のHTMLの内容を比較してみたのですが、特異な部分はありません。
問題の写真を少し縮小して掲載し直しても変化がありません。

解決策を提示しているスマートな方のサイトがあるのではと検索してみたのですが、参考になりそうなサイトには出会えませんでしたね(-_-;)

テーマのHTMLを弄り過ぎたかなとも思いましたが、それなら、全部の掲載写真に影響がでる筈です…右端が切れるのは一部の掲載写真だけなのです。

本格的にHTML編集をする程の技量は全くありませんので、う~ん、困ったなあ~と縮小された投稿を眺めていたのですが…
あれっ、変だな、と気づいたのです…

多分、これが原因なのではと思い、その部分を変えてみました。
やったあー、直ったのです(^^♪

右端が切れる写真がいくつか掲載されている投稿を眺めていましたら、右端が切れる全ての写真の下には長めの説明書きが付いていたのです。
つまり、写真と本文はレスポンシブ(表示幅に応じて自動的に縮小し、折り返す)になっているのですが、その写真に付属する説明書きはレスポンシブになっていないのです。

従って、その説明書きの行の長さが表示幅を超えても自動的に折り返えさないので、写真も縮小されないのです。

HTML編集で改善する以外で、取り得る解決方法は次の二つです:
  1. 説明文の一行の長さをスマホの画面表示幅以内にする。
    多分、全角で15~20文字以内ではないかと推定します…大きな画面のスマホもありますが、そんなスマホを標準にしましても意味がありませんよね(^-^;
  2. 一番手っ取り早い方法は、掲載写真に説明書きを付けないことです。
    掲載写真の説明は本文で行うことです。

因みに、WordPress.com用のテーマは、その説明書きの部分もレスポンシブです…全部のテーマとは言いませんがね(^-^;


PS.
何故か、CSSが追加できません…(-_-;)


EmoticonEmoticon