【保存版】SWELLでLPを量産する人のための

ブログ
2025.11.13

SWELLでLP（ランディングページ）を作り込んでいると、こんなモヤモヤにぶつかりませんか？

  • フルワイドで背景色を指定したのに、中身のブロックが白く塗りつぶされてしまう
  • いい感じのイラストを入れたのに、スマホで左右に謎の余白（パディング）がつく
  • ページごとにコピペで調整しているうちに、CSSがカオスになってきた
  • 「LP495用」「LP600用」みたいなベタ書きCSSが増殖して、どれが生きているのか分からない

このあたりで一度立ち止まって、

「どのLPにも使い回せる “汎用テンプレCSS“」

に整理しておくと、その後の制作スピードとメンテナンス性が一気に変わります。

この記事では、SWELL子テーマのstyle.cssに貼るだけで、

  • ページIDを差し替えるだけで再利用できる
  • レイアウト幅・背景・ブロック余白・スマホ表示まで一括管理できる
  • SWELLの仕様を踏まえた“ケンカしない”書き方になっている

そんな**「フルワイドLPテンプレCSS」**を、

完成版＋詳しい解説付きでまとめます。

1. そもそも、なぜ「汎用テンプレCSS」が必要なのか？

SWELLはとても優秀なテーマですが、LP制作でガチガチに詰めていくと、

  • エディター側で背景色をつけても、 中身の .wp-block-group や .wp-block-media-text が勝手に白背景になる
  • PC・スマホ・タブレットそれぞれで フルワイド＋パディング＋inner幅が絶妙に組み合わさっている
  • ページ単位でちょこちょこCSSを足し続けると、 気づいたらstyle.cssがスパゲッティ化

…という状態になりがちです。

特に、「LP専用」のデザインを何本も作る場合、

  • 毎回「postid-◯◯◯」でベタ書き
  • どのLPで何をやっているのか分からなくなる
  • ちょっと修正したいだけなのに、 過去のLPが崩れるのが怖くて触れない

といった“技術的負債”が溜まっていきます。

そこで、

「postidだけ差し替えれば再利用できる、構造化されたテンプレート」

をあらかじめ用意しておくと、

  • 新規LPはCSSコピペ＋postid書き換えで即スタート
  • 機能ごとにコメントでまとまっているので、後から見ても迷子にならない
  • 不具合が出ても、どのセクションを見直せばいいか一目瞭然

という、かなりストレスの少ない運用ができます。

2. テンプレCSSのコンセプト

今回まとめた「汎用テンプレCSS」は、こんなコンセプトで整理してあります。

  • ✔ postidだけ変えれば、どのLPでも使える
  • ✔ 機能ごとに番号付きセクション（1〜6）で整理
  • ✔ コメントは「LP495」といった固有名詞を避けた汎用説明
  • ✔ レイアウト幅・背景色・余白調整・スマホ専用処理までひとまとめ
  • ✔ SWELLの標準スタイルと極力ケンカしない書き方

さらに、実運用でよく使う要素も組み込んであります。

  • 中央コンテンツ幅（例：740px）をLP単位で固定
  • 「背景色付きフルワイドセクション」の中身だけ透明にする
  • ブロック単位で「余白ゼロ」指定できる no-pad
  • 画像ブロックを「左右余白ゼロで端まで表示」する img-full-center
  • スマホのときだけ、フルワイド内のpaddingをカットする @media＋:has()

3. まずは完成版：

「使い回し用・フルワイドLPテンプレCSS」

Noteからそのままコピペして、

子テーマの style.css の一番下に貼ることを想定しています。

🔧 使い方ルール

  • PAGE-ID を 実際のページID（例：495）に置き換えて使用
  • 1つのLPごとに、このテンプレを1セット（または postidだけ差し替えた複数行）
  • コメントは必要に応じて削ってOK
@charset "UTF-8";
/* ==============================================
  SWELL LPテンプレートCSS（使い回し用）
  ※ ページID を PAGE-ID に置き換えて使用
================================================ */

/* ----------------------------------------------
  1) 基準幅（PC時の中コンテンツ幅）設定
---------------------------------------------- */
.postid-PAGE-ID .swell-block-fullWide__inner.l-article {
  max-width: 740px; /* ← お好みで 700 / 740 / 800 に調整 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;  /* PC時の左右余白 */
  padding-right: 20px;
}

/* 画像のはみ出し防止（安全対策） */
.postid-PAGE-ID img,
.postid-PAGE-ID .wp-block-image {
  max-width: 100%;
  height: auto;
}

/* Gutenberg変数（保険） */
body.postid-PAGE-ID {
  --swl-lp_content_width: 740px;
}

/* ----------------------------------------------
  2) 背景の扱い（白か透明かを制御）
---------------------------------------------- */

/* 背景未指定フルワイド → 白 */
.postid-PAGE-ID .swell-block-fullWide:not([style*="background"]):not(.has-bg-img) {
  background-color: #fff;
}

/* 背景が画像のときは透明（白を当てない） */
.postid-PAGE-ID [data-bg],
.postid-PAGE-ID .has-bg-img {
  background-color: transparent;
}

/* Gutenbergブロックの背景未指定 → 白 */
.postid-PAGE-ID .wp-block-group:not(.has-background):not([style*="background"]),
.postid-PAGE-ID .wp-block-columns:not(.has-background):not([style*="background"]),
.postid-PAGE-ID .wp-block-media-text:not(.has-background):not([style*="background"]) {
  background-color: #fff;
}

/* fullWide の inner が背景未指定 → 白 */
.postid-PAGE-ID .swell-block-fullWide__inner.l-article:not([style*="background"]) {
  background-color: #fff;
}

/* ----------------------------------------------
  3) 色付きセクション
     （背景色の中身を透明にする）
  フルワイドに「lp-colored-section」を付けて使用
---------------------------------------------- */
.postid-PAGE-ID .lp-colored-section
  .swell-block-fullWide__inner.l-article:not([style*="background"]) {
  background-color: transparent !important;
}

.postid-PAGE-ID .lp-colored-section
  .wp-block-group:not(.has-background):not([style*="background"]),
.postid-PAGE-ID .lp-colored-section
  .wp-block-columns:not(.has-background):not([style*="background"]),
.postid-PAGE-ID .lp-colored-section
  .wp-block-media-text:not(.has-background):not([style*="background"]) {
  background-color: transparent !important;
}

/* ----------------------------------------------
  4) メディア＆テキストの横幅調整（任意）
---------------------------------------------- */
.postid-PAGE-ID .wp-block-media-text {
  max-width: 600px; /* 必要に応じて 640 / 680 / 700 などに変更 */
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------
  5) 特定ブロックを paddingゼロ にしたいとき
     ブロックに「no-pad」を付けて使用
---------------------------------------------- */
.postid-PAGE-ID .no-pad {
  padding: 0 !important;
}

.postid-PAGE-ID .no-pad .wp-block-media-text__content,
.postid-PAGE-ID .no-pad .wp-block-media-text__media {
  padding: 0 !important;
}

.postid-PAGE-ID .no-pad.wp-block-group {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ----------------------------------------------
  6) 特定画像だけ左右ゼロ & 端まで表示
     画像ブロックに「img-full-center」を付けて使用
---------------------------------------------- */

/* 画像ブロック本体 */
.postid-PAGE-ID .img-full-center {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
  max-width: none;
}

/* 画像タグ */
.postid-PAGE-ID .img-full-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
}

/* スマホ時だけ：フルワイド内の左右余白もゼロに */
@media (max-width: 959px) {
  .postid-PAGE-ID
    .swell-block-fullWide:has(.img-full-center)
    .swell-block-fullWide__inner.l-article {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

ここまでが完成版CSSです。

ここから先は、「なぜこういう構造になっているのか」を丁寧に分解していきます。

4. 各セクションの役割を分解して理解する

4-1. ① 基準幅（中コンテンツ幅）の設定

.postid-PAGE-ID .swell-block-fullWide__inner.l-article {
  max-width: 740px;
  ...
}
  • SWELLのフルワイドセクションは、 .swell-block-fullWide の中に .swell-block-fullWide__inner.l-article が入る構造になっています。
  • 画面いっぱいに背景色を広げつつ、中央のコンテンツ幅だけを740pxに抑えるために、この inner にだけ max-width を指定しています。
  • padding-left/right: 20px; はPCの左右余白。 これを 0 にすると“きっちり詰まった感じ”になり、 20〜32px だと“読みやすい余白”になります。

4-2. ② 背景の扱い（白／透明のルール）

ここがSWELL特有のクセをケアする重要パートです。

.postid-PAGE-ID .swell-block-fullWide:not([style*="background"]):not(.has-bg-img) {
  background-color: #fff;
}
  • フルワイドで背景指定がないものは白に決め打ち
  • 背景色をつけたくない場所は、あえて色指定するか、クラスで分岐します
.postid-PAGE-ID [data-bg],
.postid-PAGE-ID .has-bg-img {
  background-color: transparent;
}
  • SWELLの「背景画像ありセクション」は data-bg や .has-bg-img が付きます
  • その上に白を塗ると画像が見えなくなるので透明を強制
.postid-PAGE-ID .wp-block-group:not(.has-background):not([style*="background"]),
...
  • Gutenberg側で「背景未指定」のブロックだけ白にすることで、
    • 通常セクション → 白ベース
    • 特殊なセクション → クラスで上書き
  • という分かりやすい運用になります。

4-3. ③ 色付きセクション用：lp-colored-section

.postid-PAGE-ID .lp-colored-section ...
  • フルワイドブロックに lp-colored-section を付けると、
    • 外側：フルワイド全体 → 背景色を保持
    • 内側：inner・Group・Columns・MediaText → 背景透明
  • つまり、「色付きの帯」の中にテキストや画像がそのまま載る状態になります。

使い方は簡単で、エディターで

  1. フルワイドブロックを選択
  2. 右サイドバー → 追加CSSクラス
  3. lp-colored-section と記述

これだけです。

4-4. ④ メディア＆テキストの横幅をいい感じにそろえる

.postid-PAGE-ID .wp-block-media-text {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
  • SWELL＋Gutenbergの「メディア＆テキスト」は、 そのままだとページ幅いっぱいになることが多いです。
  • これを 560〜680px 程度に絞ると、
    • 画像＋テキストがキュッとまとまる
    • 視線の移動が少なくて読みやすい
    • スマホでも違和感の少ないレイアウトになる

もし見出しブロックなどもまとめて幅を揃えたい場合は、

.postid-PAGE-ID .lp-narrow {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

といったクラスを追加で用意しておくのもおすすめです。

4-5. ⑤ no-pad：ブロック単位で“余白ゼロ”にする

.postid-PAGE-ID .no-pad { ... }
  • 「このセクションだけ上下ゼロにしたい」
  • 「画像とボタンの距離をもっと詰めたい」

というときに、ブロックに no-pad を付けるだけで

  • Group / MediaText / Columns などの内側のpaddingを0にできる
  • SWELLやブロック側の「自動余白」をまとめてオフにできる

LP制作では、**メリハリのある“詰め方”**がCVRに直結するので、

この no-pad はかなり出番が多いです。

4-6. ⑥ img-full-center：

スマホで「画像だけ端まで広げたい」問題の解決

.postid-PAGE-ID .img-full-center { ... }
...
@media (max-width: 959px) {
  .postid-PAGE-ID
    .swell-block-fullWide:has(.img-full-center)
    .swell-block-fullWide__inner.l-article { ... }
}

よくあるパターンがこちら：

  • フルワイドセクションの中に画像を置いたのに、 スマホだと左右に余白がついて、端まで届かない

これは、フルワイドの inner に padding が乗っているためです。

そこで、

  1. 画像ブロックに img-full-center クラスを付ける
  2. :has(.img-full-center) を使って 「その画像を含むフルワイドの inner だけ、スマホ時の padding をゼロにする」

というテクニックを使っています。

これにより、

  • PC：20px余白で綺麗に収まる
  • スマホ：対象画像だけ左右ぴったり表示

という“いいとこ取り”の表示ができます。

5. 実際の運用フロー：

「このテンプレCSSをどう使い回すか？」

Step 1. ページIDを確認する

WordPress管理画面で対象LPの編集画面を開き、

  • URLに post=495 のような数字がある → それがページIDです。

例）

→ ページID = 495

Step 2. テンプレCSSの PAGE-IDを置き換える

スタイルシート内の

.postid-PAGE-ID ...
body.postid-PAGE-ID ...

を、すべて

.postid-495 ...
body.postid-495 ...

に置き換えます。

Step 3. エディター側でクラスを付ける

  • 背景色を帯状に広げたいフルワイド → クラス：lp-colored-section
  • 余白ゼロにしたいブロック（Group / Columns / MediaText など） → クラス：no-pad
  • スマホで左右ぴったり表示したい画像ブロック → クラス：img-full-center

これだけで、かなり細かいレイアウト調整ができるようになります。

6. さらに拡張したい人向けのアイデア

テンプレCSSにもう一歩踏み込むなら、こんな拡張も可能です。

6-1. CSS変数で幅を一元管理する

body.postid-PAGE-ID {
  --lp-width: 740px;
}

.postid-PAGE-ID .swell-block-fullWide__inner.l-article {
  max-width: var(--lp-width);
}

こうしておくと、

  • 「このLPはちょっと広めにしたいな」と思ったときに –lp-width: 840px; と1箇所変えるだけで対応できます。

6-2. 画像だけ1024pxにしたい場合

よくある「ヘッダー画像だけ大きめにしたい」パターン：

.postid-PAGE-ID .lp-hero-img {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

ヘッダー用の画像ブロックに lp-hero-img を付けるだけで、

「本文は740px、ヘッダーだけ1024px」のようなレイアウトも簡単です。

7. まとめ：

「LPを量産するなら、CSSも“量産体制”にしておく」

今回のテンプレCSSは、

  • ページIDを書き換えるだけで再利用できる
  • 機能ごとに分かれた構造で、後から読み返しても分かりやすい
  • SWELL標準の挙動を前提に、必要なところだけをピンポイントで上書きする

という考え方で整理してあります。

特に、

  • lp-colored-section
  • no-pad
  • img-full-center

この3つのクラスは、LP制作でほぼ必ず出番があるので、

一度テンプレとして仕込んでおくと制作効率がかなり変わります。

もし、

  • もっと細かく「PC / タブレット / SP」で幅を変えたい
  • 色テーマごとにCSSを分けたい
  • 特定のブロックパターン（ヒーロー／料金表／CTA）ごとに 専用クラス＋CSSセットを用意したい

といったところまで作り込みたくなったら、

そこも含めて「LPテンプレCSS第2弾」みたいな形で拡張していくこともできます。

とりあえず今回は、

「postidを差し替えれば、どのLPでもそのまま使える基礎テンプレ」

として、完成度の高いところまでリファクタリングしてあります。

このテンプレをベースに、

あなたのLP量産体制づくりの土台にしてもらえればうれしいです。

コメント