前略、杉浦さん

４日ほど前に同様のご要望があったようです。

[解決済] speech-balloon画像のwidthとheightの追加

最近修正が入っていたんですか汗

気づきませんでした。

githubから新しいものをダウンロードして入れかえてみたんですけど、僕の場合は解決しませんでした。

何か設定とかしないといけないんですかね？

杉浦さん

いまのところ技術的に難しい、ということみたいです。

他に詳しい方が解決策をみつけてくださると良いのですが・・

サイズが取りあえず決まっていればいい感じだと思いますので、これで行けませんか？

img.speech-icon-image {
    width: 80px;
    height: auto;
}

山田太郎 さん

実際にテストを繰り返してみないと詳しいことはわかりませんが、パソコンのブラウザの幅を徐々に縮めていってみてください。

吹き出しの画像も少しずつ小さくなるばずです。

幅や高さを固定してしまっていいのであればよいのですが、画面幅を小さくしていったときに、表示のバランスが悪くなりませんか？

レスポンシブに対応するには、こっちの方が良さそうです。

img.speech-icon-image {
    width: 80px;
    height: calc(100%);
}

山田太郎さん

CSLの数値が高いのがPC表示の方でしたら、試すとすれば、以下のような感じでしょうか。

実際にやってみないと、結果はわかりません。

@media screen and (min-width:1281px) {
  .speech-icon img {
    width: 84px;
    height: 84px;
  }
}

山田太郎 さん

吹き出しの画像は、画面の幅によって伸縮します。

幅を80pxに固定してしまうと、画面幅を小さくしたときに、見た目のバランスが悪くなります。

山田太郎 さん

テーマ作者様が難しいとおっしゃってはいますが、ご自身でどのように試すのも自由ですので、いろいろ試してみてください。

良い方法が見つかるかもしれません。

imgのheightがautoだと吹き出しアイコンの枠の部分が縦方向に伸びてしまうようですね。

widthとheightを固定する必要がありそうです。

heightを固定してしまうと、レスポンシブ時にアスペクト比が変わってしまうのと、メディアクエリで切り替えるのもwidthが比率になっているので完全に対応するのは難しいかもしれません。

参考になるかわかりませんが、こちらで試してみた結果だけご報告します。

lazyload読み込み前のみ、imgのwidthとheightを同じ値で固定し、lozyload後はオリジナルのCSSにあるwidthとheightに戻すとガタツキはかなり改善されます。

杉浦さん

山田太郎さん

あるいは、以下のようにオーソドックスに指定するとどうなるのでしょう？

.speech-icon img {
    width: 84px;
    height: 84px;
}

@media screen and (max-width:1280px) {
  .speech-icon img {
    width: 100%;
    height: auto;
  }
}

height:autoを指定してしまうとimgタグ部分が画像が読み込まれるまで縦に伸びてしまいますね。

Native Lazyloadを使うのであれば、画像のアスペクト比がわかる数値をimgタグに直接指定しないとダメなようです（CSSではなく）。

逆に言えば、アスペクト比があっていれば画像のサイズは不正確でもよいので

<img width=84 height=84 src= ...>

<img width=840 height=840 src= ...>

のどちらでも、同じ結果になります。

実際のサイズとあっていなくても、ブラウザが勝手に調整するのでレスポンシブに対応できます。

ですので、テーマ側で決め打ちしてもらうのが一番簡単な対策になると思います。

よく分かっていなくて申し訳ないんですけど、結局問題を解決するにはどうしたらいいんですかね？

テーマ側で対策してもらうのを待てばいいって理解でよろしいですか？

杉浦さん

一応、テーマ作者様としては、現状難しいというご回答をされていらっしゃるようです。

何らかの解決方法があると良いのですが・・

私の書いたCSSのコードを試してみても、全く変わりはないでしょうか？

他の詳しい方が、何らかの解決方法を見出してくださることもあるかもしれません。

私はあまり詳しくないのですが、詳しい方が診てくださるかもしれませんので、フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLをご提示いただくと良いかもしれません。

杉浦さん

例えば「PageSpeed Insights」でPCとモバイルのCLSの値がいくつで、そのうち吹き出しの値がそれぞれいくつ等、何かしらの情報があった方が良いかもしれません。

情報があったからと言ってすぐ解決するということもないのかもしれないですが・・

私は、吹き出しをひとつも使っていないので、ローカルのテストサイトで吹き出しを設定してChromeのデベロッパーツールで調べているのですが、CLSがあまり顕著にデベロッパーツールに出てこないので、困っています。