SWELLの固定ページタイトルを非表示にする5つの方法【CSSとLPで解決】

WordPressテーマSWELLで固定ページを作ると、どうしてもページ上部にタイトルが出てきますよね。

お問い合わせページやプロフィールページなど、「ここはタイトルを見せたくない」「もっとスッキリ見せたい」と感じる人も多いようです。

この記事では、SWELLの固定ページのタイトルを非表示にする具体的なやり方と、消したあとに出てくる「余白」「パンくず」「SEO」の不安までまとめて解説します。

先に結論だけ言うと、「ページごとのCSS」「追加CSS」「LP機能」の3つを使い分ければ、多くのケースで固定ページタイトルの非表示はきれいに解決できます。

SWELLで固定ページタイトルを非表示にしたくなる場面

固定ページタイトルを消したくなる典型パターン

よく相談を受けるのは、次のようなページです。

ページの種類	タイトルを非表示にしたくなる理由	優先度の目安
お問い合わせ・サンクスページ	フォームだけを見せたい、タイトルとメニューの表示が重複して見える	高い
プライバシーポリシー・利用規約	メニューやパンくずでページ名が分かるので、本文のタイトルがくどく感じる	中〜高
LP・セールスページ	ヒーローエリアに自分で作った大きな見出しを置きたい	かなり高い
会社概要・サービス紹介	オリジナルのヘッダー画像や見出しデザインを使いたい	中
トップページを固定ページで作っている場合	ロゴやキャッチコピーとページタイトルが二重に見えることがある	ケース次第

私自身は、とくにLPとお問い合わせページでタイトルを消したくなることが多いです。

タイトルの下に大きめの余白ができると、肝心のフォームやメインの訴求が画面に入りきらず、訪問者に少しスクロールさせてしまうのが気になっていました。

さらに、固定ページはメニューにも同じ名前が並びますし、パンくずにも同じ文字が出ますよね。

こうなると、本文の一番上にまた同じタイトルが出てくるので、「ちょっとしつこいな」と感じる方が多い印象です。

swell 固定ページ タイトル 非表示にする前に押さえたいポイント

すぐにCSSを書いて消してしまう前に、次の3点だけは頭に入れておくと安心です。

• SWELLの「タイトル」は基本的にh1タグで、SEO上も意味のある要素
• h1を完全に消してしまうと、ページの主題が検索エンジンに伝わりづらくなることがある
• テーマ設定やLP機能だけで解決できるケースも多いので、まずはそこから試したほうが安全

SWELLのカスタマイザーには、「タイトルの表示位置」や「コンテンツヘッダーを表示するかどうか」といった設定があります。

CSSで強制的に消す前に、これらの設定でどこまで調整できるか見ておくと、あとからのトラブルが減ります。

とはいえ、現時点では「固定ページのタイトルだけを簡単なチェックボックスで非表示にする」といった機能は用意されていません。

そのため、実際には「固定ページごとのカスタムCSS欄」や「外観 > カスタマイズの追加CSS」を使って、タイトルを非表示にするケースが多くなっています。

SWELLの固定ページタイトル表示の仕組みと注意点

SWELLのタイトル表示位置とコンテンツヘッダー

SWELLの投稿・固定ページは、カスタマイザーの設定でタイトルの表示位置を切り替えられます。

代表的なのは次の2パターンです。

• コンテンツ上に、コンテンツヘッダーとしてタイトルを表示する
• コンテンツ内（本文の一番上あたり）にタイトルを表示する

コンテンツ上に出している場合、テーマ側で用意されたコンテンツヘッダーの枠の中にh1タグのタイトルが入ります。

コンテンツ内の場合は、本文ブロックの手前にh1が置かれるイメージです。

この違いによって、次の点が変わってきます。

• タイトルを非表示にするとき、どの要素をCSSで指定するか
• タイトルを消したあとに残る余白を、どこで調整するか

イメージとして、次のように考えておくと分かりやすいです。

表示位置	タイトル要素のイメージ	よく使われるセレクタ例
コンテンツ上	コンテンツヘッダーの中にあるh1	コンテンツヘッダーのクラスや、その中のh1
コンテンツ内	本文の直前に出るh1	h1や、タイトル用のクラスなど

自分のサイトがどのパターンになっているかは、ブラウザの「検証」機能でタイトル部分を右クリックしてチェックするとすぐに分かります。

見出しタグ（h1）とブラウザのタイトルの違い

もうひとつよく混ざりやすいのが、「h1」と「titleタグ（ブラウザのタブに出るタイトル）」の違いです。

• h1…ページ本文の中で一番大きな見出し。ふつうは「記事タイトル」と同じ文言
• titleタグ…HTMLのhead内にある要素。検索結果やブラウザのタブに表示されるタイトル

SWELLでは、基本的に投稿・固定ページのタイトルからtitleタグが自動的に生成されます。

この記事で扱うのは、あくまで本文内に出るh1やコンテンツヘッダーの見た目を非表示にする方法です。

head内のtitleタグまで消してしまうと、SEO上かなり不利になってしまうので、そこには手を加えないようにしましょう。

このあと紹介するCSSも、「見た目としてのタイトルを隠す」という範囲にとどめておくのがポイントです。

swell 固定ページタイトルを非表示の3つの基本パターン

ここからは、実際にSWELLの固定ページのタイトルを非表示にする方法を3つに分けて解説していきます。

• 方法1：特定の固定ページだけタイトルを非表示にする
• 方法2：サイト全体の固定ページタイトルをまとめて隠す
• 方法3：LP機能を使ってタイトルを表示しない

ざっくり比較すると、こんなイメージです。

方法	対象範囲	難易度	おすすめの使いどころ
方法1：ページ単位のCSS	その固定ページだけ	低い	お問い合わせ・サンクスページなど
方法2：追加CSSで一括	固定ページ全体（指定の仕方による）	中	コーポレートサイトなど、固定ページの役割が近いサイト
方法3：LP機能	LP投稿タイプ	低〜中	広告用やセールス用のランディングページ

それぞれ、どんな場面で向いているのかを具体的に見ていきます。

方法1：特定の固定ページだけCSSでタイトル＆余白を消す

個人的にも一番おすすめでトラブルが少ないのが、「ページ単位でCSSを書く」方法です。

SWELLには、固定ページの編集画面の下の方に「カスタムCSS＆JS」といった名前の入力欄が用意されています。

ここに書いたCSSは、そのページだけに適用されるので、ほかのページを巻き込みにくいのがメリットです。

たとえばコンテンツヘッダーにタイトルが出ている場合は、次のようなイメージで書くことが多いです。

• コンテンツヘッダーやタイトルの要素を「display:none;」で非表示にする
• 本文の一番上に入っている「margin-top」を0にして、余白を詰める

実際のクラス名は、SWELLのバージョンや環境によって変わることがあります。

ブラウザの検証ツールで、自分のサイトのタイトル部分に付いているクラス名や構造を確認してから、CSSを書くようにすると安全です。

この方法なら、消したいページだけをピンポイントで調整できるので、「まずは1ページで試してみる」使い方にも向いています。

方法2：追加CSSでサイト全体の固定ページタイトルを非表示にする

もし「固定ページは全部タイトルを消したい」という場合は、外観 > カスタマイズ > 追加CSSにコードを書いて、まとめて非表示にする方法もあります。

使い方としては、次のようなイメージになります。

• 固定ページのタイトルに使われているクラス名やh1をセレクタで指定する
• display:none; で非表示にする

ただ、この方法は少し注意点が多めです。

• トップページのロゴや、別のパーツにも同じクラス名が使われていると、意図しない場所まで消えてしまう
• 子テーマやほかのカスタマイズ用CSSと競合して、崩れの原因になることがある
• 「固定ページだけ」に効かせるセレクタの書き方を工夫しないと、投稿ページにも影響する

実際、「追加CSSでh1を消したら、思わぬところまで見えなくなってしまった」という相談もよく聞きます。

そのため、「サイト全体のデザイン方針として、固定ページタイトルは全部非表示にする」というケース以外では、ページ単位での調整を優先するのがおすすめです。

方法3：LP機能を使ってタイトルを設定から非表示にする

SWELLには、通常の投稿・固定ページとは別に「LP」という投稿タイプが用意されています。

LP用の投稿を新規作成すると、編集画面のサイドバーにLP専用の設定パネルが表示されます。

ここから、次のようなことが選べます。

• タイトルを表示するかどうか
• ヘッダーを見せるか隠すか
• フッターを表示するかどうか

つまり、CSSを書かなくても、「タイトルなし・ヘッダーなし・フッターなし」のシンプルなLPレイアウトを作ることができます。

セールス用やキャンペーン用のページなら、LP投稿タイプを使った方が、あとからの管理もしやすくなります。

逆に、お問い合わせページや会社概要のような、いわゆる「ふつうの固定ページ」は、固定ページ＋カスタムCSSで調整する、という役割分担で考えるとスッキリします。

固定ページタイトルを消したあとのレイアウト調整（余白・パンくず）

固定ページのタイトルを消すと、ほとんどの場合で次のような悩みがセットで出てきます。

• タイトルを消したのに、上に不自然な空白が残る
• パンくずリストだけポツンと残ってしまい、バランスが悪く見える

ここでは、タイトルを非表示にしたあとの代表的な調整ポイントをまとめていきます。

タイトル非表示後の余白（マージン）を整える

タイトルをdisplay:noneで隠したときに起きやすいのが、「タイトルがあった場所の余白だけそのまま残る」という現象です。

多くの場合、次のどちらか、あるいは両方が原因になっています。

• コンテンツヘッダーやその周りのpaddingが残っている
• 本文の最初のブロックにmargin-topが入っている

対処のイメージをざっくり表にすると、次のようになります。

症状	疑うポイント	対処の方向性
タイトルを消したのに上部に大きな空白が残る	本文ブロックのmargin-top	本文の最初のブロックのmargin-topを0にする
ページ全体の上が何となく広く感じる	コンテンツ全体のpadding-top	コンテンツラッパーのpadding-topを少なめにする
フッター直前の余白がやたら大きい	フッター設定やブロックごとの余白	SWELLの余白設定とCSSを合わせて調整する

固定ページごとに細かく余白を変えたいときは、やはりそのページのカスタムCSS欄に書いていく方が安心です。

共通で変えてしまうと、「このページではちょうどいいけど、別のページだと狭すぎる」といったズレが出やすくなります。

パンくずリストやメインビジュアルとのバランスを取る

タイトルを非表示にすると、今度はパンくずリストとのバランスが気になってくることも多いです。

もともと「パンくず→タイトル→本文」という流れだったものが、「パンくず→いきなり本文」になるので、少し間延びして見えることがあります。

よくある選択肢は次の3パターンです。

パンくずの位置変更は、テーマファイルを編集したり、PHPのカスタマイズが必要になることがあります。

「コピペだけで完結させたい」という場合は、パンくずを非表示にするか、CSSだけで余白を整える方向の方が現実的です。

全体のイメージを整理すると、次のような感じです。

パンくずの扱い	向いているページ	メリット
タイトルと一緒に非表示	LP・お問い合わせ・サンクスページ	余計な情報がなく、コンテンツに集中してもらえる
パンくずだけ上部に残す	マニュアル・ヘルプページなど情報量が多いページ	サイト内の位置が分かりやすい
パンくずを下の方に移動	デザインを優先したい固定ページ	見た目はスッキリしつつ導線も確保できる

ユースケース別おすすめ設定パターン

お問い合わせ・プライバシーポリシーなどの固定ページ

お問い合わせフォームやプライバシーポリシーのページは、タイトルよりも中身のほうが大事なページです。

メニューやパンくずでページ名が分かるので、本文の一番上にまた大きくタイトルを出す必要はあまりありません。

このタイプのページでは、次の組み合わせが扱いやすいです。

ページの種類	タイトルの扱い	パンくず	余白調整のポイント
お問い合わせ	そのページのカスタムCSSで非表示にする	表示してOK	フォームの上に無駄な空白が出ないようmarginを調整
サンクスページ	可能なら非表示にする	非表示にしても問題ないことが多い	コンパクトに感謝メッセージと誘導だけを見せる
プライバシーポリシー	デザイン次第で非表示も選択肢	表示しておいた方が親切	長文になるので、見出しとのバランスを重視

まずはお問い合わせページ1つだけで試してみて、問題なければ同じやり方を別の固定ページにも横展開していくと失敗が少ないです。

LP・セールスページでのswell 固定ページタイトルを非表示

LPやセールスページは、ほぼ確実に標準の固定ページタイトルが邪魔になります。

私のおすすめは、次のような流れです。

こうしておくと、LPらしい没入感のあるレイアウトを作りつつ、コード上はしっかり見出し構造を整えることができます。

どうしても固定ページでLPっぽいページを作る必要があるときだけ、固定ページ側のカスタムCSSでタイトルを非表示にし、同時に余白やパンくずも整える、という考え方にすると管理が楽です。

会社概要・サービス紹介ページのときの考え方

会社概要やサービスページは、SEO的にもサイトの信頼性的にも重要な固定ページです。

検索から直接アクセスされる機会も多いので、「タイトルを完全になくすかどうか」は少し慎重に考えた方がいい部分でもあります。

ここでは、次の2パターンを比べてみましょう。

方針	メリット	注意点
タイトルを完全に非表示にする	LPのようにスッキリとしたデザインにできる	ページの主題がコード上で分かりづらくなる可能性
タイトルは残してデザインでなじませる	検索エンジンにもユーザーにも内容が伝わりやすい	見た目の自由度は少し下がる

たとえば、タイトルは小さめに表示して、その下に大きな見出しブロックを置く、という形にすると、デザインと情報の分かりやすさのバランスが取りやすいです。

SEOとアクセシビリティの観点から見たタイトル非表示

h1を完全に消すときのリスク

h1をdisplay:noneで消してしまうと、ページ内にh1が存在しない状態になります。

これ自体が即NGというわけではありませんが、次のようなリスクはあります。

• 検索エンジンから見たときに、そのページの主題が把握しづらくなる
• スクリーンリーダーなどを使うユーザーにとって、ページ全体の構造がつかみにくくなる

とくに、サービス紹介ページや料金ページなど、ビジネス的に重要な固定ページでは、できるだけh1を残す方向で考えたほうが無難です。

一方で、お問い合わせやLPなど「デザイン優先で、ほかのページからもしっかり誘導している」ようなページであれば、タイトル非表示の優先度が高くても良い場面もあります。

目に見えないh1でSEOとデザインを両立するアイデア

どうしても見た目としてはタイトルを非表示にしたい、でもコード上は見出し構造をきちんと残したい、という悩みもよくあります。

その場合は、「画面上ではほぼ見えないけれど、HTML上にはh1を残す」という折衷案も考えられます。

• h1の文字サイズや余白を小さくして、デザインの中にさりげなく置く
• スクリーンリーダー用のクラスを使って、画面の外に配置する

後者のイメージとしては、次のようなCSSがよく使われます。

• 幅・高さを1pxにする
• 画面の外側にずらして、見た目には表示しない

このようにしておけば、デザインとしては独自のヒーローセクションや大見出しを自由に作りつつ、コード上はページの主題がきちんと伝わる形にできます。

トラブルシューティング：タイトルが消えない・崩れるとき

CSSを書いてもタイトルが非表示にならないとき

カスタムCSS欄にコードを書いてもタイトルが消えない場合、だいたい次のどれかが原因です。

• 指定しているクラス名やタグが実際の構造と合っていない
• 別のCSSで上書きされていて、優先度で負けている
• キャッシュプラグインやブラウザキャッシュが残っている

チェックするポイントを表にまとめると、こんな感じです。

症状	確認すること	対応のヒント
まったく見た目が変わらない	CSSを保存できているか、そもそも読み込まれているか	別ブラウザやシークレットモードで表示を確認する
特定のページだけ効かない	カスタムCSS欄を書いたページを間違えていないか	その固定ページの編集画面で、再度CSS欄をチェックする
少しだけ変わるが、完全には消えない	セレクタの指定が弱くないか	より具体的なセレクタにするか、必要なら!importantを検討する

デザインが崩れたときのチェックリスト

タイトルや余白をいじったあとに、次のような崩れが起きることもあります。

• スマホだけ余白のバランスがおかしい
• フッター前だけスペースが広くなった、または狭くなった

そんなときは、次の順番で確認してみてください。

1. 固定ページごとのSWELL設定で、コンテンツ上下の余白を確認する
2. カスタマイザーのフッター設定やウィジェット周りの余白を見直す
3. 追加CSSで書いた内容を一時的にコメントアウトして、原因になる箇所を切り分ける

とくにスマホの表示がおかしい場合は、開発者ツールでスマホ幅に切り替えた状態で、どのCSSが効いているかを確認していくのが近道です。

よくある質問｜swellの固定ページタイトルを非表示にすると？

Q1. 固定ページだけタイトルを非表示にして、投稿ページはそのままにできますか？

はい、可能です。

もっとも簡単なのは、「タイトルを消したい固定ページのカスタムCSS欄だけ」にコードを書く方法です。

投稿ページ側には何も書かなければ、投稿のタイトル表示には影響しません。

サイト全体に効く追加CSSを使う場合は、「固定ページのときだけ適用されるクラス」を絡めてセレクタを書く必要があります。

やり方に迷ううちは、まずページ単位のカスタムCSSで試してみるのが安全です。

Q2. SWELLの固定ページタイトルを非表示にしたらSEO的にまずいですか？

固定ページのタイトルを非表示にしたからといって、すぐに大きなSEOペナルティを受けるわけではありません。

ただ、h1がまったく存在しないページが増えすぎると、ページの主題が検索エンジンに伝わりづらくなることはあります。

そのため、次のような考え方でバランスを取るのがおすすめです。

• LPやお問い合わせなど、デザイン優先で誘導もしっかりしているページ → タイトル非表示でもOKなことが多い
• サービス紹介・会社情報など重要なページ → タイトルを残したり、小さく表示しておく

見た目とSEOの両方を意識しながら、ページごとに判断していきましょう。

Q3. 固定ページタイトルを非表示にしたのに、スマホだけタイトルが表示されます

スマホ表示でだけタイトルが残るときは、レスポンシブ対応用のCSSが関係している可能性が高いです。

• スマホ幅のときだけ、別のスタイルシートが適用されている
• モバイル用のCSSのほうが優先されていて、上書きされている

この場合は、ブラウザの検証ツールでスマホ幅に切り替えた状態で、タイトルにどんなCSSが効いているかを確認してみてください。

状況によっては、セレクタを少し強めたり、モバイル幅だけに効くCSSを追加で書く必要があります。

まとめ｜今日からできる一歩

この記事の内容を振り返っておきます

今日できる一歩としては、「タイトルを消したい固定ページをひとつだけ決めて、そのページのカスタムCSS欄にタイトル非表示と余白調整のコードを書いてみる」ことから始めてみてください。

そのうえで、PCとスマホの両方で表示を確認し、「この見え方なら他のページにも使えそうだな」と感じたら、少しずつ横展開していくイメージです。

小さく試しながら調整していけば、デザインとSEOのバランスを崩さずに、SWELLの固定ページタイトルをうまく非表示にしていけるはずです。