AIと一緒にSWELLでLP化した話 ｜― 固定ページだけグローバルメニューを消すまでの「リアルな悪戦苦闘」
「WordPressのこのページだけLPにしたい。でも、ヘッダーのグローバルメニューが消えない。」
SWELLユーザーなら、一度は通る悩みだと思います。
この記事は、実際に僕がAIと会話しながら1ページだけLP化していった記録です。
単なる手順書ではなく、「どう悩んで、どう試して、最後どう決着したか」を含めて書きます。
やりたいこと：SWELLで固定ページ1枚LPを作りたい
前提はシンプルです。
- テーマは SWELL。
- 普段はSEO記事を量産するブログ。
- その中の 1つの固定ページだけ、「LPっぽい1枚もの」にしたい。
LPなので、
- 目次はいらない。
- サイドバーもいらない。
- できれば グローバルメニューも消して、脱出口を減らしたい。
ところが、SWELLの設定画面をいじっても、
- 「目次非表示」「サイドバー非表示」は簡単にできるのに、
- ヘッダーのグローバルメニューだけは、
「このページだけ消す」という素直なスイッチが見当たらない。
そこで、AIに相談してみることにしました。
第一ラウンド：スラッグ指定でメニューを消せるはず…が、消えない
まずAIと話したのは、
「WordPressって、ページのスラッグが分かれば、
そのスラッグ由来のクラスをCSSで指定して、そのLPページのメニューを消せますよ」
というアイデアでした。
僕のLPのURLは、これです。
ここからAIはスラッグ apice-mini-inquiry-mini-lp-komatta を特定し、
こんなCSSを提案してきました。
css/* このLPページだけグローバルメニューを消す案（スラッグ指定バージョン） */
.page-apice-mini-inquiry-mini-lp-komatta .c-gnav {
display: none !important;
}
.page-apice-mini-inquiry-mini-lp-komatta
→ スラッグ由来のクラスが<body>に付いている、という想定。.c-gnav
→ SWELLでグローバルナビに使われるクラス。
「なるほど、理屈は分かる」と思い、
さっそく SWELL の「外観 → カスタマイズ → 追加CSS」にこのコードを貼り付けてみました。
…が、グローバルメニューは残ったまま。
ここで気づきます。
スラッグ由来クラスは、テーマや出力の仕様によって付いたり付かなかったりする。
想定どおり.page-apice-mini-inquiry-mini-lp-komattaが付いていない可能性がある。
つまり、「スラッグ指定だけでは足りないかもしれない」というわけです。
第二ラウンド：PAGE IDを使えば、もっと確実に消せるらしい
そこでAIから次の提案が出てきます。
「ページIDが分かれば、
.page-id-XXXX .c-gnav { display:none !important; }
という形で、もっと確実にLPだけメニューを消せます。」
WordPressは <body> に、page-id-13499 のような 固定ページIDクラス を必ず付ける仕様です。
つまり、
- スラッグ由来クラスは「テーマ依存」。
- ページIDクラスは「WordPress本体の仕様」。
なので、IDさえ分かれば、テーマに左右されずに「このページだけ」を狙える。
問題はここからです。
「HTMLよくわからないのに、PAGE IDを探せと言われても、どこを見ればいいのか分からん。」
僕はHTMLを完全に理解しているタイプではありません。
そこで、発想を変えました。
そうだ、ページID探しそのものをAIにやらせればいいじゃないか。
第三ラウンド：HTMLソースを開いて、AIに丸投げする
やったことは、極めて人間ぽいです。
- 該当LPページをブラウザで開く。
- 右クリックして「ページのソースを表示」。
- 出てきたHTMLソースは、タグと英語とCSSとJSがごちゃごちゃ並んでいて、
正直、何が何だか分からない。
でも、なんとなくの直感はありました。
「こういうページ情報って、たいてい HTMLの頭のほうにあるよね？」
そこで、僕はこうしました。
- HTMLソースの先頭から、ざっくり 3画面分くらいを選択してコピー。
- そのテキストファイルをAIにアップロードし、
「HTMLからページID探せるよね？お願い！」
と、丸投げ。
AIは、そのソースから次のような記述を見つけました。
wp-json/wp/v2/pages/13499?p=13499
この2つのヒントから、AIはこう結論づけました。
このページの固定ページIDは 13499 ですね。
人間の僕は「へぇ、そんな風に見るんだ…」と思いつつ、
とりあえずIDが分かったことを素直に喜びました。
第四ラウンド：AIが導き出した「決着版CSS」
ページIDが分かったところで、AIは即座に「完成版CSS」を出してきます。
css/* 固定ページID 13499 のLPだけ、SWELLのグローバルメニューを消す */
.page-id-13499 .c-gnav {
display: none !important;
}
ここで使っているのは２つだけ。
page-id-13499
→ この固定ページだけに付く<body>のクラス。.c-gnav
→ SWELLのグローバルナビのクラス。
この組み合わせで、
「IDが 13499 のページ（＝このLP）だけ、グローバルメニューを非表示にする」
という意図をCSSでピンポイントに表現してくれました。
あとは、実行あるのみです。
実行：SWELLの追加CSSに貼ってみたら…
最後の手順は短いです。
- WordPressの管理画面で「外観 → カスタマイズ → 追加CSS」を開く。
- AIが教えてくれたCSSを、そのまま貼り付ける。
css.page-id-13499 .c-gnav {
display: none !important;
}
- 保存してLPページを再表示。
すると…
やりました。見事にグローバルメニューが消えました。
- 他のSEO記事や通常ページには
page-id-13499が付いていないので、グローバルメニューはそのまま残る。 - このLPページだけ、グローバルメニューが消えて「1枚もののLP」として見せられる。
当初の目的どおり、
- 目次なし
- サイドバーなし
- グローバルメニューなし
の**「LP専用ビュー」**が、他のページを壊すことなく実現できました。
この体験から分かった「AI＋WordPressカスタマイズ」の現実的な使い方
今回のやり取りで、僕が一番おもしろかったのは、
「HTMLやテーマ構造が完全に分からなくても、AIを相棒にすればここまでできる」という点です。
ポイントをまとめると、こうなります。
- スラッグ指定はアイデアとして分かりやすいが、テーマ依存で効かないこともある。
- 最終的に頼れるのは、WordPress本体が付ける
page-id-○○クラス。 - ページIDの探し方が分からなくても、
- LPページのHTMLソースを開いて、先頭をざっくりコピーして、
- 「この中からIDを探して」とAIに丸投げすればいい。
- AIはソースの中から
wp-json/wp/v2/pages/XXXXや?p=XXXXなどを見つけて、
IDを特定し、ページ限定CSSを生成してくれる。
技術者視点で言えば、
- これは「AIに静的解析を投げている」ようなものです。
- 僕は「なんかそれっぽいソース」を渡しているだけで、
面倒な探査や読解は全部任せている。
この記事を読んでいるあなたへ
もしあなたが、
- SWELLでLPを作りたいのに、
「このページだけメニューを消したい」が分からなくてモヤモヤしている - HTMLソースを開いても、タグと英語の山で頭が痛くなるタイプ
なら、
- まずはLPのURLをAIに渡して「スラッグから書けるCSS」を出してもらう。
- もし効かなければ、LPページのソースを開いて、頭のほうをざっくりコピーしてAIに渡す。
- 「この中からページIDを探して、LPだけメニューを消すCSSを書いて」と丸投げする。
という流れを、一度試してみてください。
僕がやったのは、まさにこの3ステップだけです。
**「全部自分で理解してから書く」のではなく、
「分からないところはAIに丸投げする」ことで、LPを1枚完成させる。**
そんなWeb制作のやり方も、もう現実的になってきています。
筆者プロフィール｜DXジュン（Apice Technology 代表）
「tecn」を運営している DXジュン です。
Apice Technology株式会社の代表として、20年以上にわたり Web制作・業務システム開発・業務改善支援に携わっています。
普段は中小企業向けに、在庫管理・予約管理・受発注管理など、業務を効率化するためのシステム開発やDX支援を行っています。
tecnでは、業務改善のヒントやWebシステムの仕組み、「技術が暮らしを少し便利で楽しくする」をテーマに、現場目線で分かりやすく情報発信しています。
最近は在庫管理のDX化に力を入れており、SKU・JAN・棚卸・バーコード運用など、現場で役立つ実践的なノウハウを発信しています。
また、小規模事業者向けの無料ツール 「アピスminiシリーズ」も公開しています。
🔗 Apice Technology（会社HP）
🔗 音を楽しむ【耳スタ】
🔗 在庫管理システムの機能紹介
記事が皆さまの仕事や日常のヒントになれば幸いです。
コメント