シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

ページタイトルを隠す WordPress

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

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

WordPressでページタイトルを隠したい?あなただけではありません。クリーンなランディングページやミニマルなホームページ、あるいは巨大な見出しが邪魔にならないセールスファネルを構築する際に、私は何度もこうしなければならなかった。

WordPressのテーマによっては、自動的にすべてのページのトップにタイトルが追加されるものもありますが、それは必ずしもあなたが望むものではありません。良いニュースは、SEOに影響を与えることなく、またコードを書く必要もなく(書きたい場合を除く)、タイトルを削除できることだ。

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

クイックアンサーSeedProdのようなページビルダー、Full Site Editor、無料のプラグイン、またはカスタムCSSを使用して、WordPressのページタイトルを隠すことができます。これらの方法は、SEOを維持したまま、表示されているタイトルを削除します。

目次

ページタイトルを隠す理由

特にカスタムヘッダーやバナーをすでにデザインしている場合は、すべてのページで上部にタイトルを表示する必要はありません。特に、カスタムヘッダーやバナーをすでにデザインしている場合はなおさらです:

  • カスタマイズされたメッセージやコール・トゥ・アクション・ブロックを含むランディングページ
  • テキストの代わりにヒーロー・セクションやロゴ・バナーを使用したホームページ
  • 近日公開またはメンテナンスページで、コンテンツが自らを語る。
  • 折り返しの上のスペースが重要な販売ページや製品ページ
WordPressのページタイトル部分の例

このような場合、タイトルがすでに説明していることを繰り返してしまうことがよくあります。タイトルを削除することで、レイアウトの自由度が増し、特にモバイルでは視覚的な階層がすっきりします。

最も簡単な方法:SeedProdを使ってWordPressのページタイトルを隠す(ステップバイステップ)

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

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

ドラッグアンドドロップでウェブサイトを作成することができ、WordPressのカスタムテーマ、ウェブページ、さらに独立したランディングページを作成することができます。

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

私たちのテンプレートライブラリには、デザインプロセスを開始するための300以上のランディングページテンプレートとウェブサイトキットがあります。その中から1つ選んで、デザインからページタイトルをいかに簡単に削除できるかを見てみましょう。

TL;DR:SeedProdでページタイトルを削除するには、ページデザインを編集してタイトルブロックを選択し、ゴミ箱アイコンをクリックします。方法は以下の通りです。

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

SeedProdをインストールする際にヘルプが必要な場合は、SeedProdのインストールに関するドキュメントをご覧ください。

アクティベーション後、WordPress管理画面からSeedProd " Theme Builderにアクセスしてください。そこから、テーマテンプレートキットボタンをクリックします。

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

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

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

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

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

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

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

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

各テーマテンプレートは、一貫したデザインとその目的に特化したコンテンツを持っています。例えば、ブログページには最近の投稿が掲載され、ホームページには説明文、クライアントのロゴ、サービスなどが掲載されています。

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

これをブログ・ページでやってみよう。

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

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

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

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

SeedProdを使ってWordPressのページタイトルを削除する

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

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

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

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

SeedProdでWordPressページを編集する

その後、上記の手順でページタイトルを削除することができます。

WordPressのページタイトルを隠す別の方法

WordPressページビルダーを使用することは、ページタイトルを非表示にする方法のひとつです。あなたのウェブサイトの設定が異なる場合は、以下の代替方法のいずれかが適しているかもしれません。

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

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

お使いのテーマがFSEに対応している場合、WordPressの管理画面に「外観 " エディター」オプションが表示されるはずです。

WordPressのダッシュボードに「外観エディタ」オプションが表示される

そこからEditorをクリックしてFSEダッシュボードを開くことができます。

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

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

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

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

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

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

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

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

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

タイトルのないWordPressページ

プラグインを使ってタイトルを隠すことはできますか?

特定のページタイトルを非表示にするもう1つの方法は、タイトルリムーバープラグインをインストールすることです。

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

フルサイトエディタに対応したWordPressテーマを使っていない場合は、この方法が良いだろう。

このプラグインのインストールにヘルプが必要な場合は、WordPressプラグインのインストール方法についてのガイドを参照してください。

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

エディター内で右側のサイドバーを見て、「ページと投稿のタイトルを隠す」セクションまでスクロールダウンする。あとは、「タイトルを隠す」の隣にあるチェックボックスをクリックするだけです。

WordPressプラグインでWordPressのページタイトルを隠す

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

また、このプラグインを使ってブログ記事のタイトルを非表示にすることもできる。

WordPressでCSSを使ってページタイトルを隠す方法

次の2つの方法は、CSSを使ってWordPressのページタイトルを隠したり削除したりする方法です。つまり、タイトルは訪問者からは隠されますが、ページのHTMLコードでは読み込まれます。

この方法の利点は、Googleのような検索エンジンがタイトルを知っていて、あなたのページのコンテンツを理解するために使用できることです。

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

また、変更を加える前に、ウェブサイトのバックアップを取ることをお勧めします。

CSSを使って特定のページタイトルを隠す

まずは、CSSコードを追加して、特定のページ・タイトルを非表示にしてみよう。そのために必要なのは、ページIDとクラス名だけです。

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

ワードプレスのページを編集する

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

ブラウザのアドレスバーにWordPressのページIDが表示される

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

テストサイトでは、Full Site Editorを使用しており、デフォルトではテーマカスタマイザーが含まれていない。そこで、WordPressにカスタムコードスニペットを簡単に追加できるWPCodeプラグインをインストールする。

インストール後、Code Snippets " + Add New Snippetに移動し、様々なスニペットタイプから選択することができます。

この例では、最初のオプション「Add Your Custom Code」をハイライトし、「Use Snippet」ボタンをクリックします。

WPCodeに新しいコードスニペットを追加する

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

page-id」を先ほどコピーした値に置き換えるのを忘れないこと。

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

スニペットを追加したら、Updateをクリックし、Status toggleをActiveにします。ページにアクセスしてもページタイトルが表示されなくなります。

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

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

表示されたドロップダウンで、Inspect elementオプションをクリックします。

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

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

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

あなたのは'entry-title'とかいう名前かもしれない。したがって、先ほどのコードを正しいCSSクラスで調整する必要があります。

最終的なコードはこのようになる:

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

このコードをスニペット・エディターに貼り付け、保存して変更を有効にする。

あなたのページにアクセスすると、ページタイトルが表示されなくなるはずです。

WordPressでCSSを使ってページタイトルを隠す例

プロからのアドバイス:この方法で投稿タイトルを隠すことができます。page-idセクションをpost-idに置き換えるだけです。

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

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

そのために必要なのは、ページタイトルクラスだけです。ですから、前の方法で強調したように、あなたのテーマに合ったページタイトルクラスを見つけて、次のスニペットをコードエディターに貼り付けてください:

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

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

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

ページタイトルを隠すことはSEOに影響しますか?

検索エンジンはページの内容を理解するためにページタイトルを頼りにしています。ページタイトルを削除すると、検索エンジンの検索結果にインデックスされにくくなり、ランク付けされにくくなります。

これに対処するには、WordPressのSEOプラグインを使用して、ページのSEOタイトル(タイトルタグ)を微調整することをお勧めします。そうすれば、ユーザーには見えなくても、検索エンジンにはタイトルが表示されます。

ページタイトルの欄を空白にすることはできないのですか?

技術的にはWordPressのページタイトル欄を空白にすることもできますが、タイトル要素がないことは検索エンジンに何も情報を与えず、ページの可視性を損なう可能性があるため、お勧めしません。

さらに、フィールドにタイトルがなくても、WordPressは多くの場合、デフォルトのタイトルを生成します。これは、あなたのサイト名や投稿ID、または似たようなものかもしれない。最適化されていないため、SEOの役には立たないだろう。

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

SeedProdを使用してウェブサイトをカスタマイズしている場合、モバイル、タブレット、デスクトップデバイスでページタイトルを選択的に非表示にすることができます。

ページを編集し、ブロック編集でページタイトルをハイライトし、左側のサイドバーで「詳細」タブを選択するだけです。

SeedProd詳細ブロック設定

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

SeedProdを使ってモバイルとタブレットでWordPressのページタイトルを隠す

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

SeedProdを使ったWordPressのページタイトル非表示のプレビュー

WooCommerceでページのタイトルを隠すには?

WooCommerceでページのタイトルを非表示にするには、このガイドと同じ多くの方法を使用できます。例えば、SeedProdでは、デバイスの表示設定でタイトル要素を非表示にするだけです。

WooCommerceページのタイトルクラスを見つけることで、カスタムCSSを使用することもできます。 

タイトルクラスは我々とは異なるかもしれないが、以下に例を挙げる:

.woocommerce-page .page-title {
  display: none;
}

前回の方法と同様に、このオプションはWooCommerceページからすべてのページタイトルを削除します。

次は、WordPressレイアウトのチュートリアルです。

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

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

お読みいただきありがとうございました!ご質問やご意見がありましたら、お気軽にコメントをお寄せください。

また、YouTubeX(旧Twitter)Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。