Swellで特定の特定ページの記事タイトルを消す方法

こじま税理士のビジテクブログ | Swellで特定の特定ページの記事タイトルを消す方法

Swellを使っていて、固定ページなどで特定のページタイトルを消したい場合があります。そのときは、プラグインを使う方法があります。また、追加CSSで処理することもできます。子テーマの追加CSSで行うこともできます。また、特定ページの追加CSSで処理することもできます。

全体を見ていきましょう。

もくじ

クラスの確認

まずは、消したいタイトルを指し示すクラスを確認しましょう。

Chromeであれば、F12をクリックして、その対象の上にカーソルを当てて出てくるものがそうです。

おそらく、「h1.c-pageTitle」がそれです。以下でCSSでのクラスを示す際には、これを使いましょう。

プラグインを使う方法

プラグインを使うなら、いくつか消す方法があります。例えば、WordPressでは「Hide Title」。

WordPress.org 日本語
こじま税理士のビジテクブログ | Swellで特定の特定ページの記事タイトルを消す方法

その他のものだと 「Title Remover」も存在します。プラグインをインストールして利用できます。評価はこちらの方が高いです。ただし、あまり更新されていないので、気になるところです。

WordPress.org 日本語
こじま税理士のビジテクブログ | Swellで特定の特定ページの記事タイトルを消す方法
Title Remover Gives you the ability to hide the title of any post, page or custom post type item without affecting menus or titles in the admin area.

個別CSSでも書けるので、わざわざプラグインを入れなくていいかなと私は判断します。

追加CSSで書く場合

追加のCSSをSwellの追加セクションや子テーマのstyle.cssに加えることでもできます。追加CSSが分かりやすいでしょうから、こちらの方法で説明します。

STEP
対象の記事を選択する

対象の記事のIDを確認しましょう。

  1. 管理画面でページ一覧を見る。
    まず、WordPressの管理画面にログインします。左側のメニューから「固定ページ」をクリックしてページ一覧を開きます。
  2. ページIDを確認する:
    特定ページのIDを調べたいページを見つけます。ページ一覧に表示されている各ページのタイトルの下に、編集、クイック編集、ゴミ箱、プレビューなどのアクションリンクが表示されています。特定ページの「編集」リンクにマウスカーソルを合わせると、そのページのURLが表示されます。例えば、以下のようなURLが表示される場合があります。https://example.com/wp-admin/post.php?post=123&action=edit この例では、post=123がページIDです。この場合のページIDは「123」です。

    また、画面右上の「表示オプション」をクリックして、「ID」のチェックボックスにチェックを入れると、ページ一覧にIDが表示されるようになります。

これでIDの確認は完了です。

STEP
追加CSSを開く

・外観>カスタマイズ>追加CSSを開きましょう。

こじま税理士のビジテクブログ | Swellで特定の特定ページの記事タイトルを消す方法
STEP
以下のコードを入れる

「追加CSS」セクションに、以下のコードを追加して特定のページの記事のタイトルを消すことができます。この場合は、123をidとしています。

   .page-id-123 h1.c-pageTitle {      display: none;    }

ページ下のCSS用コードを使う方法

この方法が一番ラクと考えます。

STEP
CSS用コード入力欄を確認

投稿ページの記事内容の下に書くところがあります。

こじま税理士のビジテクブログ | Swellで特定の特定ページの記事タイトルを消す方法
STEP
コードを追加する
h1.c-pageTitle {   display: none; }
STEP
更新をクリックする

きちんと更新して動作を確認します。
非表示にならない場合、クラスが異なっている可能性も確認しましょう。

この方法は、対象の記事idを確認する必要がないので、簡単です。また、特定の記事にのみ適用されるため、他の記事に影響を与えません。

気に入った方法を使ってください。個人的には、3番目をオススメします。

もくじ