はじめに
CodePenを貼り付けた後にCLS(Cumulative Layout Shift)が悪化しませんでしたか?(Prefill Embededを貼り付ける場合です)
次のようにして改善しました。
HTMLの修正
HTMLのheight属性とCodePenのソースコードにあるdata-heightの値は合わせます。
貼り付けたCodePenのソースコードを挟み込むように下記のコードを追加します。
CSSの追加
追加するCSSは下記の通り。
追加する場所は<head>内です。
(1)追加CSS、又は(2)テーマファイルエディタにてStyle.cssに追加、又は(3)Simple Custom CSS and JS(プラグイン)に追加します。お勧めは(3)です。
JavaScriptの追加
追加するJavaScriptは下記の通り。
追加する場所は<head>内です。