css JavaSctipt WordPress

【WordPress】CodePenを貼り付けた時のCLS対策

2023年4月20日

はじめに

CodePenを貼り付けた後にCLS（Cumulative Layout Shift）が悪化しませんでしたか？（Prefill Embededを貼り付ける場合です）

次のようにして改善しました。

HTMLの修正

HTMLのheight属性とCodePenのソースコードにあるdata-heightの値は合わせます。
貼り付けたCodePenのソースコードを挟み込むように下記のコードを追加します。

<div class="codepen-container" style="width: 100%; max-width: 960px; height: 500px; margin: 0 auto;">
//ここにCodePenからコピーしたコードを貼り付け
</div>

CSSの追加

追加するCSSは下記の通り。
追加する場所は<head>内です。
(1)追加CSS、又は(2)テーマファイルエディタにてStyle.cssに追加、又は(3)Simple Custom CSS and JS（プラグイン）に追加します。お勧めは(3)です。

// CLS対策
.codepen-container iframe {
  width: 100%;
  border: 0;
  display: block;
}

JavaScriptの追加

追加するJavaScriptは下記の通り。
追加する場所は<head>内です。

//CLS対策
document.addEventListener('DOMContentLoaded', function() {
  var codepenContainer = document.querySelector('.codepen-container');
  var codepenIframe = codepenContainer.querySelector('iframe');
  if (codepenIframe) {
    codepenIframe.style.height = codepenContainer.clientHeight + 'px';
  }
});

-css, JavaSctipt, WordPress
-, , , ,