WordPressから Cloudflare Pages へサイトを移行すると、LPは全面リデザインできても記事ページは旧デザインのまま残りがちだ。酪酸菌青汁サイト（aojiru.kyotanishokai.co.jp）では、14本の記事ページに WordPress 由来のインラインCSSが残り、LPのグリーンテーマと記事ページの Bootstrap 青テーマが共存する「デザインの二重構造」が発生していた。

この記事では、その二重構造を解消するために実施した3ステップ ── style.css へのグリーンテーマ追加 / 14記事HTMLからのインラインCSS一括削除 / components.js によるCTA自動注入 ── の全手順を、実際のコード付きで解説する。

WordPress記事ページがLPと別世界になっていた背景

LPは全面リデザイン済み、記事は旧デザインのまま

酪酸菌青汁サイトのLPは、CSS変数ベースのグリーンテーマ（ブランドカラー #388e3c）で全面リデザイン済みだった。ヒーローセクション、成分解説、価格表、CTAボタンまで統一されたデザインシステムが適用されている。

一方で /effect/ 配下の14記事ページは、WordPress時代のHTMLをそのまま移行した状態だった。見出しの色は Bootstrap のデフォルト青 #337ab7、CTAは WordPress のブロックエディタで作成された旧形式のまま。LPから記事に遷移すると、まるで別サイトに飛んだような印象になっていた。

インラインCSSがCSS変数の適用を阻んでいた

問題を複雑にしていたのが、各記事HTMLに埋め込まれたインライン <style> タグだ。WordPress のエクスポート時に各ページに挿入された16行のスタイル定義が、style.css の CSS 変数よりも高い詳細度で適用されていた。

つまり、style.css にグリーンテーマのルールを追加しても、インラインCSSの #337ab7 が優先されて色が変わらないという状態だった。この問題を根本解決するには、style.css のルール追加とインラインCSS の削除を同時に行う必要があった。

ステップ1 ── style.cssにグリーンテーマの記事スタイルを追加する

見出しの色をBootstrap青からブランドグリーンへ変更する

style.css の末尾に、.article-content 配下の要素に対するスタイルを追加した。ポイントは、LPで定義済みの CSS 変数 var(--green-700) をそのまま記事にも適用することだ。

.article-content { max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.article-content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green-700);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--green-700);
}
.article-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #333;
  margin: 2rem 0 0.8rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--green-700);
}
.article-content p { margin-bottom: 1.2rem; font-size: 0.95rem; }

h2 にはブランドグリーンの下線を、h3 には左ボーダーを付けた。これだけで記事の見出しがLPのトーンと一致する。.article-back のリンクボタンも同様にグリーンに統一した。

.article-back a {
  display: inline-block;
  padding: 0.6rem 2rem;
  border: 1px solid var(--green-700);
  color: var(--green-700);
  border-radius: 50px;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.article-back a:hover {
  background: var(--green-700);
  color: #fff;
  text-decoration: none;
}

CTAセクションのスタイルを定義する

記事末尾に自動挿入するCTAバナーのスタイルも style.css に追加した。LPのフッターCTAと同じグラデーション背景を使い、統一感を出している。

.article-cta {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--dark) 100%);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  margin: 3rem 0 1.5rem;
  color: #fff;
}
.article-cta h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  border-left: none;
  padding-left: 0;
}
.article-cta .btn-amazon { background: var(--amazon); color: #fff !important; }
.article-cta .btn-trial {
  background: rgba(255,255,255,0.15);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.6);
}

Amazonボタンのオレンジ（var(--amazon): #ff9900）と、半透明白のお試しボタンの2色構成にした。CTA内の h3 は左ボーダーを無効化（border-left: none）し、白文字に変更している。

モバイル対応のメディアクエリを追加する

768px 以下では、CTAボタンを横並びから縦並びに切り替える。記事本文のパディングも狭くした。

@media (max-width: 768px) {
  .article-content { padding: 1.5rem 1rem 3rem; }
  .article-cta { padding: 2rem 1.2rem; margin: 2rem 0 1rem; }
  .article-cta .cta-buttons { flex-direction: column; align-items: center; }
}

ステップ2 ── 14記事HTMLからインラインCSSを一括削除する

sedコマンドで16行のstyleタグを一括除去する

14記事すべてに共通のインライン <style> ブロックが含まれていた。手作業で1ファイルずつ開いて削除するのは非効率なので、sed コマンドで一括処理した。

for f in dist/effect/*/index.html; do
  sed -i '/<style>/,/<\/style>/d' "$f"
  echo "Cleaned: $f"
done

このワンライナーで、各 index.html 内の <style> 開始タグから </style> 終了タグまでの全行を削除している。対象は以下の14ディレクトリだ。

  • aojiru-4-reasons/
  • aojirushinjidai/
  • attention-sign/
  • cheap-green-juice/
  • constipation-blood-pressure/
  • diabetes-green-juice/
  • double-health/
  • natsubate-chokatsu/
  • nordic-walk-health/
  • rakusankinaojiru_osusume/
  • supplements-kidney-burden-green-juice/
  • vaccination-aojiru/
  • wight-down-wiht-aojiru/
  • yasaiburoku/

削除前後の差分を確認する

削除されたインラインCSSの中身は、Bootstrap ベースの色定義だった。

/* 削除されたインラインCSS（例） */
.article-content h2 { color: #337ab7; border-bottom: 2px solid #337ab7; }
.article-content h3 { border-left: 3px solid #337ab7; }
.article-back a { border: 1px solid #337ab7; color: #337ab7; }

これらが消えることで、style.css の var(--green-700) ルールが正しく適用されるようになる。インラインCSS が style.css より詳細度が高い（同一セレクタでも後方のスタイルシートより <style> タグが優先される）ため、削除しない限りCSS変数は適用されなかった。

ステップ3 ── components.jsにCTA自動注入ロジックを追加する

記事ページを検出してCTAバナーを挿入する

components.js は、ヘッダーとフッターを全ページに動的挿入するJavaScriptファイルだ。ここに記事ページ専用のCTA注入ロジックを追加した。

var articleContent = document.querySelector('.article-content');
if (articleContent) {
  var articleBack = articleContent.querySelector('.article-back');
  if (articleBack) {
    articleBack.insertAdjacentHTML('beforebegin',
      '<div class="article-cta">' +
      '<h3>酪酸菌青汁を試してみませんか？</h3>' +
      '<p>大麦若葉 &times; モリンガ &times; 酪酸菌。腸から届ける毎日の健康。</p>' +
      '<div class="cta-buttons">' +
      '<a href="https://www.amazon.co.jp/dp/B0C4TG6ZD8" target="_blank" rel="noopener" class="btn-amazon">Amazonで購入する</a>' +
      '<a href="https://www.amazon.co.jp/dp/B0C4TG6ZD8" target="_blank" rel="noopener" class="btn-trial">お試し10包 ¥1,000</a>' +
      '</div></div>'
    );
  }
}

.article-content が存在するページ（＝記事ページ）でのみ発火し、「記事一覧に戻る」リンク（.article-back）の直前にCTAバナーを挿入する。insertAdjacentHTML('beforebegin', ...) を使うことで、既存のDOM構造を壊さずに要素を追加できる。

旧WordPress CTAブロックを非表示にする

WordPress のブロックエディタで作成された旧CTAも残っていたため、これをJavaScriptで非表示化した。

/* Hide old WordPress CTA blocks */
articleContent.querySelectorAll('[style*="flex-basis"]').forEach(function (el) {
  if (el.parentNode && el.parentNode.children.length <= 3)
    el.parentNode.style.display = 'none';
});
articleContent.querySelectorAll('.wp-block-vk-blocks-button').forEach(function (el) {
  var p = el.closest('div:not(.article-content)');
  if (p) p.style.display = 'none';
});

WordPress の VK Blocks プラグインで作成されたCTA（.wp-block-vk-blocks-button）と、flex-basis: 66.66% を持つレイアウトブロックを検出し、親要素ごと display: none にしている。HTMLから直接削除するのではなくJSで非表示にしたのは、将来的にHTMLを再利用する可能性を残すためだ。

デプロイと本番確認

Wrangler CLIでCloudflare Pagesに反映する

変更を3ファイル（style.css / components.js / 14記事HTML）に適用した後、Wrangler CLI でデプロイした。

cd subdomains/aojiru
npx wrangler pages deploy dist/ --project-name=kyotanishokai-aojiru --branch=main

Cloudflare Pages は静的ファイルのデプロイに対応しているため、ビルドプロセスは不要だ。dist/ ディレクトリの中身がそのまま本番環境に反映される。

14ページ全てのスタイル適用を検証する

デプロイ後、14記事すべてにアクセスして以下を確認した。

  1. h2/h3 の色: Bootstrap 青（#337ab7）からブランドグリーン（#388e3c）に変わっていること
  2. CTAバナー: 記事末尾にグリーングラデーション背景のCTAが表示されていること
  3. 旧CTA: WordPress 由来のCTAブロックが非表示になっていること
  4. モバイル表示: 768px 以下でCTAボタンが縦並びになること

14ページ全てで正常にスタイルが適用されていることを確認した。

今回の作業で得られた知見

インラインCSSは必ず削除してからCSS変数を適用する。詳細度の問題で、インラインCSS が残っている限り外部スタイルシートのルールは適用されない。!important で上書きする方法もあるが、保守性が著しく低下するため推奨しない。

sed による一括処理はコスト対効果が高い。14ファイルの手動編集は30分以上かかるが、sed のワンライナーなら数秒で完了する。ただし、実行前にバックアップを取るか、Git でコミットしてから実行すること。

CTA注入はJSで動的に行う方が保守性が高い。14記事すべてのHTMLにCTAを静的に埋め込む方法もあるが、ボタンのリンク先や文言を変更するたびに14ファイルを修正する必要がある。components.js に集約すれば、変更は1ファイルで済む。

静的サイトジェネレーターを使わずとも、CSS変数＋共通JSの組み合わせで十分なデザインシステムは構築できる。ReactやNext.jsのようなフレームワークを導入しなくても、CSS変数でブランドカラーを一元管理し、components.js でヘッダー/フッター/CTAを動的注入すれば、サイト全体の統一感は保てる。

まとめ

WordPress からの移行後に残る「デザインの二重構造」は、多くのサイトで発生する問題だ。今回の3ステップ ── style.css へのテーマ追加 / インラインCSS の一括削除 / components.js によるCTA自動注入 ── は、フレームワークに依存しない軽量な解決策として、同様の課題を抱えるサイトにも応用できる。

重要なのは、見た目の統一だけでなく、保守性の設計だ。CSS変数で色を一元管理し、CTAをJSで動的注入する構造にしておけば、将来のブランドカラー変更やCTAの文言修正にも1ファイルの変更で対応できる。