ヘッダー画像のwidth、heightの設定方法

  • J

    使用：バージョン: 2.650

    pagespeed insightsで速度計測した際に、ヘッダー画像のwidth と height が明示的に指定されていないとの警告が出ており、CLSの値が悪い状態です。

    現在バージョン: 2.650を使用中なのですが、ヘッダー画像のwidth と heightの設定方法を教えていただけますようお願いいたします。

    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン : 5.7.2
    ご利用のサーバー名 : ヘテムル
    PHPのバージョン : 7.4.12
    OS :
    ご利用のブラウザ :
    該当サイトのURL : https://allabout-kankoku.info/

    0 1 件の返信
  • administrators

    @jiayoo さん

    こんにちは。

    https://jin-theme.com/update/

    ヘッダー画像へのwidth height指定は上記アップデート記事にもあるように、サイズが崩れてしまうのでテーマ側での調整は行っておりません。
    自己調整を行うか使わない選択でお願いします。

    0

  • 横から失礼します。
    確認したところ、PSIの指摘どおりJINには　width と height が明示的に指定がないようです。
    コードは
    #main-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    -webkit-transition: color .4s ease,background .4s ease,transform .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,box-shadow .4s ease;
    -webkit-transition: color .4s ease,background .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,-webkit-transform .4s ease,-webkit-box-shadow .4s ease;
    transition: color .4s ease,background .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,-webkit-transform .4s ease,-webkit-box-shadow .4s ease;
    transition: color .4s ease,background .4s ease,transform .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,box-shadow .4s ease;
    transition: color .4s ease,background .4s ease,transform .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,box-shadow .4s ease,-webkit-transform .4s ease,-webkit-box-shadow .4s ease;
    }
    というのが入っていて、最大幅は指定、高さは自由にという感じです。
    これが、最新モダンなコードだったんですが、2019年に新しく機能が実装され、昔の書き方が必要になってるようです。
    参考サイト：https://parashuto.com/rriver/development/img-size-attributes-are-back
    そこで、サイトにもあるように、
    #main-image img {
    aspect-ratio: attr(width) / attr(height);
    width: 100%!important;
    max-width: 100%;
    height: auto!important;
    display: block;
    margin: 0 auto;
    -webkit-transition: color .4s ease,background .4s ease,transform .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,box-shadow .4s ease;
    -webkit-transition: color .4s ease,background .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,-webkit-transform .4s ease,-webkit-box-shadow .4s ease;
    transition: color .4s ease,background .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,-webkit-transform .4s ease,-webkit-box-shadow .4s ease;
    transition: color .4s ease,background .4s ease,transform .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,box-shadow .4s ease;
    transition: color .4s ease,background .4s ease,transform .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,box-shadow .4s ease,-webkit-transform .4s ease,-webkit-box-shadow .4s ease;
    }

    を足してみたらどうでしょうか?
    デザイン崩れはないと思いますが、ある場合　!important　を削除。
    してください。
    width:auto; でも対応可能なようです。

    aspect-ratio: attr(width) / attr(height);
    については、
    https://lpeg.info/seo/img_width_height.html
    の説明を見てください。
    あと、入れる場所は
    カスタム　追加CSS でいいと思います。

    0 1 件の返信
  • administrators

    @benkbook さん

    こんにちはー！！

    これでは最終的に@jiayoo さんの明示的にという用件は満たせないかもです。。
    ヘッダー画像サイズと画面幅に対する数値も動的に取得できるJSを組み上げる必要があるので、僕がもしやるなら

    $(function(){
    $(window).load(function(){
        const height=$('#main-image img').height();
        const width=$('#main-image img').width();
        $('#main-image img').attr('width', width);
        $('#main-image img').attr('height', height);
    });
});

    この辺ですかね。。

    1