[ 解決済 ] ヘッダーロゴのサイズを指定するには
[ 解決済 ] ヘッダーロゴのサイズを指定するには
- このトピックには16件の返信、3人の参加者があり、最後に
により2年、 11ヶ月前に更新されました。
-
投稿
-
Googleスピードテストで以下の内容の注意が出るので対処したいのですが、Lightningの設定の中でヘッダーロゴ画像の幅と高さを明示的にする方法が分からずにおります。
高さと幅を明示的にする方法をご存知でしたら宜しくお願いします。
—以下、Googleスピードテストで出る注文書です—
画像要素で width と height が明示的に指定されていない
画像要素で幅と高さを明示的に設定すると、レイアウトの移動を減らして、CLS を改善できます。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
追記します。
ヘッダーロゴはLightningのカスタマイズ画面で添付写真の箇所で指定しております。
このロゴ画像自体は、添付写真2枚目のようにLightningでの推奨サイズに作成はしております。その上でグーグルスピードテストから警告？としてサイズ指定を明示的にするように言われるので、どこで指定したものか？とわからずにおりました。
カスタマイズの追加CSSか、もしくは子テーマでしたら子テーマのstyle.cssなどにロゴの画像のサイズを記述しますと良いのではないかと思います。
推奨サイズとのことですので、以下でいかがでしょうか、、？
※一度スマホやPCでサイズが合っているのかご確認ください。.site-header-logo img{ width: 280px; height: 60px; max-height: 60px; }うなこさん、回答ありがとうございます。
長い目で見て子テーマにて対応したいと思います。
G3βはβにてサポート対象外とは思いますが、可能な範囲であれば質問したいのですが、G3β用にも子テーマは配布予定はあるでしょうか？> G3β用にも子テーマは配布予定はあるでしょうか？
今後G3用にも準備する予定ですが、もしお急ぎでしたら、
現在あがっている「Lightning 子テーマサンプル」でもご利用いただけます。うなこ様
お陰様で
「CLS を改善」
とのGoogle先生の指摘が一箇所消す事が出来ました。
子テーマですが、G3用が提供されるのを待ちたいと思います。
今急ぎでLightning子テーマを採用して、G3用が出た時に再度入れ替えるのが私にはリスクを2度通過しなければならず自信もないのです。G3の子テーマが出てきたら、先日、対馬様に教えていただいたmenuボタンの表示と合わせて、子テーマで対処したいと思います。
今日の時点では、追加CSSで我慢したいと思います。追伸
CLSの改善ですが、ご相談した箇所は治ったのですが、Q＆Aブロックの写真でも同様の指摘がGoogle先生から出てしまってました。
出来ればベクトル様の提供するテーマやブロック全般でCLS問題が指摘されないような変更が入ったら良いと感じました。
画像サイズを推奨値に指定すると問題が生じるから、あえて推奨値を示してもスタイルでの指定は避けているのであれば致し方ないのですが、もし今回うなこ様に教えていただいたような事をベクトル様のテーマやプラグインで根本的に対処しても良いのであれば、将来的にその方向もご検討いただけたらと思いました。子テーマの件ですが、cssのカスタマイズのみでしたら、現在あがっている「Lightning 子テーマサンプル」で大丈夫かなと思っております。
といいますのも、おそらくはG3用の空のフォルダが入っているか入っていないかの違いになりますので、cssのみカスタマイズする場合は特に現在の子テーマでも問題ないと思っております。
どちらでも大丈夫です。追伸で書いていただいた画像サイズの件ですが、
PageSpeed Insights にて先ほどサイトを見させていただきましたところ、
トップページの「荷台に入るサイズ」画像に「画像要素で width と height が明示的に指定されていない」と出ているようでした。
こちらの画像は、もう一度あげ直していただくとwidth と heightが入ったりしませんか、、？うなこ様 子テーマのお話し、ありがとうございます。
それなら大丈夫そうですね。今は作業できない状況にて、明日以降でやってみます。
また、画素の縦横指定の件も、明日にでも画像の再設定してみます。これはメディアファイルを再度、該当ページに入れ直すのでは無く、ローカルのパソコンからメディアにアップロードし直すと言う意味でしょうか？
まずは現在アップロード済みの画像を再度該当ページに入れ直し、Google先生の評価に変化がなければ、メディアファイルを削除してアップロードからやり直そうかな？とは思ってます。
また、追伸に書いたTOPページのQ&Aブロックの画像サイズ問題は、自力では回避不可能と判断して、手っ取り早く、その中に本来あった「吹き出しブロック」を削除して暫定対処しました。
荷物サイズの画像のアラームは見落としてました(笑)
うなこ様
まずは追加CSSの状態のままで、該当画像を再度ローカルからアップロードして、再設定しました。
ご指定の通り、サイズが明示的に指定されてないとの警告は出なくなりました。
ありがとうございます。同様に解決するか？と思って、吹き出しブロックも画像の再アップロードで実験したのですが、こちらの方はサイズが明示的に指定されてないとの警告が出てしまいました。
デベロッパーツールを活用すれば、ヘッダーロゴのアドバイスを真似て直せるか？と安易に考えたのですが結局は分からず終わりました。
現状表示速度は問題が無さそうなので、この手のエラーは無視しないとキリが無いのかな？と感じつつあります。
今はCLSなんちゃらの警告への対応は諦めようかと思います。今日は時間を取れたら追加CSSを子テーマに移動するか？
あるいは、残りのブログをG3にテーマ変更したいと思っております。返事遅くなりもうしわけないです。
吹き出しブロックの画像部分はimageにwidthとheightが VK Blocks のcssに書かれていると思いますので、
おそらく画像要素で width と height が明示的に指定されていないは出ていないと思うのですが、
いかがでしょうかうなこさん、対応ありがとうございます。
今現在も警告が出ている状態なのです。一応、写真を2枚添付します。
１、警告されたと思う箇所の場所の表示イメージ
と
２、グーグルスピードテストの結果の2枚の写真を添付します。該当箇所のURLは
なのですが、ページの下の方でQAブロックの中に、更に吹き出しブロックを入れた場所なので
この入れ子構造となるブロック利用方法がまずかったでしょうか？ほんとですね、、、
.vk_balloon_icon_image のクラスにwidth とheightは入っているのですが、、、
なぜでしょう、、？うーん、、もし原因がわかりましたらまたお知らせします。
> .vk_balloon_icon_image のクラスにwidth とheightは入っているのですが
クラスに指定すると
画像要素で width と height が明示的に指定されていない
と言われてしまいます。
こうすると合格です。
img.vk_balloon_icon_image { width: 64px; height: 64px; }なにそれ？ ってかんじですよね。
どっちでもいいと思いますし、この部分に関しては Google のアドバイス通りやったからといってスコアがよくなるわけじゃないです。
momo さんへ
momo さんのトップページは CLS スコアが 0 (満点) です。
つまり、もう CLS 改善の余地はないんです。これをやると「CLS を改善できます。」と Google は言ってますが、
CLS に関してはこれ以上やる意味がないので無視するのが吉です。momo さんのトップページを見たところ、もう十分にシェイプアップされていて、
やることがなさそうです。これ以上スコア改善のためにやるとしたら、
デザインスキンを Origin III から Plain にすることくらいかと思います。
- このトピックに返信するにはログインが必要です。
