最新のSeedProdニュース

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

WordPress のページタイトルを非表示にする

WordPressでページタイトルを非表示にする方法(7つの方法) 

執筆者: 著者アバター ステイシー・コリン
著者アバター Stacey Corrin
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。
    
レビュー担当者: レビュアーアバター ターナー ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同創設者です。彼は20年以上のビジネスおよび開発経験を持ち、彼のプラグインは2500万回以上ダウンロードされています。

要約:WordPressでページタイトルを非表示にする方法(7つの方法)

WordPressでページタイトルを非表示にする方法は7つあります。コード不要のテーマトグルからカスタムCSSまで。簡単な概要はこちらです。

  1. SeedProd – ビジュアルエディターでタイトルブロックをクリックして削除します。コードは不要です。
  2. テーマ設定 – Astra、Neve、GeneratePressなどの人気テーマには、各ページにタイトルを切り替える機能が組み込まれています。
  3. Elementor – Elementorのページ設定パネルを使用して、「タイトルの表示」をオフに切り替えます。
  4. フルサイトエディター – 外観 > エディターで、ページテンプレートからタイトルブロックを削除します。
  5. 無料プラグイン – Hide Page and Post Titleをインストールして、ページごとに表示を切り替えます。
  6. CSS(特定のページ) – CSSスニペットで、ページIDとタイトルクラスを使用してdisplay: none;を使用します。
  7. CSS(すべてのページ) – WPCodeを使用して、タイトルクラスにグローバルにdisplay: none;を適用します。

WordPressでページタイトルを非表示にしたいですか? あなただけではありません。きれいなランディングページ、ミニマリストのホームページ、あるいは邪魔になる巨大な見出しを必要としないセールスファネルを構築する際に、何度もこの作業を行ってきました。

一部のWordPressテーマは、すべてのページの先頭に自動的にタイトルを追加しますが、必ずしもそれが望ましいとは限りません。良いニュースは、SEOに影響を与えたり、コーディングを必要としたりすることなく(希望しない限り)削除できることです。

このガイドでは、個々のページ、サイト全体、またはモバイルのような特定のデバイスでページタイトルを非表示にする方法をステップバイステップで説明します。ここでのすべての方法は、最新バージョンのWordPressで動作し、高度なスキルは必要ありません。

ページタイトルを非表示にしたい理由

特にカスタムヘッダーやバナーをすでにデザインしている場合、すべてのページの上部に表示されるタイトルが必要ない場合があります。通常、それらを非表示にするのは次のような場合です。

  • カスタマイズされたメッセージやコールトゥアクションブロックがあるランディングページ
  • テキストの代わりにヒーローセクションやロゴバナーを使用するホームページ
  • コンテンツがそれ自体を物語る「近日公開」またはメンテナンスページ
  • ファーストビューのスペースが重要なセールスまたは製品ページ
WordPress ページタイトルセクションの例

これらの場合、タイトルはデザインがすでに説明していることを繰り返すことがよくあります。それを削除すると、特にモバイルで、レイアウトの柔軟性が高まり、視覚的な階層がすっきりします。

最も簡単な方法:SeedProdを使用してWordPressのページタイトルを非表示にする(ステップバイステップ)

SeedProdの使命は、コードなしでウェブサイトを簡単に構築およびカスタマイズできるようにすることです。

SeedProd ドラッグ&ドロップ WordPress ウェブサイトビルダー

ドラッグアンドドロップのウェブサイトビルダーを使用すると、カスタムWordPressテーマ、ウェブページ、さらにはスタンドアロンのランディングページを作成できます。

また、数回クリックするだけで、任意の単一のページまたはテーマでタイトルを非表示にすることもできます。

当社のテンプレートライブラリには、300以上のランディングページテンプレートとウェブサイトキットがあり、デザインプロセスを簡単に開始できます。ページタイトルをデザインから簡単に削除する方法を確認するために、いずれかを選択しましょう。

まず、SeedProdがWordPressサイトにインストールされ、有効化されていることを確認してください。

これに関してヘルプが必要な場合は、SeedProdのインストールに関するドキュメントを参照してください。

有効化後、WordPress管理画面からSeedProd » Theme Builderに移動します。そこから、Theme Template Kitsボタンをクリックします。

SeedProd テーマテンプレートキット

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

SeedProd WordPress テーマテンプレートキットライブラリ

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

SeedProd WordPress テーマテンプレートキットの選択

デザインを選択する準備ができたら、カーソルを合わせてチェックマークアイコンをクリックします。

サイトキットのインポートは数秒で完了します。完了すると、テーマのフレームワークを構成するテンプレートのリストが表示されます。

SeedProd テーマキットに含まれる個々のテンプレート

各テーマテンプレートは、一貫したデザインと、その目的に固有のコンテンツを備えています。たとえば、ブログページには最新の記事が表示され、ホームページには説明、クライアントロゴ、サービスなどが表示されます。

各テンプレートは、タイトルにカーソルを合わせて「デザインを編集」リンクをクリックすることで編集できます。

ブログページでこれを行いましょう。

ブログページテンプレートの編集

この例では、ブログページに、ページの内容を説明するテキストを含むヘッダーバナーがあることがわかります。これにより、「ブログ」という見出しが冗長になるため、削除できます。

タイトルバナー付きのSeedProdエディターでのブログページ

ページタイトルを削除するには、カーソルを合わせてゴミ箱アイコンをクリックします。

SeedProdを使用してWordPressでページタイトルを削除する

タイトルを削除した後、保存ボタンをクリックして変更を保存します。その後、ページをプレビューしてどのように表示されるかを確認できます。

ページタイトルなしのWordPressページのプレビュー

SeedProdで作成した他のページでも、この手順を繰り返すことができます。

たとえば、ページ » 新規追加に移動してデフォルトの方法でページを作成し、その後SeedProdで編集ボタンをクリックしてデザインを編集できます。

SeedProdでWordPressページを編集する

その後、上記の手順を使用してページタイトルを削除できます。

WordPressページタイトルを非表示にする代替方法

SeedProdを使用することは、ページタイトルを非表示にする方法の1つにすぎません。ウェブサイトのセットアップが異なる場合は、以下の代替方法のいずれかがより適している場合があります。

テーマの設定を使用してページタイトルを非表示にする方法

多くの人気のあるWordPressテーマには、各ページにタイトル表示オプションが含まれており、それらのいずれかをすでに使用している場合は最も簡単な方法です。デザインでファーストビューの上にカスタムヒーローセクションが必要な場合、クライアント構築で実際に時間を節約できるのを見てきました。

最も一般的なテーマで設定を見つける場所は次のとおりです。

  • Astra:ページを編集し、右側のサイドバーにあるAstra設定パネルまでスクロールします。ページタイトルオプションを無効に設定します。
  • Neve:ページを編集し、右側のサイドバーにあるNeveメタオプションセクションを探します。ページタイトル設定を切り替えて非表示にします。
  • GeneratePress:ページを編集し、エディタの下部にあるページ設定セクションを見つけます。ページタイトルを無効にするチェックボックスをオンにします。
  • Kadence: ページを編集し、右側のサイドバーにあるKadence設定セクションを探します。ヘッダーの下で、ページタイトルを非表示に設定します。

お使いのテーマがここにリストされていない場合は、ページ設定パネルでタイトル、ヘッダー、またはページヘッダーというラベルのオプションを確認してください。ほとんどのモダンなテーマには、このトグル機能のいずれかのバージョンが含まれています。

この方法は、手動で無効にしたページでのみタイトルを非表示にします。サイト全体でタイトルを非表示にするには、代わりにフルサイトエディターまたはCSSメソッドを使用してください。

Elementorでページタイトルを非表示にする方法

ページ構築にElementorを使用している場合、独自のタイトル表示設定が組み込まれています。クライアントサイトでElementorを使用しましたが、オプションは簡単に見つかります。

Elementorエディターでページを開き、左上隅にあるハンバーガーメニューをクリックします。ページ設定を選択します。開いたパネルで、タイトルの非表示オプションを見つけてオフに切り替えます。

これはElementorで構築したページにのみ適用されます。Elementor以外のページやサイト全体の変更については、このガイドの別の方法を使用してください。

フルサイトエディター(FSE)を使用してタイトルを非表示にする方法

サイトでWordPress 5.9以降を使用している場合は、フルサイトエディター(FSE)を使用してすべてのページからタイトルを削除できます。この方法は、Neve FSAのようなフルサイト編集をサポートするWordPressテーマにも適用されます。

テーマがFSEをサポートしている場合、WordPress管理画面に「外観 » エディター」オプションが表示されるはずです。

外観エディターオプションが表示されたWordPressダッシュボード

そこから、「エディター」をクリックしてFSEダッシュボードを開くことができます。

エディターが開いたら、左側のパネルにある「テンプレート」の見出しをクリックします。次に、ページタイトルを非表示にしたいテンプレートを選択できます。

WordPressフルサイトエディターテンプレートオプション

この例では、「ページ」オプションをクリックしましょう。

WordPressフルサイトエディターページオプション

次に、右側のプレビューでページタイトルをクリックします。

タイトルの上にツールバーが表示されます。このパネルの右側にある3つのドットをクリックして、その他の設定を表示します。

WordPressページのタイトルを削除するブロック

削除」オプションが表示されるまで下にスクロールし、クリックします。

保存後、このテンプレートを使用しているサイト上のすべてのページからタイトルが消えます。テストウェブサイトでの表示例を以下に示します。

タイトルなしのWordPressページ

プラグインを使用してタイトルを非表示にできますか?

特定のページタイトルを非表示にする別の方法は、タイトル削除プラグインをインストールすることです。

ここでは「Hide Page and Post Title」プラグインを使用します。これは、数回のクリックでページ、投稿、カスタム投稿のタイトルを非表示にできる無料のWordPressプラグインです。

これは、フルサイトエディターをサポートしていないWordPressテーマを使用している場合に適した方法です。

このプラグインのインストール方法については、WordPressプラグインのインストール方法に関するこのガイドを参照してください。

プラグインを有効化したら、WordPressダッシュボードから「ページ » すべてのページ」に移動し、変更したいページを編集します。

エディター内で、右側のサイドバーを見て、「ページと投稿タイトルの非表示」セクションまで下にスクロールします。次に、「タイトルの非表示」の横にあるチェックボックスをクリックするだけです。

WordPressプラグインでWordPressのページタイトルを非表示にする

変更を保存するか、公開ボタンをクリックすることを忘れないでください。ページにアクセスすると、タイトルが消えていることがわかります。

このプラグインを使用してブログ投稿のタイトルを非表示にすることもできます。

WordPressでCSSを使用してページタイトルを非表示にする方法

次の2つの方法は、WordPressでCSSを使用してページタイトルを非表示にし、削除する方法です。これは、タイトルが訪問者には表示されませんが、ページのHTMLコードには引き続き読み込まれることを意味します。

このアプローチの利点は、Googleのような検索エンジンはタイトルを認識し、ページのコンテンツを理解するためにそれを使用できることです。

注意: この方法では、コードスニペットを特定、コピー、貼り付けする必要があります。初心者でこれに慣れていない場合は、上記の方法のいずれかを使用することをお勧めします。

また、変更を加える前にウェブサイトをバックアップしておくことも良い考えです。

CSSを使用して特定のページタイトルを非表示にする

まず、追加のCSSコードを使用して特定のページタイトルを非表示にしましょう。これには、ページIDとクラス名が必要です。

ウェブサイトのバックエンドから、ページ » 全ページに移動し、変更したいページを見つけて、「編集」をクリックします。

ページIDを見つけるためにWordPressページを編集する

次に、アドレスバーのページURLを確認します。そこには、「post=」という単語と数字(例: post=2)を含むセクションがあります。これがページIDなので、次に必要になるためメモしておきましょう。

ブラウザのアドレスバーにあるWordPressページID

次のステップは、WordPressテーマにCSSを追加することです。

テストサイトでは、フルサイトエディターを使用しています。これは、デフォルトではテーマカスタマイザーが含まれていません。そのため、カスタムコードスニペットをWordPressに簡単に追加できるWPCodeプラグインをインストールします。

インストール後、コードスニペット » + 新規追加スニペットに移動します。これにより、さまざまなスニペットタイプから選択できます。

この例では、最初のオプション「カスタムコードを追加」を選択し、スニペットを使用ボタンをクリックします。

WPCodeで新しいコードスニペットを追加

スニペットエディターに入ったら、「コードタイプ」ドロップダウンメニューからCSSスニペットを選択します。次に、次のコードを貼り付けてページタイトルを非表示にします。

「page-id」を、先ほどコピーした値に置き換えることを忘れないでください。

.page-id-2 .wp-block-post-title {
display: none;
}
WPCodeで特定のページタイトルを非表示にするカスタムCSS

スニペットを追加したら、更新をクリックし、ステータスのトグルをアクティブの位置に切り替えます。ページにアクセスしても、ページタイトルは表示されなくなっているはずです。

それでもページタイトルが表示される場合は、テーマが異なるCSSクラスを使用している可能性があります。その場合は、ページのコードを検査して正しいクラスを見つける必要があります。

これを行うには、サイトのフロントエンドで変更したい特定のページにアクセスし、ページタイトルをハイライトして右クリックします。

表示されるドロップダウンで、「要素を検査」オプションをクリックします。

WordPressのページタイトル要素を検査する

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

WordPressでページタイトルのCSSクラスをハイライト表示する開発者コンソール

あなたの場合は、「entry-title」またはそれに類する名前になっている可能性があります。したがって、正しいCSSクラスで前述のコードを調整する必要があります。

最終的なコードは次のようになる場合があります。

.page-id-2 .entry-title {
display: none;
}

このコードをスニペットエディターに貼り付け、変更を保存してアクティブ化します。

ページにアクセスすると、ページタイトルは表示されなくなっているはずです。

CSSを使用してWordPressでページタイトルを非表示にする例

プロのヒント: この方法を使用して投稿タイトルを非表示にすることができます。「page-id」セクションを「post-id」に置き換えます。

CSSで全てのページタイトルを削除する

最後に紹介する方法では、WordPressウェブサイトの全てのページからタイトルを非表示にすることができます。

このためには、ページタイトルのクラスが必要です。前の方法で説明したように、お使いのテーマの正しいページタイトルのクラスを見つけ、以下のスニペットをコードエディタに貼り付けてください。

.entry-title {
display: none;
}
すべてのページでWordPressのページタイトルを非表示にするカスタムCSS。

スニペットを保存して有効化すると、ウェブサイトの全てのページからタイトルが非表示になっているはずです。

トラブルシューティング:ページタイトルが非表示にならない場合

CSSは常に一度でうまくいくとは限りません。最も一般的な問題の解決方法を以下に示します。

CSSを追加してもタイトルが表示されたまま

お使いのテーマは、おそらく.wp-block-post-titleとは異なるCSSクラスを使用しています。正しいクラスを見つけるには、フロントエンドでページを表示し、タイトルを右クリックして「検証」を選択してください。

見出し要素のクラス名を探します。一般的な代替クラスには.entry-title.page-title、または.post-titleなどがあります。そのクラスをコピーしてスニペットを更新してください。

タイトルが消えた後に余分な余白が残る

テーマによっては、タイトルコンテナにマージンやパディングが適用されており、タイトル要素を非表示にしてもそのスペースが残ることがあります。それを削除するには、CSSルールにmargin: 0; padding: 0;を追加してください。

.page-id-2 .wp-block-post-title {
  display: none;
  margin: 0;
  padding: 0;
}

.wp-block-post-titleをお使いのテーマの実際のタイトルクラスに置き換えてください。

テーマのアップデート後にプラグインが機能しなくなった

テーマのアップデートにより、プラグインのCSSルールが無効になることがあります。アップデート後にタイトルが再表示された場合は、カスタムCSSの方法に切り替えてください。これはプラグインベースの非表示よりも信頼性が高い傾向があります。

WordPressでページタイトルを非表示にすることに関するFAQ

WordPressのページタイトルを非表示にすることはSEOに悪影響がありますか?

表示されているタイトルを非表示にしても、タイトルタグがそのまま残っている限り、SEOに悪影響はありません。このガイドの方法は、ページ上の見出しを非表示にしますが、AIOSEOやその他のSEOプラグインで設定されたSEOタイトルはそのまま残します。検索エンジンは、表示されている見出しではなく、ページのHTMLヘッドにあるタイトルタグを読み取ります。WordPress SEOプラグインを使用して、タイトルタグが正しく設定されていることを確認してください。

WooCommerceでページタイトルを非表示にするにはどうすればよいですか?

このガイドと同じ方法でWooCommerceのページタイトルを非表示にすることができます。SeedProdでは、デバイスの表示設定を使用してタイトル要素を非表示にします。CSSの場合は、display: none;を使用してWooCommerceのページタイトルクラスを使用します。一般的な開始点は.woocommerce-page .page-title { display: none; }です。これが最初に機能しない場合は、ブラウザの「検証」を使用して正しいクラスを見つけてください。

CSSを追加してもページタイトルが表示されたままの場合はどうなりますか?

お使いのテーマは、スニペット内のクラスとは異なるCSSクラスを使用している可能性が最も高いです。フロントエンドでタイトルを右クリックして「検証」を選択してください。開発者パネルがタイトル要素をハイライトし、実際のCSSクラスを表示します。一般的なクラス名には.entry-title.page-title.post-titleなどがあります。そのクラスをコピーしてスニペットを更新し、保存してください。問題が解決しない場合は、スニペットがWPCodeで有効になっていることを確認してください。

WordPressでモバイルのみタイトルを非表示にできますか?

はい、SeedProd を使えばこれを簡単に行えます。SeedProd でページを編集し、タイトルブロックをクリックして、左側のサイドバーにある「詳細」タブを開きます。「デバイスの可視性」の下で、「モバイルで非表示」または「タブレットで非表示」をオンにします。変更を保存すると、選択したデバイスにのみタイトルが表示されます。

SeedProd 高度なタブにデバイス表示オプションが表示されている
SeedProdを使用してモバイルおよびタブレットでWordPressのページタイトルを非表示にする
SeedProdを使用してWordPressでページタイトルを非表示にするプレビュー
すべての WordPress テーマには、タイトルを非表示にする組み込みオプションがありますか?

すべてのテーマにタイトル表示切り替え機能が含まれているわけではありませんが、ほとんどの人気のあるモダンなテーマには含まれています。Astra、Neve、GeneratePress、Kadence はすべて、ブロックエディタのサイドバーにページごとのタイトル設定があります。テーマにこのオプションがない場合は、代わりに「Hide Page and Post Title」プラグインまたは CSS メソッドを使用してください。どちらもテーマに関係なく機能します。

次に、その他の WordPress レイアウトチュートリアル

このステップバイステップガイドが、WordPress でページタイトルを非表示にする方法を学ぶのに役立ったことを願っています。

レイアウトをさらにカスタマイズしたいですか?これらのガイドでは、デバイス間でページ表示、マージン、デザイン要素を調整する方法を示しています。

思い通りのページを作成する準備はできましたか?SeedProd を入手して、コードを書かずにすべてのデザインの詳細を完全に制御しましょう。

お読みいただきありがとうございます!皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTubeX および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。

著者アバター
Stacey Corrin コンテンツマーケティングスペシャリスト
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

[weglot_switcher]