ホーム » CocoonでWordPress 6.9メディアとテキストが崩れを修正するCSS

CocoonでWordPress 6.9メディアとテキストが崩れを修正するCSS

WordPressを6.9にアップデートした途端、Cocoonで作ったWebサイトの「メディアとテキスト」ブロックがカラム落ちしてレイアウトが崩れた時。キャッシュを消しても直らない、テーマ側の設定も効かない時に、本体の仕様変更を強制的に上書きして正常に戻したCSSを備忘録として残しておきます。

なぜレイアウトが崩れたのか

原因は、WordPress 6.9から導入された本体側CSSの優先順位の変化にあります。テーマ（Cocoon）側で制御していたスタイルが、本体側の強力なスタイルに負けてしまい、配置の計算がズレてしまうのが主な理由でした。

＊諸注意

レイアウトの崩れは、制作時の表示幅、プラグインの相性や古いキャッシュなど、色々な原因が考えられるため、あくまで今回は強制的に修正したというお話です。まずはCSSを追加する前に、テーマを最新対応しているバージョンまでアップするほうが問題は少ないと思われます。

今回修正したコード

子テーマの style.css に追記しました。



/* -- 画像ブロックを強制的に中央寄せにする -- */
.wp-block-image {
  text-align: center !important;
}
.wp-block-image img {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* -- メディアとテキスト：デスクトップ表示の強制設定 -- */
.wp-block-media-text {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.wp-block-media-text__media,
.wp-block-media-text__content {
    flex: 0 0 50% !important; /* 幅を50%ずつに固定 */
    max-width: 50% !important;
}

/* -- メディアとテキスト：モバイル表示（767px以下）の強制修正 -- */
@media screen and (max-width: 767px) {
    .wp-block-media-text {
        flex-wrap: wrap !important;
    }
    .wp-block-media-text__media,
    .wp-block-media-text__content {
        flex: 0 0 100% !important; /* スマホは100%幅 縦並び */
        max-width: 100% !important;
        order: unset !important; /* 並び順のリセット */
    }
    /* 画像を上、テキストを下に固定 */
    .wp-block-media-text__media { order: 1 !important; }
    .wp-block-media-text__content { order: 2 !important; }
}