Cocoon最新アップデートで搭載されたスキン「イノセンス」。
「大人かわいい」がキャッチフレーズだそうですけど。
著者は、おっさんくさく見えるって言ってるよ
バカにしてるわけじゃありません。
それどころか、私がテーマをCocoonに変える決心をした大きな理由です。
その証拠に、この記事を書いている時点でのスキンはイノセンスをカスタマイズしたものです。
私の中の人はおっさん、なので落ち着いていてしっくりきます
ただ、困った問題が生じました。
【2026年6月12日追記】
改めてテストしてみたところ、追記時点では本稿の対策を行わなくともPageSpeed InsightsでCLSは指摘されませんでした。
以前は指摘されていたため、計測タイミングや条件による変動もあるのかもしれません。
本稿は当時の調査記録として残しています。
PageSpeed InsightsでCLSを指摘される
PageSpeed Insightsをやってみたところ。
Cumulative Layout Shift（CLS）が発生してしまっています。
ラボデータの方が0.032。
フィールドデータもこの日を境にどんどん悪化し、ついに全ページが「改善が必要」へ突入。
SearchConsoleにおけるユーザーエクスペリエンス合格ページがゼロとなってしまいました。
対策しないと！
Cumulative Layout Shift（CLS）とは？
わかりやすく言うと「レイアウトのずれ」です
サイトを閲覧したときにガクガク！って感じで画像や広告割り込んできてイラついたことありませんか？
最近はだいぶ見なくなりましたけど、あれが発生しないほど良い評価をもらえるということです。
CLSの原因を探る
ヘッダーモバイルボタン
CLSが発生していると指摘された要素は２つありました。
１つはヘッダーモバイルボタンのアイコン（FontAwesome）。
0.01とかでしたから無視してもいいんですけど、気持ち悪いのでゼロを目指します。
細かい対策をとるより、いっそなくしてしまった方が早い。
アイコンを減らしてフッターにまとめ、ヘッダーは解除します。
これでCLSはなくなりました。
アイキャッチ画像……？
問題はもう１つの方。
記事冒頭のアイキャッチ画像が指摘されました。
記事の該当箇所。
この走っている番長の画像がCLSの原因として指摘されていました。
PCの画面ですが、PCもモバイルもCLSが生じています。
もちろんこの記事だけでなく全記事においてです。
だけどこれ！ わけわかんない！
原因の切り分け
過去にもCLSの対策をとったことがありますが。
考えられる原因は、
- LazyLoad絡み
- widthとheightの指定がない
しかし、
- WordPress自体にCLSを生じさせないネイティブLazyLoadが実装されている。
- 投稿添付の画像はWordPressがwidthとheightを自動挿入する。
WordPress本体ではCLSが発生しづらくなっています。
とりあえずアイキャッチのLazyLoadについては、Cocoonの機能は切っています。
原因からは外してよさそうです。
一方でwidthとheightは設定されています。
やっぱりわけわかんない！
こういうときは親テーマにしてみましょう
原因がカスタマイズなのかテーマの仕様なのか切り分けできます
親テーマにして、スキンも親テーマのものにしてみます。
さらにWEXALを切ってキャッシュを全てクリア。
プラグインで表示関連は元々使っていない。
これでノーカスタマイズに近いはず。
やっぱり同じだよ……
アイキャッチのwidth、max-width、height、max-heightを変えてみたり。
marginなくしてみたり、paddingに変えてみたり。
ラップ要素の調整してみたり。
ダメ元で思いつくことを片っ端からやってみました。
しかしダメ元だけに、やっぱりダメ。
何が原因なのか……
CLS……
レイアウトが動く――はっ！
もしかして！
ついにつきとめました。
こちらはCLS修正後の画像。
さっきと同じに見えますが、どこかが違います。
間違い探ししてみてください。
特定したCLSの原因
間違い探し、わかったでしょうか？
CLS修正前は「投稿日・更新日」がアイキャッチの前。
修正後はdatetagがアイキャッチの後に来ています。
テーマデフォルトだと日付がアイキャッチの後に来ます
前に来ているのはイノセンススキン側の仕様です
スキンのJavaScript.jsを見てみましょう。
$(function () { $('.date-tags').insertAfter('.entry-title'); });
記事タイトル（.entry-title）の後にを日付を挿入する（.date-tags）というjQueryです。
JavaScript実行後に投稿日・更新日がタイトル直下へ移動するためページ表示後にアイキャッチの位置が変化し、CLSが発生したというわけです。
CLSの具体的な修正方法
私は日付が前であることにこだわらないので、スキンのスクリプトを停止する方法を選びました。
子テーマのfunctions.phpに次の記述をします。
function cocoon_scripts() {
wp_dequeue_script( 'cocoon-skin-js' );
}
add_action( 'wp_enqueue_scripts', 'cocoon_scripts' );
これでCLSはゼロになりました。
フィールドデータの方もその内戻るでしょう。
左寄せになっているのをデフォルトの右寄せに戻したい場合
子テーマのstyle.cssに次の記述をします。
.date-tags {
text-align: right;
}
ただスキンを子テーマに移して、Cocoon設定でスキン設定を子テーマに指定し直し。
その上でスキンのstyle.cssから記述を削除する方が無駄はないです。
まとめ
PSIの指摘がアイキャッチ画像だったため、なかなか気づけませんでした。
ちょっとした盲点です。
なお、イノセンススキンは3年にわたり使わせていただきました。
おはようポテトさん、ありがとうございました！
VPSは、もう「黒い画面」だけじゃない。
「VPSは難しそう」と諦めていませんか？ ConoHaのKUSANAGIなら、ブラウザ上の管理画面（KUSANAGI Manager）で、ドメイン設定からSSL発行まで直感的に操作可能です。
コマンド操作なしで世界最速級の環境を構築できる、今の時代の初心者にとっての最適解。私が長年愛用している理由がここにあります。
※当サイト経由で新規申し込みいただくと、特典として1000円分のクーポンをもらえます。