Jetpackニュースレターの購読ポップアップをSnow MonkeyのUIに揃える方法（CSS）

投稿日 2026年1月12日
著者 TarCoon☆CarToon
カテゴリー IT・WEB3
カテゴリー WordPress
カテゴリー投稿一覧

Jetpack（Newsletter）の設定「Show subscription pop-up when scrolling a post」で表示される購読ポップアップは、テーマ（Snow Monkey）とUIがズレやすいです。
この記事では、入力欄・ボタン（形と色）をSnow Monkey寄せにし、最後にポップアップ内のh2見出し装飾だけSnow Monkeyの装飾をOFFにする手順をまとめます。

注記（免責）この記事はあまり参考にしないで！

本記事は、筆者が行った設定・調整作業を振り返るための備忘録として記録しています。環境（テーマ・プラグイン・バージョン・設定・他プラグイン等）によって挙動が異なる場合があり、内容の正確性・再現性・動作を保証するものではありません。実施は自己責任でお願いします。万一トラブルが発生しても、筆者は責任を負いかねますのでご了承ください。

やること（ゴール）

ポップアップ内の 入力欄 を Snow Monkey のフォームっぽくする
購読ボタンの形 を Snow Monkey のボタン形に揃える
購読ボタンの色 を Snow Monkey のアクセントカラーに揃える
見出し（h2）だけ Snow Monkeyの装飾をオフにする（ポップアップ内限定）

作業場所

WordPress管理画面で以下へ移動します。

外観 → カスタマイズ → 追加CSS

※ CSSは 追加CSSの一番下 に貼っていくのが安定です（後に書いたものが勝つため）。

コピペ用：完成版CSS（これ1つでOK）

/* =========================================================
   Jetpack Newsletter "Show subscription pop-up when scrolling a post"
   を Snow Monkey のUIに寄せる（入力欄 / ボタン形・色 / 見出し装飾OFF）
   ========================================================= */

/* Snow Monkey側の変数を使う（fallbackあり） */
:root{
  --jp-sm-radius: var(--_global--border-radius, 6px);
  --jp-sm-text:   var(--_color-text, #111);
  --jp-sm-border: var(--_lighter-color-gray, #e6e6e6);
  --jp-sm-bg:     #fff;

  /* Snow Monkeyのアクセント色 */
  --jp-sm-accent: var(--accent-color, #cd162c);
}

/* ---------------------------------------------------------
   1) 入力欄（email）を Snow Monkey 寄せ
   Jetpack側がGutenbergコンポーネント(.components-*)を使うことがあるため併記
   --------------------------------------------------------- */
body .jetpack-subscription-modal input,
body .jetpack-subscription-modal .components-text-control__input,
body .jetpack-subscribe-modal input,
body .jetpack-subscribe-modal .components-text-control__input{
  font: inherit !important;
  color: var(--jp-sm-text) !important;
  background: var(--jp-sm-bg) !important;

  border: 1px solid var(--jp-sm-border) !important;
  border-radius: var(--jp-sm-radius) !important;

  padding: .75em 1em !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body .jetpack-subscription-modal input:focus,
body .jetpack-subscription-modal .components-text-control__input:focus,
body .jetpack-subscribe-modal input:focus,
body .jetpack-subscribe-modal .components-text-control__input:focus{
  border-color: var(--jp-sm-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important; /* 色指定したくなければこの行は削除OK */
}

/* ---------------------------------------------------------
   2) ボタン形が崩れる問題への対処
   「モーダル内のbutton全部」を上書きすると閉じる×なども巻き込むので、
   いったんリセット → submitだけを装飾する
   --------------------------------------------------------- */
body .jetpack-subscription-modal button,
body .jetpack-subscribe-modal button{
  background: revert !important;
  border: revert !important;
  color: revert !important;
  padding: revert !important;
  border-radius: revert !important;
  box-shadow: revert !important;
}

/* ---------------------------------------------------------
   3) 送信（購読）ボタンだけ Snow Monkey寄せ（形 + 色）
   --------------------------------------------------------- */
body .jetpack-subscription-modal button[type="submit"],
body .jetpack-subscribe-modal button[type="submit"],
body .jetpack-subscription-modal input[type="submit"],
body .jetpack-subscribe-modal input[type="submit"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: var(--jp-sm-radius) !important;
  padding: .85em 1.2em !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;

  background: var(--jp-sm-accent) !important;
  border: 1px solid var(--jp-sm-accent) !important;
  color: #fff !important;

  background-image: none !important; /* Jetpack側の装飾が残る保険 */
}

/* hover（必要なら） */
body .jetpack-subscription-modal button[type="submit"]:hover,
body .jetpack-subscribe-modal button[type="submit"]:hover,
body .jetpack-subscription-modal input[type="submit"]:hover,
body .jetpack-subscribe-modal input[type="submit"]:hover{
  filter: brightness(.95) !important;
}

/* ---------------------------------------------------------
   4) ポップアップ内の見出し(h2)だけ Snow Monkeyの装飾をOFF
   疑似要素(::before / ::after)に線や装飾が乗るケースもあるため両方消す
   --------------------------------------------------------- */
body .jetpack-subscription-modal h2,
body .jetpack-subscribe-modal h2{
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
}

body .jetpack-subscription-modal h2::before,
body .jetpack-subscription-modal h2::after,
body .jetpack-subscribe-modal h2::before,
body .jetpack-subscribe-modal h2::after{
  content: none !important;
  display: none !important;
}

うまくいかない時のチェック

入力欄だけ効かない → inputが .components-text-control__input になっている可能性（上のCSSは対応済み）
ボタンが変な形になる → button 全体を触ってしまい「閉じる×」まで巻き込んでいるケースが多いので、上の「リセット→submitだけ装飾」の形にする
色だけ変わらない → Snow Monkeyのアクセント変数は --accent-color。別の変数を参照しているとズレます（上のCSSは対応済み）
見出し装飾が消えない → h2ではなく外側ラッパー（例：.wp-block-heading）に装飾が付いている場合がある。その場合は該当要素に同様の「背景/ボーダー/疑似要素OFF」を追加する

仕上げ（おすすめ）

動作が固まったら、将来的には「追加CSS」から **My Snow Monkey（カスタムプラグイン）**へ移して管理すると、テーマ変更や調整時にも追いやすいです。

スクショ差し込み用：確認チェックリスト（Inspectで見る場所）

ポップアップのCSS調整は「どの要素に、どのCSSが勝っているか」を一度押さえると、以後ほぼ迷子になりません。スクショを撮るなら、次の3枚が鉄板です。

1) 入力欄（email）を選択して「Elements」と「Styles」

ブラウザで記事ページを開く
ポップアップを出す（スクロール）
開発者ツール（Inspect）で メール入力欄をクリックして選択
右ペインで
- Elements（HTML構造）
- Styles（当たっているCSSの一覧）
  をスクショ

見るポイント

input が input[type="email"] なのか、class="components-text-control__input" なのか
background / border / border-radius / padding の項目で、どのCSSが最終的に勝っているか（取り消し線が付いているか）

2) 購読ボタン（submit）を選択して「Computed」

ポップアップ内の 購読ボタンを選択
Computed タブ（計算後スタイル）を開いてスクショ

見るポイント

border-radius が意図した値になっているか
background-color が Snow Monkey のアクセント色（--accent-color）になっているか
background-image が残っていないか（残ると“色が違って見える”原因になります）

3) 見出し（h2）を選択して「疑似要素（::before / ::after）」

ポップアップの **見出し（h2）**を選択
Styles内で ::before / ::after のセクションが出ていればそこをスクショ

見るポイント

装飾が h2 本体ではなく 疑似要素で付いているかどうか
（今回の「装飾だけOFF」はここが原因になりがち）

追加CSSから My Snow Monkeyへ移す（運用・保守が楽になる版）

追加CSSで動作が固まったら、Snow Monkey更新や調整の時に追いやすいように **My Snow Monkey（カスタムプラグイン）**へ移すのがおすすめです。
ここでは「CSSファイルを作ってenqueueする」王道手順を紹介します。

手順A：CSSファイルを作る（おすすめ）

1) CSSファイルを作成

My Snow Monkey プラグイン配下に、以下のように置きます。

wp-content/plugins/my-snow-monkey/assets/css/jetpack-newsletter-modal.css

このファイルの中身に、前項の 完成版CSS をそのまま貼り付けます。

2) My Snow Monkey のPHPに enqueue を追加

My Snow Monkey（my-snow-monkey.php など、今まで追記しているファイル）に以下を追記します。

add_action('wp_enqueue_scripts', function () {
  // CSSファイルのパス（プラグイン内）
  $rel_path = 'assets/css/jetpack-newsletter-modal.css';
  $file     = plugin_dir_path(__FILE__) . $rel_path;
  $url      = plugin_dir_url(__FILE__)  . $rel_path;

  // ファイルが存在する時だけ読み込む
  if (file_exists($file)) {
    wp_enqueue_style(
      'tarc-jetpack-newsletter-modal',
      $url,
      array(),
      filemtime($file) // 更新が反映されやすいようにmtimeをバージョンにする
    );
  }
}, 999);

ポイント

999 にしておくと、だいたいのCSS読み込みより後ろに来やすく、上書きが安定します。
filemtime() を使うと、CSSを更新した時にキャッシュが効きすぎて反映されない事故が減ります。

手順B：CSSを「インライン」で最後に差し込む（手早い／小規模向け）

ファイルを作るのが面倒なら、PHP内にCSSを文字列として持たせて最後に差し込む方法もあります。

add_action('wp_enqueue_scripts', function () {
  $css = '/* ここに完成版CSSを貼る */';

  wp_register_style('tarc-jetpack-newsletter-inline', false);
  wp_enqueue_style('tarc-jetpack-newsletter-inline');
  wp_add_inline_style('tarc-jetpack-newsletter-inline', $css);
}, 999);

注意

長大なCSSになるほど可読性が下がるので、運用するなら「手順A（CSSファイル化）」が基本おすすめです。

反映されない時の最終チェック（運用編）

キャッシュ系（WP Fastest Cache / Jetpack Boost / ブラウザ）を一度クリア
追加CSSとMy Snow Monkeyの両方に同じコードが残っている場合、意図しない競合が起きるので 片方に寄せる
どうしても勝てない指定がある時は、最後の手段として セレクタを少しだけ強くする
例：body .jetpack-subscription-modal ... のように body を付ける

この記事が気に入ったら、サポートをしてみませんか？
PayPalで気軽に支援できます。

￥960／毎月（サブスク）

￥1,100／単発（１回のみ）

TarCoon☆CarToonに寄付してサポートする。
*キャンセルするまで毎月お支払い頂くサブスクの場合、
サポート料金¥960と、登録時初回限りの設定料 ¥960の、合計¥1,920が掛かります。

TarCoon☆CarToonの活動を支援できるサービスです。
ブログやイベント、オンライン上での活動を応援したい方はサポートしていただければ幸いです。