【おしらせ】RSSフィード配信を停止しました

Cocoonで「画像要素で width と height が明示的に指定されていない」とPageSpeed Insightsから怒られたときの対処法

Cocoon
この記事は約2分で読めます。

Cocoonを使っているとPageSpeed Insightsで「画像要素で width と height が明示的に指定されていない」の指摘を受けることがあります。
この原因の一つはボックスメニューなど特定のウィジェットを使っている場合。
対処法を以下に記します。

スポンサーリンク
この記事を読む方へのオススメ

対処法1 CSSで指定する

一つはCSSで指定する方法です。
ここではボックスメニューウィジェットを例にとります。

サイト画面でF12を押します。
ボックスメニューのアイコンを右クリックして検証を押します。
すると、CSSセレクタがわかります。

子テーマのstyle.cssに次の記述をします。

#box_menu-【調べた番号】 .box-menu-icon img{
width:60px;
height:60px;
}

IDセレクタ(#box_menu-【調べた番号】)がないとサイト全てのボックスメニューアイコンに適用されてしまいます。
御注意ください。

スポンサーリンク

対処法2 カスタムHTMLウィジェットを使って直接指定する

環境によっては前項の方法で解決できない場合もあります。
その場合は追加でカスタムHTMLウィジェットを使って直接指定します。
同様にボックスメニューを例として説明します。

「外観」→「ウィジェット」を開き「カスタムHTML」ウィジェットを設置します。
ボックスメニューウィジェットの方は後で削除しますから、その上下どちらかに設置するのがいいでしょう。

サイト画面をChromeで開き、ボックスメニュー上で右クリックして「検証」をクリックします。

当該要素の上で右クリックします。
この場合でしたら、下の記述です。

div class="box-menus no-icon"

「copy」→「copy outer HTML」をクリックします。

先程の「カスタムHTML」にコピペします。

imgタグ全てに次の記述を加えます。

width="(画像サイズ)" height="(画像サイズ)"

カスタムHTMLにwidthとheightを記述

注意点として、Retina対応にしている場合は倍の数字を入れてください。
60×60なら120×120となります。
(もちろん画像ファイル本体の解像度も倍である必要あり)

スポンサーリンク

まとめ

無事に解決できたでしょうか?

author

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Cocoon
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました