【SWELL】タイトルを非表示にする簡単な方法！固定・投稿のコンテンツヘッダーを消す

WordPressテーマ「SWELL」を使ってサイトを制作していると、デザイン的に、どうしても「タイトル部分を非表示にしたい！」ってときがありますよね？

• SWELLのタイトルを消したい
• SWELLのヘッダー画像（コンテンツエリア）を消したい
• 固定ページも投稿ページもタイトルを消したい
• 投稿ページだけはタイトルを残したい

という方に朗報です \(^o^)/

それ、とっても簡単に解決できちゃいます♪

私の場合、「秒」で解決したので、その方法をお伝えしますね！

sayaka

カスタマイズ設定の中を探したり、テーマ設定を探したけど、そんなことしなくてOKですよ

sayaka

拍子抜けするほど簡単なので初心者さんも安心してくださいね

SWELLのタイトル（コンテンツヘッダー）はどこ？

本題に入る前に…認識がずれてしまっては大変なので、今回非表示にする部分を再確認させてくださいね。

この記事では、WordPressテーマ「SWELL」の【タイトル＝コンテンツヘッダー】とは、この部分を指しています。

（引用：船橋市訪問介護事業者連絡会様｜デザインを担当させていただきました）

固定ページの上、投稿ページの上に表示される部分です。

それでは、この部分を非表示にしていきましょう
ε=(ﾉ*>∀<)ﾉ Go

【解決】固定ページだけ！タイトルを一瞬で非表示にするCSS

固定ページのタイトル（＝コンテンツヘッダー）だけを非表示にする方法を解説します。

固定ページはタイトルを非表示にして
投稿ページ（ブログ）はタイトルを残したい

という方向けの方法です。

STEP１：追加CSSを開きます

設定箇所：WordPress 〉カスタマイズ 〉追加CSS

「追加CSS」を開いた状態で、下記のCSSコピーしてください。

※SWELLテーマのアップデートにより追加CSSの編集箇所や名称が変わっている場合があります。

STEP２：コードをコピーして追加CSSに貼り付ける

下記のコードを全てコピーして「追加CSS」に貼り付けます。

貼り付けが完了したら「公開」ボタンをクリックして、指示を確定させます。
※「公開」ではなく「更新」と書かれている場合があります。

/* === コンテンツヘッダー設定 タイトル非表示 固定ページのみ === */

.page .l-topTitleArea {
    display: none !important;
}

タイトルの非表示設定だけだと、下に余白が残ります。
余白も消したい場合は、下記のコードの方をコピーして貼り付けてください。

/* === コンテンツヘッダー設定 タイトル非表示 固定ページのみ === */

/* ① 固定ページのみ｜タイトル（背景画像を含む）を非表示 */
.page .l-topTitleArea {
    display: none !important;
}

/* ② 固定ページのみ｜余白を消す */
.page .l-content {
    padding-top: 0 !important;
}

【解決】固定ページ・投稿（ブログ）両方！タイトルを一瞬で非表示にするCSS

固定ページのタイトル（＝コンテンツヘッダー）だけを非表示にする方法を解説します。

固定ページのタイトルを非表示にして
投稿ページ（ブログ）のタイトルも非表示にしたい

という方向けの方法です。

sayaka

サイト全体のヘッダー画像を丸っと全部消したい！という方向けです

STEP１：追加CSSを開きます

設定箇所：WordPress 〉カスタマイズ 〉追加CSS

「追加CSS」を開いた状態で、下記のCSSコピーしてください。

※SWELLテーマのアップデートにより追加CSSの編集箇所や名称が変わっている場合があります。

STEP２：コードをコピーして追加CSSに貼り付ける

下記コードを全てコピーして、「追加CSS」に貼り付けます。

貼り付けが完了したら「更新」ボタンをクリックして、指示を確定させます。
※「公開」ではなく「更新」と書かれている場合があります。

/* === コンテンツヘッダー設定 タイトル非表示 固定ページ・投稿ページ === */

.l-topTitleArea {
    display: none !important;
}

タイトルの非表示設定だけだと、下に余白が残ります。
余白も消したい場合は、下記のコードの方をコピーして貼り付けてください。

/* === コンテンツヘッダー設定 タイトル非表示 固定ページ・投稿ページ === */

/* ① タイトル（背景画像を含むセクション全体）を丸ごと非表示 */
.l-topTitleArea {
    display: none !important;
}

/* ② 余白を消す */
.l-content {
    padding-top: 0 !important;
}

【解決】特定のページだけ・1ページだけタイトルを非表示にしたい場合

サイト全体や、固定ページ全体ではなく、

「特定のココとココだけ非表示にしたい」
「この１ページだけ非表示にしたい」

という場合もありますよね。

その場合のやり方を説明します。

特定のページだけ・1ページだけタイトルを非表示にする方法

SWELLでは、ページごとにCSSを適用できる機能が標準で用意されています。

編集画面の下の方に「そのページだけに効かせるCSS」を直接書き込めるボックス（CSS用コード欄）が用意されてるんです！

sayaka

サイト全体に影響を与えず、そのページ限定でカスタマイズしたい時はここを使うのがとっても便利

設定箇所：WordPress 〉投稿画面 〉カスタムCSSエリア

1. タイトルを消したい固定ページ（または投稿ページ）の編集画面を開く
2. 下へ下へスクロールする
3. 「カスタムCSSエリア」を開く
4. 「カスタムCSSエリア」に、上記のコードを貼り付ける
5. 貼り付けが完了したら「更新」ボタンをクリックして指示を確定させる
   ※「公開」ではなく「更新」と書かれている場合があります。

/* このページのみ｜タイトル非表示 */
.l-topTitleArea {
    display: none !important;
}

タイトルの非表示設定だけだと、下に余白が残ります。
余白も消したい場合は、下記のコードの方をコピーして貼り付けてください。

/* このページのみ｜タイトル非表示 ＋ 余白削除 */
.l-topTitleArea {
    display: none !important;
}
.l-content {
    padding-top: 0 !important;
}

この方法で、貼り付けているページだけピンポイントでタイトルを非表示にできます。

sayaka

1〜2ページだけ調整したい場合は、この方法が１番手軽ですよ！

サイト全体に反映させたいなら…
カスタマイズの「追加CSS」に入れる。

ピンポイントで消したいなら…
各ページの編集画面の「カスタムCSSエリア」に入れる

用途に合わせて、使い分けてみてくださいね♪

【緊急】トップページのロゴやメインビジュアルまで消えた時の対処法

固定ページを「トップページ（フロントページ）」として設定している場合、お伝えしたCSSを適用すると、環境やヘッダーの設定によってはトップページのロゴやメインビジュアルも一緒に消えてしまうことがあります。

もしも、トップページの表示がおかしくなってしまった場合は、下記CSSに差し替えてください。

トップページを除外する指定（:not(.home) ）という条件を追加してあります。

トップページを除外してタイトル（コンテンツヘッダー）を消す方法

◼︎固定ページのタイトル（コンテンツヘッダー）を非表示にする＋トップページは除外する

◼︎トップページ除外＋固定ページのタイトルを非表示にする

/* === 固定ページのみ・タイトル（背景画像を含む）非表示・トップページ以外 === */

.page:not(.home) .l-topTitleArea {
    display: none !important;
}

◼︎トップページ除外＋固定ページのタイトルを非表示にする＋余白を消す

/* === 固定ページのみ・タイトル非表示・トップページ以外 余白削除  === */

/* ① 固定ページのみ・トップページ以外｜タイトル（背景画像を含む）を非表示 */
.page:not(.home) .l-topTitleArea {
    display: none !important;
}

/* ② 固定ページのみ・トップページ以外｜余白を完全に消す */
.page:not(.home) .l-content {
    padding-top: 0 !important;
}

◼︎トップページ除外＋固定ページと投稿ページのタイトルを非表示にする

/* === トップページ以外の固定ページ＆投稿ページ｜タイトル非表示 === */

.page:not(.home) .l-topTitleArea,
.single .l-topTitleArea {
    display: none !important;
}

◼︎トップページ除外＋固定ページと投稿ページのタイトルを非表示にする＋余白を消す

/* === トップページ以外の固定ページ＆投稿ページ｜タイトル非表示 余白削除 === */

/* ① トップページ以外の固定と投稿｜タイトル非表示 */
.page:not(.home) .l-topTitleArea,
.single .l-topTitleArea {
    display: none !important;
}

/* ② トップページ以外の固定と投稿｜余白を消す */
.page:not(.home) .l-content,
.single .l-content {
    padding-top: 0 !important;
}

sayaka

表示を確認しながら調整してみてくださいね！

CSSをコピペする際の注意点とコツ

CSSを追加する際は、以下のポイントに気をつけると失敗の確率がぐーんと減るので、参考にしてみてくださいね。

① .page と .l-topTitleArea の間には必ず「半角スペース」を入れる

ここを詰めて.page.l-topTitleArea とぎゅっと詰めて入れたり、.page.　l-topTitleArea と間に全角スペースが入っている場合は、うまく効かなくなってしまいます。

半角スペースを1つ空けるのを忘れないようにしてくださいね。

② 表示が変わらない時はキャッシュをクリアする

CSSを追加したのに、タイトルが非表示にならない場合は、リロードするか、シークレットウィンドウで確認してみてください。

ブラウザが古いデータを記憶している（キャッシュが残っている）可能性があります。

おわりに

CSSを追加するだけで、さくっと非表示にできるのは、便利ですし楽ちんですよね。

最初は、どこかに設定があるはずだと、カスタマイズや投稿画面を隅から隅まで探していました。

ですが現時点では、SWELLにその設定がないんですよね。
（私は探すのにたくさん時間を使っちゃいました><）

CSSで調整して、理想のサイトデザインにしてくださいね♪

 

くるみ

この記事がためになった♪楽しかった♪という方は

sayaka

公式LINEのご登録をお願いします♪

 

北海道、石川、大阪…全国からご相談いただけて
新規の方に数ヶ月お待ちいただいている状況になれた方法をLINEでこっそりお伝えしています♪

 

▶︎「集客につながるホームページの秘密」が届くLINEを受け取る