SWELLで固定ページのタイトルを非表示にし余白も調整するカスタマイズ

WordPressテーマの雄「SWELL」の特定の固定ページで、ページタイトル（h1タグ）を非表示にするカスタマイズをご紹介。

現状、固定ページタイトルはSWELLカスタマイザーからポチポチ操作で消すことはできないので、各固定ページのカスタムCSS欄にカスタマイズコードを追加して非表示にします。

SWELLテーマを使ってコーポレートサイトを作る際などに部分的に活躍するTipsだと思うので、お困りの方はぜひ参考にしてください。

固定ページのタイトル非表示例

以下、お問い合わせフォームを設置するCONTACTページのページタイトル（h1タグ）を非表示にしてみた例です。

タイトルを非表示にするだけだと余白感が気になるので、あわせてコンテンツ上部の余白調整を推奨します。

変更前（デフォルト）

変更後①（タイトル非表示＋コンテンツの上部マージン削除）

変更後②（タイトル非表示＋コンテンツ大枠の上部パディングとコンテンツの上部マージン削除）

固定ページタイトル非表示用のCSS

以下のコードをページタイトルを非表示にしたい固定ページの「CSS用コード」欄にコピペしてください。

.c-pageTitle {
  display: none;
}

コードを貼り付ける場所は固定ページ編集画面の下のほうにあるこちらです。

余白調整用のCSS

固定ページのタイトル（h1タグ）を非表示にしてかつ、余白も調整したい方はお好みで以下のコードをお使いください。

.c-pageTitle {
  display: none;
}
.l-mainContent__inner>.post_content {
  margin-top: 0;
}

ファーストビューでフルワイドを使う場合の余白調整用CSS

上の添付画像のように、固定ページのファーストビューでフルワイドブロックを使って「背景画像＋テキスト」などを設置する場合は上述したコードではなく、以下のコードをお使いください。

.c-pageTitle {
  display: none;
}
.l-content {
  padding-top: 0;
}
.l-mainContent__inner>.post_content {
  margin-top: 0;
}