「codoc（コードク）」導入時のレイアウト調整メモ

当サイトは広告を含んでいます。

2025-06-23

こんにちは！
今回は、WordPressで有料記事を実現できるプラグイン「codoc（コードク）」を導入した際に起きたレイアウト崩れの解決方法についてシェアします。

有料記事の行間が詰まって見える問題が発生

実際に有料記事を書いてみると、購入者から見ると行間が詰まってしまい読みづらいと感じる部分がありました。
これは、WordPressテーマ「SWELL」のデフォルトCSSとcodocのブロック構造が原因でした。

SWELLでは以下のように、記事本文直下のすべての要素に対してマージンやクリアを設定しています。

.post_content>* {
    clear: both;
    margin-bottom: var(--swl-block-margin, 2em);
}

しかし、codocの有料記事部分はこの .post_content の直下ではなく、**別のコンテナ（.codoc-entry-body-after）の中に入っているため、このCSSが効かなくなっていました。

そこで、codoc内の子要素に対して同じスタイルを適用するため、以下のCSSを追加しました。

.codoc-entry-body-after>* {
	clear: both; 
	margin-bottom:var(--swl-block-margin, 2em);
}

これで、codocブロック内の要素にも余白とクリアが適用され、読みやすくなります。

また、codocのブロックに左右のpaddingが勝手に入ってしまい、記事の幅が狭くなることがあったので、以下のようにpaddingをリセットしました。

.wp-block-codoc-codoc-block .codoc-entry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

codocプラグインの導入でHTML構造が変わり、テーマの汎用CSSが効かなくなるケースがあります。
こうしたときは、対象の要素構造に合わせて追加のCSSを用意することがポイントです。

有料記事の見た目を整えたいときの参考になれば幸いです！

～本日も最後までお読みいただき、ありがとうございました！～

この記事が気に入ったら
フォローしてね！

Follow @Luv_pottsu Follow Me

よかったらシェアしてね！