一度覚えたはずなのに思い出せない。それならとメモのつもりで作ったブログです。

【WP】記事のタイトルを表示させたくないときの安全でベストな方法

編集中はそうでもなかったのに実際にスマホで見てみると記事タイトルが邪魔に感じたりして、タイトルは無くてもいいのにと思うことがあります。

目次

重要な働きをするタイトル

新聞でも週刊誌でも読者はまずそのタイトルを見てその記事を読むかどうかの目安にしています。

そしてこれはサイトを訪れる読者だけではなく、検索エンジンに対しても同様に重要なのです。

タイトルを入力しないことによる不具合

タイトル欄の文字列にはh1タグが付けられると同時にtitleタグで囲まれるようになっており、検索エンジンはこのtitleタグの内容をデータとして重要視しています。

つまりタイトルを空欄にすると

  • 一覧表に表示されないことによってサイトの管理ができない
  • 検索エンジンがそのページを評価する要素としてtitleタグに囲まれたテキストを利用できない

というマイナス点があげられます。

どんな内容なのかわからないだけではなく、検索エンジンが評価する情報が得られないんだ。

タイトルが邪魔なら表示しなければいい

もしタイトル表示が邪魔なら、タイトルは記載したうえで表示させないことにより、h1タグやtitleタグはしっかりと陰で機能させることができるのです。

つまりタイトルを入力したうえで非表示にすれば、検索エンジンが評価してくれるんだね。

文字タイトルの代わりにサムネイルにタイトルをデザインしたものを使ってもいいということね。

ここでは入力した文字タイトルを表示させない方法として

  • プラグインを使う方法
  • CSSに追加記載する方法

の2つを順を追ってお伝えしたいと思います。

記事タイトルの表示・非表示による見た目の違い

設定に入る前にサンプル記事で表示・非表示の効果をみてみることにします。

なおタイトル欄の下にはアイキャッチ画像を配置しています。

表示と非表示でどんな違いがあるのかな

記事ページにおける見た目の違い

●タイトルを通常どおり表示した場合

家事タイトルの通常表示
これは通常の表示です。

●タイトルを非表示にした場合

記事タイトルを非表示
タイトルがすっぽりと抜けました。

このようにタイトル「大隅国にもある和気公園藤まつり」は表示されなくなりました。
しかしタイトル周りのカテゴリーや日時の表示はh1要素ではないのでそのまま残ります。

これらの表示についてはWordPressテーマ毎に異なりますので、それぞれのヘルプで確認して処理してください。

記事一覧における見た目の違い

タイトルを非表示にすると記事内だけではなく記事一覧のタイトルも表示されません。

例えば、通常は下図のように表示されている記事一覧ですが…

●通常の一覧表示

通常のタイトル表示
これは通常の表示ですね

タイトルを入力したときの通常の記事一覧表示です。

画像はアイキャッチ画像がサムネイルとして表示されています。

●タイトルを非表示とした場合

文字タイトル(h1)を非表示としたとき
タイトル部分がありません

タイトルは入力したうえで非表示の設定をしたものです。

記事ページのタイトルと同様、一覧にもタイトルは表示されなくなりました。

●サムネイルにタイトルを描けばOK

サムネイルにのみタイトル表示
サムネイルにタイトルが表示されています

サムネイルに記事タイトルの文字をイラストしてみました。

これならあなたのセンス次第で文字タイトルに比べより読者の目を引く記事一覧が作れますね。

タイトル(h1)とサムネイルのタイトルの両方を表示させるのもOK

サムネイルと文字タイトルの両方を表示
別に両方表示させてもかまいません

サムネイルとタイトル(h1)の両方を表示させてもかまいません。

文字タイトル(h1)がきちんと入力されていれば表示・非表示にかかわらず検索エンジンには評価してもらえるということです。

全体のバランスを見て判断しましょう。

サムネイルにイラストするタイトルは必ずしも(h1)と同じである必要はありません。h1は陰でしっかりと役割を果たしていますから。

では実際に表示・非表示の設定をしてみましょう。前述のとおり設定方法として簡単なものを2つ取り上げます。

1. プラグインを使ってタイトルを非表示にする方法

プラグインの種類もいくつかありますが、ここでは「Title Remover」を使用しました。

プラグインタイトルリムーバー

インストール後「有効化」すると各編集ページの右側に下図のような欄が設けられます。特に設定というものはありません。他のプラグインでもほぼ同じようなものでした。

□にチェックを入れるだけでそのページのタイトルが非表示となります。

編集画面右側に設定項目表示
編集画面右側の最下部または真ん中付近に設置されます

このように表示されるプラグインもありました

タイトル表示切替

いずれも特に設定もないシンプルなものです。いろいろ試して合うものを見つけてください。

プラグインはやっぱり簡単ね

プラグインによっては正常に動作しないものもあります

プラグインによっては次のようにタイトルが小さくなるだけだったり、タイトルは消えたけれど代わりに”no title”の表示がなされたりといったものがありました。いくつか試してみる必要が有ります。

● タイトルは小さくなったが表示されたまま

記事一覧での表示-3
文字サイズは小さくなったがタイトルはそのまま表示されている

上図は記事一覧においてタイトルは消えず小さく表示されていました。記事本文のタイトルは通常どおり表示されたままでした。

● タイトルは消えたが「no title」の文字を表示する

タイトルがそもそも削除されたのではないか
記事一覧では「no title」と表示される例

上図のように記事一覧のタイトル部分には「no title」と表示され、なんとなく手抜き工事のような感じですね。

2. 追加CSSでタイトルを非表示にする方法

「追加CSS」でタイトルを非表示とする方法をご紹介します。

プラグインはできるだけ使いたくないという方には良い方法です。

不具合が生じた場合はそのまま追加した css を削除すればOKです。

安全のため本体のスタイルシートに手を加えるのは避け追加CSSを利用したほうがいいでしょう

追加CSS記載の方法は2通りあります。

  • 管理画面で追加する方法
  • 各ページの add css (追加CSSとかカスタムCSSなど)に記載する方法です。

(1)WordPress管理画面からCSS追加

WordPressのダッシュボードから[外観]→[カスタマイズ]→[追加css]と進み、ここにCSSコードを追加します。

追加するCSSの構文

.entry-title {
    display: none;
}

文字通り ” タイトルの表示はしない ” という意味ですね、これを「追加CSS」に記載します。

場所は外観→カスタマイズ→追加CSSと進みます。

管理画面のダッシュボードでカスタムcssに記載する

この場合、追加したCSS は固定記事、投稿記事の全てに作用します。

特定の記事だけに適用させたい場合は記事 id を指定します。

次にいくつかのパターン毎に参考 CSS を掲載しました。

TOP記事(固定記事)のタイトルのみ非表示にするには

.home .entry-title {
    display: none;
}

.home は TOP 記事のことです。


.homeと記載することでTOP記事に限定されるんだ

固定記事全てのタイトルを非表示にするには

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

.page は固定記事を意味します

投稿記事全てのタイトルを非表示にするには

.post .entry-title {
    display: none;
}

.post は投稿記事のことです

.pageは固定記事、.postは投稿記事か

特定の固定記事(例:記事 id が243)のタイトルを非表示にするには

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

記事id が243 である .page(固定記事) の記事タイトルを非表示にします

特定の投稿記事(例:記事 id が517)のタイトルを非表示にするには

.postid-517 .entry-title {
   display: none;
}

記事id が 517 である投稿記事の記事タイトルを非表示にします。

「post-id」ではなくハイフンの無い「postid」なのでご注意。

(2)記事ごとの「追加CSS」で設定する方法

記事編集ページの下側にある「add CSS」や「追加CSS」あるいは「カスタムCSS」といった欄にcssを追加します。

この欄が無い場合はプラグインで設定できます(次の項)。

追加CSS欄

ここに次のコードを記入します。
そのページのみに設定が反映されるのですからpage-idとかpostidとか、そもそもIDは不要なのです。

.entry-title {
    display: none;
}

実にシンプルですね。記載したその記事だけに「非表示」が反映されるので分かりやすいですね。

各ページに追加CSS欄を追加する方法

テーマによってページ下部に「追加CSS」が無い場合は、プラグインで追加することが出来ます。

いくつかある中から、ここでは「Add css to post」(作:Kachibito氏)をご紹介します。


タイトルには「プラグインを使わずに~」とありますが、実際にはプラグインも用意してあります。

デスクトップにZIPファイルをダウンロードし、解凍せずそのままWordPress の「プラグイン」にアップロードし有効化します。

記事 idとその確認方法

既述のように管理画面において特定の記事のタイトルだけを非表示としたい場合は、その記事の id を指定しなければなりません。(各ページで追加する場合は不要)

  • 固定記事の場合は .page-id-○○
  • 投稿記事の場合は .postid-○○

となります(○○に数字が入る)。

この作業を行う上で必要となる「記事id」の確認方法を次に記します。

(1)記事一覧のページでidを確認

記事一覧のページでは二通りの方法があります。

① 記事一覧のID項目を直接確認する

記事一覧のID表示
編集記事一覧で「ID」を確認する


記事一覧にID項目が無い場合は、上部の「表示オプション」を開き「ID」にチェックを入れると表示されます。

記事id表示の設定
「表示オプション」でIDにチェックを入れる

② 記事一覧の記事タイトルにカーソルを載せると画面最下部に記事idが表示される

画面下ID表示
一覧の記事タイトルにカーソルを乗せると画面下部に表示される

(2)編集画面上部のURL欄でidを確認

記事を開いて編集画面にした時に上部のアドレス(URL)欄に表示される文字列に記事 id が含まれています。

URL欄でID確認
記事の編集画面にて上部URL欄に記事にidが表示される

(おわり)

ー 広 告 ー

価格はちょっと高めの有料テーマ。

しかしブロックエディタに最適化されている最新のテーマです。

他テーマからの乗り換えも簡単
一度支払えばアップデートも無料。
複数のサイトで利用できます。

目次