Cocoon固定ページタイトルと記事タイトルを非表示にする方法

WordPressテーマのCocoonで固定ページタイトルや記事タイトルを消したいのに、やり方が分からなくて手が止まっていませんか？

cocoonで固定ページ・記事タイトルを非表示にしたい理由を整理しよう

タイトルを消したくなるよくあるシーン

Cocoonの固定ページや投稿記事で、どんな場面でタイトルを消したくなるのか、代表的なパターンを整理してみます。

ページの種類	よくある目的	タイトルの扱い
商品・サービスのLP	成約率を上げたい、デザインを整えたい	ページ上部にはキャッチコピーを大きく置きたいので、記事タイトルは非表示にしたい
プロフィール・自己紹介ページ	自己ブランディング、信頼感アップ	最初に写真と自己紹介文を見せたいので、タイトルは邪魔に感じることがある
お問い合わせフォームページ	迷わず入力してもらいたい	タイトルはあっても構わないが、極力シンプルな画面にしたくて非表示にしたくなる
プライバシーポリシーなどの法的ページ	信頼感と分かりやすさ	タイトルを残す場合も多いが、デザインによっては別の見出しで代用したくなる

私の場合は、サービスのLPとプロフィールページで、「このタイトルがあると何だかダサいな…」と感じることが多かったです。

あなたが今扱っているページがどのタイプに近いのか、なんとなくイメージしておくと、このあと読みやすくなります。

「タイトルを消したい人」が実は気にしていること

「Cocoon 固定ページ タイトルを非表示にしたい」「Cocoon 記事タイトルを非表示にしたい」と検索する人は、次のような不安や疑問を抱えていることが多いです。

この記事では、こういった不安をつぶしながら「Cocoonの標準機能だけでできる方法」と「少し踏み込んでCSSで調整する方法」の両方を、順番に見ていきます。

まずは結論：一番ラクなのはCocoon標準機能でタイトル非表示

固定ページでタイトルを非表示にする基本手順

固定ページのタイトルを非表示にする、一番シンプルな方法は「ページ設定」の項目をオンにするやり方です。ブロックエディタ（Gutenberg）を使っている想定で、流れをまとめます。

ステップ	操作内容
1	WordPress管理画面で「固定ページ」を開き、タイトルを消したいページを編集する
2	編集画面を下までスクロールし、「ページ設定」というCocoonの設定ボックスを探す
3	「タイトルを表示しない」というチェック項目にチェックを入れる
4	ページを「更新」または「公開」する
5	実際のページを表示して、タイトルが消えているか確認する

この方法なら、コードを書かなくても固定ページのタイトルを非表示にできます。

私も、LPやプロフィールなど「タイトルが邪魔だな」と感じる固定ページは、まずこの方法でサクッと消してしまうことが多いです。

投稿記事（ブログ記事）のタイトルを非表示にする手順

次は、通常のブログ記事、つまり「投稿」のタイトルを隠したい場合です。

やることはほとんど同じですが、Cocoonの設定ボックスが表示される場所が少し違います。

「固定ページでは本文の下のほう」「投稿では右サイドバー」と覚えておくと、迷いにくくなります。

ブログ記事の中で、一部の記事だけをLPっぽい構成にしたいときにも、このチェックボックスが活躍します。

CSSでcocoon固定ページ・記事タイトルを非表示にする方法

サイト全体の固定ページタイトルを非表示にするCSS

まずは、「すべての固定ページのタイトルをまとめて非表示にしたい」というケースです。

この場合は、Cocoonの「追加CSS」や子テーマのstyle.cssに、固定ページ共通のタイトル部分を指定するCSSを書き足していきます。

考え方は次の通りです。

• 固定ページに共通して付いているクラス（例：pageやentry-titleなど）を特定する
• そのクラスを指定して、「display:none;」などのスタイルを当てる
• 保存して、固定ページをいくつか開き、想定通りにタイトルが消えているか確認する

実際に使うクラス名は、使っているスキンやCocoonのバージョン、カスタマイズ状況によって変わることがあります。

ブラウザの「検証」機能で、タイトル部分にどんなクラスが付いているかを一度確認してから、CSSを書くのがおすすめです。

トップページだけタイトル非表示にするCSS

次は、「サイトのトップページだけタイトルを消したい」というパターンです。

固定ページをフロントページに設定している場合は、とくに出番の多いやり方です。

目的	対象	考え方のポイント
トップページだけタイトルを非表示	ホームとして設定している固定ページ	bodyタグに付くhomeやpageなどのクラスと、タイトルのクラスを組み合わせて指定する
ブログ一覧ページだけタイトルを非表示	投稿一覧のトップページ	blogやarchiveなど、そのページ特有のクラスを確認して使う
特定のランディングページだけ非表示	LP専用の固定ページ	ページIDやスラッグを使って、ピンポイントで指定する

Cocoonを含む多くのテーマでは、トップページにhomeというクラスが付きます。静的なフロントページの場合はpageなども同時に付くことが多いです。

ただし、ブログ一覧をトップにしているか、固定ページをトップにしているかでクラス構成が変わることがあります。必ずブラウザで実際のクラスを確認してから、CSSを適用するようにしましょう。

特定の固定ページ・記事だけタイトルを非表示にするCSS

「サイト全体ではなく、このページだけタイトルを消したい」というときは、ページIDやCocoonの「カスタムCSS」欄を使うと便利です。

よく使うパターンを表にまとめると、次のようになります。

パターン	説明	向いているケース
ページIDで指定	#post-数字 のようなIDで、特定のページや記事のタイトルだけを非表示にする	LPやプロフィールなど、限られたページのタイトルだけ消したいとき
カスタムCSS欄で指定	投稿・固定ページ編集画面の下部にある「カスタムCSS」欄にスタイルを書く	コードを1か所にまとめるのが苦手で、ページごとに完結させたいとき

ページIDを使う方法は、Cocoonに限らず、多くのWordPressテーマで使える王道のテクニックです。

一方で、CocoonのカスタムCSS欄は、ページ単位で見た目を調整したいときにとても便利です。記事ごとに「このページはタイトルを消す」「こっちは残す」といった細かい調整がしやすくなります。

まずはテスト用のページでカスタムCSS欄を触ってみて、慣れてきたらまとめて管理したいものだけ追加CSSや子テーマに移す、という使い方もおすすめです。

ヘッダーのサイトタイトルだけ非表示にしたいときのcocoon設定

記事タイトルとサイトタイトルの違いを整理しよう

同じ「タイトル」という言葉でも、実際には次の2種類があります。

名前	画面上の位置	役割
記事タイトル（ページタイトル）	本文のすぐ上にある大きな見出し（多くはH1）	そのページが何について書かれているかを示す
サイトタイトル（ブログ名）	サイト上部のヘッダー、ロゴ付近	サイト全体の名前やブランドを示す

この記事で主に扱っているのは、前者の「記事タイトル（ページタイトル）」を非表示にする話です。

「ロゴの横にあるサイト名を消したい」「ヘッダーを画像だけにしたい」といった場合は、ヘッダー部分のCSSを調整する必要があります。

どちらを変更したいのかを取り違えると、「思っていた場所のタイトルが消えない・逆に消えてほしくないところが消えた」ということになるので要注意です。

サイトタイトルだけ非表示にする考え方

サイトタイトルだけを非表示にしたい場合も、基本的な考え方は記事タイトルのときと同じです。

まず、Cocoonのヘッダーにあるサイトタイトル部分のクラスを検証ツールで確認し、そのクラスに対してだけ「display:none;」を設定します。

こういった細かい調整も、CSSでクラスやメディアクエリを使えば対応できます。

ただし、ヘッダーはナビゲーションとの関係も深く、消しすぎると「今どのサイトを見ているのか」が分かりにくくなることもあります。どこまで非表示にするかは、サイトの構成や読者層を考えながら決めていきましょう。

タイトル非表示とSEO・デザインのバランスを考える

タイトル欄を空欄にするのがNGな理由

ときどき、「固定ページのタイトル欄を空欄にしておけば、タイトルが出なくなるからそれでいいよね」と考えてしまうケースがあります。

ですが、これは正直あまりおすすめできません。

• 管理画面の一覧で、どのページか一目で分からなくなる
• スラッグやパーマリンクを決めるときに、意図しない形になりやすい
• 検索結果で、ページの内容が伝わりにくくなる

Cocoonでタイトルを非表示にしたいときは、「内部的にはきちんとタイトルを付ける」「見た目だけをCocoonの設定やCSSで消す」という考え方が安心です。

タイトル欄は必ず埋めたうえで、その後の表示をどうするかを考えるようにしましょう。

検索結果・OGPとタイトル非表示の関係

もうひとつ気になるのが、「タイトルを画面上から消したら、検索結果やSNSシェアでどう見えるのか」という点です。

ここも、実際の挙動をイメージしながら整理してみます。

項目	タイトルを完全に削除した場合	タイトルを設定したうえでCSSや設定で非表示にした場合
検索結果のタイトル	別の要素から自動で拾われたり、思ったのと違うタイトルになることがある	設定したタイトルが基本的にそのまま使われる
SNSシェア（OGP）	シェアしたとき、分かりにくいタイトルになることがある	狙ったキーワードや訴求をタイトルに込めて、そのまま表示させやすい
読者から見た分かりやすさ	何のページか判断しにくくなる	ページ上では別の見出しやアイキャッチで補いやすい

つまり、「内部的なタイトルは大事に残しておく」「見た目だけを調整する」というスタンスなら、SEOやSNSでの見え方を崩さずにデザインを変えられます。

検索エンジンやSNSに向けた「公式のタイトル」と、ページ上で読者に見せる「デザインとしての見出し」を、意識して分けて考えると失敗しにくくなります。

目的別おすすめパターン早見表

最後に、「結局どの方法を選べばいいの？」というときに使える、目的別のおすすめパターンをまとめます。

目的・シーン	おすすめの方法	理由
LP全体をデザイン重視にしたい	固定ページの「タイトルを表示しない」にチェックしつつ、必要に応じてヘッダーなどをCSSで調整	見た目を大きく変えながら、内部的なタイトルやSEOの情報はしっかり保てる
ブログ記事の一部だけLP風にしたい	投稿のページ設定で「タイトルを表示しない」にチェック	普段のブログ記事はタイトルを表示しつつ、必要な記事だけ非表示にできる
プライバシーポリシーなどの法的ページ	タイトルは表示したまま、フォントサイズや余白だけCSSで調整	読者の安心感を保ちつつ、読みやすいデザインにできる
サイト全体でタイトルの見た目を統一したい	共通のCSSでH1のスタイルを整え、個別の非表示はなるべくCocoon標準機能で制御	メンテナンスしやすく、テーマやスキンを変えたときにも対応しやすい

Cocoonの固定ページや記事タイトルの非表示は、「ページの目的」と「読者にどう感じてほしいか」をセットで考えると、自然と最適な組み合わせが見えてきます。

よくある質問：cocoon 固定ページ タイトル 非表示 cocoon 記事タイトル 非表示の疑問

Q1.Cocoonで固定ページのタイトルを非表示にするとSEOは下がりますか？

A. タイトル自体はきちんと設定しておき、Cocoonの「タイトルを表示しない」やCSSで「見た目だけ」を消しているのであれば、SEOへの悪影響は大きくありません。

むしろ、ページの目的に合ったレイアウトにすることで、滞在時間やコンバージョン率が上がることもあります。

注意したいのは、「タイトル欄を空欄にする」「意味のない文字列を入れる」といった極端なやり方です。こうした方法は検索結果で内容が伝わりにくくなるので、避けたほうが無難です。

Q2.Cocoonで記事タイトルを非表示にした記事をSNSでシェアするとどうなりますか？

A. WordPressの投稿画面で記事タイトルをしっかり設定していれば、ページ上でタイトルを非表示にしていても、SNSでシェアしたときにはそのタイトルが基本的に使われます。

つまり、「画面上ではタイトルを隠しつつ、SNS上ではタイトル付きで見せる」ということが可能です。

ただし、OGP画像やOGP用のタイトル・ディスクリプションを別途設定していない場合、意図しないテキストが表示されることもあります。SNSでの見え方が気になる場合は、OGP設定のプラグインやCocoonのSNS設定も合わせて確認してみてください。

Q3.Cocoonの「タイトルを表示しない」が見つからないときはどうすればいいですか？

A. まず、「固定ページを編集しているのか」「投稿記事を編集しているのか」を確認してみてください。

固定ページの場合は本文の下、投稿の記事の場合は右側のサイドバーに、Cocoonのページ設定が表示されることが多いです。

それでも見つからない場合は、

• クラシックエディタを使っている
• エディタの表示設定でサイドバーやメタボックスが非表示になっている
• スキンやプラグインの影響で表示場所が変わっている

といった可能性があります。

そのときは、Cocoon公式のマニュアルやフォーラムで、自分の環境に近い事例を探してみると、解決のヒントが見つかりやすいです。

まとめ：cocoonでタイトル非表示を使いこなして、見やすく伝わるページにしよう

ポイントをもう一度整理します

今日からできる最初の一歩としては、「タイトルを消したいページ」を1つだけ選び、Cocoonのページ設定を開いて「タイトルを表示しない」にチェックを入れてみてください。

そのうえで、必要に応じてCSSで細かい見た目を整えていけば、読者にとっても、自分にとっても気持ちのいいページが少しずつ増えていきます。