CocoonやSWELLでカスタムCSSが反映されない？バグるのはなぜ

WordPressのCocoonテーマやSWELLテーマでは、投稿記事や固定ページで、カスタムCSSが用意されています。カスタムCSSでは、該当する投稿記事や固定ページ内にのみ反映されるCSSコードですが、「下書き保存」や「公開する」のボタンを押すと、表示もされず、反映もされず、画面がフリーズしてバグることがあります。

今回は、その原因と解決策をご紹介します。

CocoonやSWELLでカスタムCSSが反映されない原因

CocoonやSWELLでカスタムCSSが反映されない原因は、コメントが入っていることが原因です。例えば、下記のようなコードでは、カスタムCSSが反映されず、画面がフリーズしてバグることがあります。

下記は、カスタムCSSが反映されないコードのサンプルです。

<style>
/* テーブル全体のスタイル */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

/* テーブルヘッダーのスタイル */
table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

/* テーブルヘッダーとセルのスタイル */
table th,
table td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
}

/* 偶数行の背景色 */
table tbody tr:nth-child(even) {
    background-color: #f3f3f3;
}

/* マウスホバー時の行の背景色 */
table tbody tr:hover {
    background-color: #f1f1f1;
}
</style>

次に、どのようなコードであれば、カスタムCSSが正常に動作するのかご紹介します。

CocoonやSWELLでカスタムCSSを正しく反映させる方法

CocoonやSWELLでカスタムCSSを正しく反映させる方法は、コメントを消すことです。

通常、CSSでコメントを入力する際には、下記のコードを使います。

/* ここにコメントを書く */

しかし、CocoonやSWELLの記事内のカスタムCSSにコメントを記述すると、不具合が起こることが報告されています。

下記は、先ほど「カスタムCSSが反映されないコードのサンプル」を修正し、正しく反映させるためのコードです。

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
}

table th,
table td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
}

table tbody tr:nth-child(even) {
    background-color: #f3f3f3;
}

table tbody tr:hover {
    background-color: #f1f1f1;
}

上記のコードを使用すると、正しく「下書き保存」や「公開」ができるはずです。SWELLやCocoonの古いバージョンを使っている方は、ぜひチェックしてみてください。特に、ChatGPTなどで出力されたコードには、コメントアウトされた説明文が記載されているはずなので、非表示にしましょう！

同様に、カスタムJavascriptなども、コメントをコード内に入力していることで、エラーが起きる可能性はあるので、ぜひ確認してみてください。

以上が、「CocoonやSWELLでカスタムCSSが反映されない？バグるのはなぜ」の解説記事でした！

Cocoonを作成した開発者のわいひらさんのTwitter（X）は下記です。質問フォーラムなどで、不具合があれば、回答をもらえるので、どうしてもわからない場合には、聞いてみましょう。

Cocoon 2.7.5.1のダッシュボード更新を有効にしておきました。

v2.7.5以降、WordPress 6.6のブロックエディター上の不具合に対して2つほど修正を加えました。
・ブロックエディター下部の余白をクリックしても「+」ボタンが表示されない不具合修正
・ブロックエディタータイトル上の余白調整 https://t.co/PnZ2SXFMnC

— わいひら@寝ログ (@MrYhira) July 9, 2024

SWELLの開発者様もTwitter（X）のアカウントがあります。下記はSWELL開発者の了さんです。

Tweets by ddryo_loos