WordPressでページタイトルを隠したい?あなただけではありません。クリーンなランディングページやミニマルなホームページ、あるいは巨大な見出しが邪魔にならないセールスファネルを構築する際に、私は何度もこうしなければならなかった。
WordPressのテーマによっては、自動的にすべてのページのトップにタイトルが追加されるものもありますが、それは必ずしもあなたが望むものではありません。良いニュースは、SEOに影響を与えることなく、またコードを書く必要もなく(書きたい場合を除く)、タイトルを削除できることだ。
このガイドでは、個々のページ、サイト全体、またはモバイルのような特定のデバイス上で、ページタイトルを非表示にする方法を順を追って説明します。どの方法もWordPressの最新バージョンで動作し、高度なスキルは必要ありません。
クイックアンサーSeedProdのようなページビルダー、Full Site Editor、無料のプラグイン、またはカスタムCSSを使用して、WordPressのページタイトルを隠すことができます。これらの方法は、SEOを維持したまま、表示されているタイトルを削除します。
目次
ページタイトルを隠す理由
特にカスタムヘッダーやバナーをすでにデザインしている場合は、すべてのページで上部にタイトルを表示する必要はありません。特に、カスタムヘッダーやバナーをすでにデザインしている場合はなおさらです:
- カスタマイズされたメッセージやコール・トゥ・アクション・ブロックを含むランディングページ
- テキストの代わりにヒーロー・セクションやロゴ・バナーを使用したホームページ
- 近日公開またはメンテナンスページで、コンテンツが自らを語る。
- 折り返しの上のスペースが重要な販売ページや製品ページ

このような場合、タイトルがすでに説明していることを繰り返してしまうことがよくあります。タイトルを削除することで、レイアウトの自由度が増し、特にモバイルでは視覚的な階層がすっきりします。
最も簡単な方法:SeedProdを使ってWordPressのページタイトルを隠す(ステップバイステップ)
SeedProdの使命は、コードなしで簡単にウェブサイトを構築し、カスタマイズできるようにすることです。

ドラッグアンドドロップでウェブサイトを作成することができ、WordPressのカスタムテーマ、ウェブページ、さらに独立したランディングページを作成することができます。
また、数回クリックするだけで、どのページやテーマでもタイトルを非表示にすることができる。
私たちのテンプレートライブラリには、デザインプロセスを開始するための300以上のランディングページテンプレートとウェブサイトキットがあります。その中から1つ選んで、デザインからページタイトルをいかに簡単に削除できるかを見てみましょう。
TL;DR:SeedProdでページタイトルを削除するには、ページデザインを編集してタイトルブロックを選択し、ゴミ箱アイコンをクリックします。方法は以下の通りです。
まず、WordPressサイトにSeedProdがインストールされ、有効になっていることを確認してください。
SeedProdをインストールする際にヘルプが必要な場合は、SeedProdのインストールに関するドキュメントをご覧ください。
アクティベーション後、WordPress管理画面からSeedProd " Theme Builderにアクセスしてください。そこから、テーマテンプレートキットボタンをクリックします。

これで、さまざまなタイプのウェブサイトのデザインを含むテンプレートライブラリが表示されます。

虫眼鏡のアイコンをクリックすると、どのデザインも詳しく見ることができます。デモは新しいブラウザのタブまたはウィンドウで開きます。

デザインを選ぶ準備ができたら、デザインにカーソルを合わせてチェックマークアイコンをクリックします。
サイトキットのインポートは数秒で完了します。完了すると、テーマのフレームワークを形成するテンプレートのリストが表示されます。

各テーマテンプレートは、一貫したデザインとその目的に特化したコンテンツを持っています。例えば、ブログページには最近の投稿が掲載され、ホームページには説明文、クライアントのロゴ、サービスなどが掲載されています。
各テンプレートのタイトルにカーソルを合わせ、「Edit Design」リンクをクリックすると編集できます。
これをブログ・ページでやってみよう。

この例では、ブログページにヘッダーバナーがあり、そのページについて説明するテキストがあるのがわかります。このため、'Blog'の見出しは冗長になるので、削除することができます。

ページタイトルを削除するには、その上にマウスカーソルを置いてゴミ箱アイコンをクリックするだけです。

タイトルを削除したら、「保存」ボタンをクリックして変更を保存します。その後、ページをプレビューして、どのように見えるかを確認することができます。

SeedProdで作成する他のページでも、この手順を繰り返すことができます。
例えば、デフォルトの方法でページを作成するには、Pages " Add New Pageに進み、Edit With SeedProdボタンをクリックしてデザインを編集します。

その後、上記の手順でページタイトルを削除することができます。
WordPressのページタイトルを隠す別の方法
WordPressページビルダーを使用することは、ページタイトルを非表示にする方法のひとつです。あなたのウェブサイトの設定が異なる場合は、以下の代替方法のいずれかが適しているかもしれません。
フルサイトエディタ(FSE)を使ってタイトルを非表示にする方法
WordPress 5.9以降のバージョンを使用している場合は、フルサイトエディタ(FSE)を使用してすべてのページからタイトルを削除できます。この方法は、Neve FSAのようなフルサイト編集に対応したWordPressテーマにも適用されます。
お使いのテーマがFSEに対応している場合、WordPressの管理画面に「外観 " エディター」オプションが表示されるはずです。

そこからEditorをクリックしてFSEダッシュボードを開くことができます。
エディターが開いたら、左側のパネルにある「テンプレート」の見出しをクリックしてください。次に、ページタイトルを非表示にするテンプレートを選択します。

この例では、Pagesオプションをクリックしてみましょう。

次に、右側のプレビューでページタイトルをクリックする。
タイトルの上にツールバーが表示されます。このパネルの右側にある3つの点をクリックすると、その他の設定が表示されます。

削除オプションが表示されるまで下にスクロールし、それをクリックする。
保存すると、このテンプレートを使用しているサイト上のすべてのページからタイトルが消えます。以下は、テストサイトでの表示例です:

プラグインを使ってタイトルを隠すことはできますか?
特定のページタイトルを非表示にするもう1つの方法は、タイトルリムーバープラグインをインストールすることです。
ここでは、Hide Page and Post Titleプラグインを使用します。数回クリックするだけで、ページ、投稿、カスタム投稿タイトルを非表示にできる無料のWordPressプラグインです。
フルサイトエディタに対応したWordPressテーマを使っていない場合は、この方法が良いだろう。
このプラグインのインストールにヘルプが必要な場合は、WordPressプラグインのインストール方法についてのガイドを参照してください。
プラグインを有効化したら、WordPressのダッシュボードからページ " すべてのページに移動し、変更したいページを編集します。
エディター内で右側のサイドバーを見て、「ページと投稿のタイトルを隠す」セクションまでスクロールダウンする。あとは、「タイトルを隠す」の隣にあるチェックボックスをクリックするだけです。

変更を保存するか、公開ボタンをクリックすることを忘れないでください。あなたのページにアクセスすると、タイトルが消えているのがわかります。
また、このプラグインを使ってブログ記事のタイトルを非表示にすることもできる。
WordPressでCSSを使ってページタイトルを隠す方法
次の2つの方法は、CSSを使ってWordPressのページタイトルを隠したり削除したりする方法です。つまり、タイトルは訪問者からは隠されますが、ページのHTMLコードでは読み込まれます。
この方法の利点は、Googleのような検索エンジンがタイトルを知っていて、あなたのページのコンテンツを理解するために使用できることです。
CSSを使って特定のページタイトルを隠す
まずは、CSSコードを追加して、特定のページ・タイトルを非表示にしてみよう。そのために必要なのは、ページIDとクラス名だけです。
ウェブサイトのバックエンドから、ページ " すべてのページに移動し、変更したいページを見つけ、編集をクリックします。

アドレスバーのページのURLを見てください。「post=2」のように、「post=」と数字のセクションがあります。これがあなたのページIDです。

次のステップは、WordPressテーマにCSSを追加することです。
テストサイトでは、Full Site Editorを使用しており、デフォルトではテーマカスタマイザーが含まれていない。そこで、WordPressにカスタムコードスニペットを簡単に追加できるWPCodeプラグインをインストールする。
インストール後、Code Snippets " + Add New Snippetに移動し、様々なスニペットタイプから選択することができます。
この例では、最初のオプション「Add Your Custom Code」をハイライトし、「Use Snippet」ボタンをクリックします。

スニペット・エディターに入ったら、「コード・タイプ」ドロップダウンメニューから「CSSスニペット」を選択します。そして、ページタイトルを隠すために以下のコードを貼り付けます。
page-id」を先ほどコピーした値に置き換えるのを忘れないこと。
.page-id-2 .wp-block-post-title {
display: none;
}

スニペットを追加したら、Updateをクリックし、Status toggleをActiveにします。ページにアクセスしてもページタイトルが表示されなくなります。
ページタイトルがまだ表示されている場合は、テーマが異なるCSSクラスを使っている可能性があります。この場合、ページのコードを調べて正しいクラスを見つける必要があります。
これを行うには、サイトのフロントエンドで変更したい特定のページにアクセスし、ページタイトルをハイライトして右クリックします。
表示されたドロップダウンで、Inspect elementオプションをクリックします。

ページタイトルがソースコードでハイライトされた新しいパネルが表示されます。この例では異なるテーマを使用しているため、ページタイトルのクラスも異なることがわかります。

あなたのは'entry-title'とかいう名前かもしれない。したがって、先ほどのコードを正しいCSSクラスで調整する必要があります。
最終的なコードはこのようになる:
.page-id-2 .entry-title {
display: none;
}
このコードをスニペット・エディターに貼り付け、保存して変更を有効にする。
あなたのページにアクセスすると、ページタイトルが表示されなくなるはずです。

CSSですべてのページタイトルを削除する
最後に紹介するのは、WordPressウェブサイトのすべてのページからタイトルを非表示にする方法です。
そのために必要なのは、ページタイトルクラスだけです。ですから、前の方法で強調したように、あなたのテーマに合ったページタイトルクラスを見つけて、次のスニペットをコードエディターに貼り付けてください:
.entry-title {
display: none;
}

スニペットを保存して有効にすると、ウェブサイトのすべてのページからタイトルが非表示になることが確認できるはずです。
WordPressでページタイトルを非表示にするFAQ
ページタイトルを隠すことはSEOに影響しますか?
検索エンジンはページの内容を理解するためにページタイトルを頼りにしています。ページタイトルを削除すると、検索エンジンの検索結果にインデックスされにくくなり、ランク付けされにくくなります。
これに対処するには、WordPressのSEOプラグインを使用して、ページのSEOタイトル(タイトルタグ)を微調整することをお勧めします。そうすれば、ユーザーには見えなくても、検索エンジンにはタイトルが表示されます。
ページタイトルの欄を空白にすることはできないのですか?
技術的にはWordPressのページタイトル欄を空白にすることもできますが、タイトル要素がないことは検索エンジンに何も情報を与えず、ページの可視性を損なう可能性があるため、お勧めしません。
さらに、フィールドにタイトルがなくても、WordPressは多くの場合、デフォルトのタイトルを生成します。これは、あなたのサイト名や投稿ID、または似たようなものかもしれない。最適化されていないため、SEOの役には立たないだろう。
モバイル端末でのみタイトルを非表示にできますか?
SeedProdを使用してウェブサイトをカスタマイズしている場合、モバイル、タブレット、デスクトップデバイスでページタイトルを選択的に非表示にすることができます。
ページを編集し、ブロック編集でページタイトルをハイライトし、左側のサイドバーで「詳細」タブを選択するだけです。

そこから、Device Visibilityオプションを選択し、'Hide on Mobile'と'Hide on Tablet'オプションを切り替えます。

下のツールバーのプレビューアイコンをクリックすると、タイトルがグレーアウトしているのがわかります。これは、変更を保存した後、訪問者からブロックが隠されることを意味します。

WooCommerceでページのタイトルを隠すには?
WooCommerceでページのタイトルを非表示にするには、このガイドと同じ多くの方法を使用できます。例えば、SeedProdでは、デバイスの表示設定でタイトル要素を非表示にするだけです。
WooCommerceページのタイトルクラスを見つけることで、カスタムCSSを使用することもできます。
タイトルクラスは我々とは異なるかもしれないが、以下に例を挙げる:
.woocommerce-page .page-title {
display: none;
}
前回の方法と同様に、このオプションはWooCommerceページからすべてのページタイトルを削除します。
次は、WordPressレイアウトのチュートリアルです。
このステップバイステップのガイドが、WordPressでページタイトルを非表示にする方法を学ぶのにお役に立てば幸いです。
レイアウトをさらにカスタマイズしたいですか?これらのガイドでは、デバイス間でページの表示、余白、デザイン要素を微調整する方法をご紹介します:
- WordPressのモバイル表示で画像を非表示にする方法
- 準備が整うまでWordPressサイトを隠す方法
- WordPressでブログのレイアウトを変更する方法
- WordPressで余白を変更する方法
お読みいただきありがとうございました!ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X(旧Twitter)、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。