SWELLでは、投稿ページや固定ページの上部に表示される「コンテンツヘッダー」を、カスタマイザーやページごとの設定から柔軟に調整できます。
本記事では、
- コンテンツヘッダーの役割
- 基本的な設定場所
- よくあるCSS調整例
をまとめて解説します。
※ 基本仕様については、SWELL公式マニュアルもあわせてご参照ください。
コンテンツヘッダーとは？
SWELLの「コンテンツヘッダー」とは、 記事タイトルや固定ページタイトルが表示される、ページ上部のエリアのことです。
主に、以下の要素で構成されています。
- 記事・固定ページのタイトル（h1）
- カテゴリー・投稿日などのメタ情報（表示設定による）
- タイトル背景画像（設定時）
ページを開いたときに最初に目に入る部分のため、 サイト全体の印象を左右する重要なエリアでもあります。
デザインやサイトの目的に合わせて、適切に調整するのがおすすめです。
コンテンツヘッダーの基本設定場所
コンテンツヘッダーの設定は、主に次の2か所から行えます。
①カスタマイザーでの全体設定
外観 → カスタマイズ → サイト全体設定 → コンテンツヘッダー から、 サイト全体のデフォルト設定を変更できます。
設定できる主な項目はこちらです。
- タイトル背景用のデフォルト画像
- 画像フィルター（色味・濃さ）
「特に個別設定しないページ」は、 ここで設定した内容がそのまま反映されます。
②投稿・固定ページごとの設定
各投稿・固定ページの編集画面右側、下部にある 「SWELL設定」 から、ページ単位の調整が可能です。
ここでは、
- タイトル背景画像の指定
- アイキャッチ画像の表示・非表示
などを、記事ごとに個別設定できます。
「このページだけ雰囲気を変えたい」という場合に便利です。
コンテンツヘッダーのCSS調整サンプル
ここからは、実際によくあるカスタマイズ例をご紹介します。
CSSは、
- 各ページ下部の「カスタムCSS」
- もしくは、外観 → カスタマイズ → 追加CSS
などに追加してください。
調整①：コンテンツヘッダーを非表示にしたい
LPやシンプルな固定ページでは、 「コンテンツヘッダー自体を表示したくない」場合もあります。
#content {
padding-top: 0;
}
#top_title_area {
display: none;
}このCSSをページ下部のカスタムCSSへ追加すると、 そのページのコンテンツヘッダーが非表示になります。
※ タイトル（h1）も非表示になるため、 SEOや構造面を考慮し、ページ本文内にh1を別途設置するのがおすすめです。
調整②：高さ・余白を調整したい（タブレット・PC表示時）
「ヘッダーが少し大きい」「余白をもう少し詰めたい」 と感じる場合は、min-height や padding を調整します。
@media (min-width: 600px) {
.l-topTitleArea {
min-height: 130px;
padding: 1em 0;
}
}この指定は、 画面幅が600px以上（タブレット・PC表示時）のみ反映されます。
スマホ表示を崩さず、 大きい画面だけバランスを整えたい場合に便利です。
調整③：固定ページのタイトル調整
背景画像に合わせて、 タイトルのフォント・サイズ・色を変更したい場合の例です。
.c-pageTitle {
font-family: "Cormorant Garamond", serif;
font-weight: 400;
font-style: normal;
font-size: 2rem !important;
color: #5c5c5c;
text-shadow: none;
}ページの雰囲気に合わせて、 フォントや色味を調整すると、より統一感が出ます。
まとめ
SWELLのコンテンツヘッダーは、
- サイト全体設定
- ページごとの個別設定
- CSSによる細かな微調整
を組み合わせることで、非常に柔軟にカスタマイズできます。
「とりあえずデフォルトのまま使っている」という場合でも、 一度見直すだけで、サイト全体の印象がぐっと整うことも多いです。
ぜひ、ご自身のサイトや目的に合った表示方法を試してみてください。
