SWELL固定ページタイトルを非表示にする設定方法とCSS
こんにちは。hakubi code のてらだです。
SWELLを使って固定ページでランディングページを作ったり、こだわったトップページを作ったりするとき、デフォルトで表示される「ページタイトル」がデザインの邪魔になってしまうことってありますよね。せっかくおしゃれなメインビジュアルを用意したのに、その上にドカンと文字が乗っていたり、意図しない余白ができたりするとがっかりしてしまうかも。
実はSWELLには、CSSを使わなくても設定だけでタイトルを非表示にする機能や、特定のページだけを制御する便利な方法がたくさん用意されています。
今回は、固定ページのタイトルを消すための具体的な手順から、スマホだけ非表示にする方法、さらにはアーカイブや記事一覧での表示制御まで、私が普段の制作で使っているテクニックを包み隠さずご紹介しますね。
- CSSと設定機能を使い分けて固定ページのタイトルを自在に消す手順
- SWELLのLP機能を活用してデザインの自由度を高める方法
- スマホやPCなどデバイスごとにタイトルの表示・非表示を切り替えるテクニック
- タイトルを消した際に発生する不自然な余白やロゴ消失トラブルの解決策
【目的別】タイトルを消すための3つのアプローチ
まずは、SWELLで固定ページのタイトルを非表示にするための基本的なアプローチをいくつか見ていきましょう。CSSを使う方法からSWELL標準の便利な機能を使う方法まで、目的に合わせて最適なやり方を選んでみてくださいね。
その1：特定の1ページだけCSSで消す手順
特定の固定ページだけタイトルを消したい場合、一番手っ取り早くて影響範囲が少ないのが、そのページの編集画面にある「CSS用コード」欄を使う方法です。ここにコードを書けば、他のページには一切影響しないので安心ですよ。
具体的な手順としては、固定ページの編集画面を開いて、下の方にある「カスタムCSS & JS」というエリアを探してください。その中の「CSS用コード」に、以下のコードをコピペするだけでOKです。
/* このページのタイトルを非表示 */
.c-pageTitle {
display: none;
}SWELLのページタイトルは .c-pageTitle というクラス名で定義されています。単純に h1 を消してしまうと、ロゴ画像（トップページなどではh1扱いになることがあります）まで消えてしまう事故が起きやすいので、必ずクラス名で指定するのがコツです。
これで、そのページを開いたときにタイトルが消えているはずです。プレビュー画面で確認してみてくださいね。
ちなみに、上記はタイトル”テキスト”のみを非表示にするコードです。
タイトル”背景”も消す方法はいろいろありますが、上記コード+タイトル位置の設定を「コンテンツ内」にするのがスマートな方法の一つです。
その2：サイト全体で一括非表示にする記述
もしサイト内のすべての固定ページでタイトルを表示したくない場合は、ページごとにCSSを書くのは大変ですよね。そんなときは、「外観」＞「カスタマイズ」＞「追加CSS」に以下のコードを記述して、サイト全体で一括制御しちゃいましょう。
/* 全ての固定ページでタイトルを非表示 */
.page .c-pageTitle {
display: none;
}ここでのポイントは、.page というクラスを前につけていることです。これはWordPressが固定ページのときだけ出力するクラスなので、これを付けることで「ブログ記事（投稿ページ）」のタイトルは消さずに、「固定ページ」のタイトルだけを消すことができます。
これを設定すると、本当にすべての固定ページでタイトルが消えます。「お問い合わせ」や「プライバシーポリシー」など、タイトルがあった方が分かりやすいページまで消えてしまわないか、事前に確認しておきましょう。
その3：標準の「LP機能」を使って設定で消す
実はSWELLには、固定ページとは別に「LP（ランディングページ）」という機能が標準でついています。もし、広告の着地ページやセールスページを作ろうとしているなら、CSSを書くよりもこちらの機能を使うのが断然おすすめです。
管理画面の「LP」から新規作成すると、エディタのサイドバー（設定パネル）に「LP設定」という項目が表示されます。ここの「タイトルの表示」設定で「非表示」を選ぶだけで、簡単にタイトルを消すことができます。
LP機能を使う最大のメリットは、タイトルだけでなく「ヘッダー」や「フッター」もワンクリックで非表示にできる点です。余計なリンクを排除して、訪問者に中身だけを集中して読んでもらいたい場合に最適です。
トップページに表示されてしまう原因と対処法
「固定ページをトップページに設定したが、タイトルが表示されてしまう」という相談をいただくことがありますが、実はこれ、SWELLの仕様上システムが出力しているタイトルではないケースがほとんどです。
SWELLでは、固定ページをトップページ（フロントページ）に設定した場合、自動的にページタイトル（.c-pageTitle）が出力されない仕様になっています。つまり、設定でオン・オフを切り替える必要すらありません。
それでもトップページにデカデカとタイトルが表示されている場合、それは記事内の見出しブロックを、文字を大きくするために「H1」レベルに設定してしまっている可能性が高いです。
WordPressのエディタで「見出し」を追加すると、最初は「H2」になりますが、これを「もっと目立たせたい！」という理由で「H1」に変更していませんか？
もし心当たりがある場合は、その見出しブロックを選択し、レベルを「H2」以下に戻してみてください。文字の大きさはH1にしなくても、サイドバーの「タイポグラフィ」設定で自由に変更できますよ。
余談ですが、XWRITEの場合はトップページでもタイトルの非表示を切り替える必要があります。このケースと混合している可能性もあるかもしれませんね。
記事一覧リスト（投稿リスト）のデザイン調整
トップページなどで記事を並べる際に使う「投稿リストブロック」ですが、これの見た目を調整するのにCSSを使う必要はありません。SWELL標準の機能だけで、サムネイルを強調したデザインや、特定の記事を表示させない設定が可能です。
「画像だけのギャラリーのようにしたい」「タイトルを目立たなくしたい」という場合も、まずはブロックのサイドバーにある設定を確認してみましょう。
レイアウト設定で見た目を切り替える
投稿リストブロックを選択すると、右側の設定パネルに「レイアウトを選択」という項目があります。ここで「カード型」「リスト型」「サムネイル型」「テキスト型」などを選択するだけで、デザインを瞬時に変更できます。
- リスト型：左側に小さなサムネイル、右側にテキストを表示するすっきりしたリストです。
- サムネイル型：大きなサムネイル画像とタイトルを表示します。画像をメインに見せたい場合に最適です。
CSSで無理やりタイトルを非表示にするよりも、このレイアウト設定で「サムネイル型」を選び、さらに設定パネル内の「公開日」「カテゴリ」などの表示スイッチをオフにして情報を削ぎ落とす方が、SWELLの設計に沿ったきれいな表示になります。
非表示にする際の注意点とSEOへの影響
「タイトルを消すとSEOに悪影響があるんじゃないか？」と心配になる方も多いですよね。特に display: none は隠しテキストとしてスパム扱いされるリスクが懸念されます。ここでは、SEOのリスクを正しく理解し、デバイスごとの調整を行う方法について深掘りしていきます。
スマホ閲覧時のみ消したい場合のCSS
PCの大画面ではタイトルがあってもいいけど、スマホの狭い画面ではファーストビューを広く使いたいからタイトルを消したい、というケースは非常に多いです。そんなときは「メディアクエリ」を使って、画面幅に応じた出し分けを行います。
/* 959px以下（スマホ・タブレット）のみタイトル非表示 */
@media screen and (max-width: 959px) {
.c-pageTitle {
display: none;
}
}この記述であれば、スマホユーザーの利便性を高めるための表示制御として機能します。Googleも、検索順位の操作を目的としない、ユーザビリティ向上のための表示制御については許容しています。
（出典：Google検索セントラル『スパムに関するポリシー』）
消えた後の「謎の空白」を埋めるマージン調整
CSSで display: none; を使ってタイトルを消したときによくあるトラブルが、「謎の空白」が残ってしまう現象です。これは、タイトル自体は消えても、その周りにある「マージン（外側の余白）」や、親要素の「パディング（内側の余白）」が残っているために起こります。
この余白をきれいに消すには、タイトルの非表示と合わせて、コンテンツ上部のマージンもリセットする必要があります。
/* タイトルを消して、さらに上部の余白も詰める */
.c-pageTitle {
display: none;
}
.l-mainContent__inner > .post_content {
margin-top: 0 !important;
}!important をつけるのは少し行儀が悪いとされることもありますが、SWELL等のテーマのデフォルトスタイルを確実に上書きするためには、ここでは割り切って使ってしまっても大丈夫かなと思います。
CSSが反映されない時のチェックリスト
「コードを書いたのに反映されない！」というときは、大抵の場合「キャッシュ」か「詳細度」が原因です。
| 原因 | 対策 |
|---|---|
| ブラウザのキャッシュ | シークレットモードで確認するか、スーパーリロード（Ctrl+F5）を試す |
| SWELLのキャッシュ | SWELL設定＞「リセット」タブからキャッシュをクリアする |
| CSSの記述ミス | 全角スペースが混ざっていないか、括弧 } が閉じているか確認 |
| 詳細度負け | 他のプラグインや設定が優先されている可能性。!important を試す |
特にSWELLは高速化のためにCSSをキャッシュする機能が強力なので、変更を加えたらまずは「キャッシュクリア」を疑ってみてくださいね。
こちらの記事でもしっかりと解説しています。
もう少し詳細度高く知りたい方は、ぜひご覧になってください！
サイトロゴまで消えてしまった場合の解決策
イントロダクションでも少し触れましたが、h1 { display: none; } という書き方をしてしまうと、サイトのロゴ画像まで消えてしまうことがあります。これは、SWELL（というよりWordPressのテーマ全般）が、トップページではロゴ画像を h1 タグで囲む仕様になっていることが多いからです。
もしロゴが消えてしまった場合は、すぐにCSSを確認して、h1 という指定を .c-pageTitle に書き換えてください。これで「ページタイトルエリア」だけをピンポイントで制御できるようになります。
（おまけ）カテゴリーの英語サブタイトルを消すには
固定ページではないですが、カテゴリーページを開いたときに表示される「Category」といった英語のサブタイトル、気になりますよね。これもデザインによってはノイズになることがあります。
これを消したい場合は、以下のCSSを追加CSSに記述します。
/* カテゴリーページの英語サブタイトルを非表示 */
.c-pageTitle__subTitle {
display: none;
}
これでスッキリした見た目になります。細かい部分ですが、こうした積み重ねがサイト全体のクオリティ感に繋がってくるんですよね。
まとめ：状況に合わせて最適な方法を選ぼう
SWELLで固定ページのタイトルを非表示にする方法は、CSSによる制御からLP機能の活用まで様々でしたね。最後に、目的別の最適解をまとめておきます。
- 特定のページだけ消したい時：そのページの編集画面下部にあるCSS欄に
.c-pageTitle { display: none; }を書く。 - LPとして作り込みたい時：SWELL標準の「LP機能」を使って、設定パネルから非表示にする。
- スマホだけ消したい時：メディアクエリを使って、画面幅に応じたCSSを書く。
- SEOが心配な時：タイトルを消した代わりに、本文の最初に必ずH1見出しブロックを配置して、Googleにページの内容を伝える。
個人的には、コード管理が煩雑になるのを防ぐため、可能な限り設定からを使うか、ページ個別のCSS欄で完結させるのがおすすめです。ぜひ、あなたのサイトに合った方法で、理想のデザインを実現してくださいね。