重要な働きをするタイトル
新聞でも週刊誌でも読者はタイトルを見てその記事を読むかどうかの目安にしているものです。
そしてこれはサイトを訪れる読者だけではなく、検索エンジンに対しても同様に重要なのです。
タイトルを入力しないことによる不都合
タイトル欄の文字列にはh1タグが付けられると同時にtitleタグで囲まれるようになっており、検索エンジンはこのtitleタグの内容をデータとして重要視しています。
つまりタイトルを空欄にすると
- 一覧表に表示されないことによってサイトの管理ができない
- 検索エンジンがそのページを評価する要素としてtitleタグに囲まれたテキストを利用できない
というマイナス点があげられます。
どんな内容なのかわかりにくいだけではなく、検索エンジンが評価する情報が得られないんだ。
タイトルが邪魔なら表示しなければいい
もしタイトル表示が邪魔なら、タイトルは記載したうえで表示させないことにより、h1タグやtitleタグはしっかりと陰で機能させることができるのです。
つまりタイトルが見えないようにするだけで、裏ではしっかりとh1の働きをしてるんだ。もちろん検索エンジンは評価の対象としてくれるんだね。
見えなくなった文字タイトルの代わりに、画像でタイトル表示するのもいい方法ね。
記事タイトルの表示・非表示による見た目の違い
設定に入る前にサンプル記事で表示・非表示の効果をみてみることにします。
なおタイトル欄の下にはアイキャッチ画像を配置しています。
表示と非表示でどんな違いがあるのかな
記事ページにおける見た目の違い
●タイトルを通常どおり表示した場合
●タイトルを非表示にした場合
このようにタイトル「大隅国にもある和気公園藤まつり」は表示されなくなりました。
なお、タイトル周りの表示(カテゴリーや日付)は利用しているテーマ「SWELL」の機能で、h1要素ではないのでそのまま残りました（これは別途テーマの設定で非表示にできます）。
記事一覧における見た目の違い
タイトルを非表示にすると記事内だけではなく記事一覧のタイトルも表示されません。
例えば、通常は下図のように表示されている記事一覧ですが…
●通常の一覧表示
タイトルを入力したときの通常の記事一覧表示です。
画像はアイキャッチ画像がサムネイルとして表示されています。
●タイトルを非表示とした場合
記事ページのタイトルと同様、記事一覧にもタイトルは表示されなくなりました。
●アイキャッチにタイトルを描けばOK
画像で記事タイトルを表示させる場合は、本来の文字タイトルは非表示にした方が見栄えが良いこともあります。
アイキャッチ画像に記載する文字タイトルは「h1」と同じである必要はありません。h1は陰でしっかりと役割を果たしていますから。
前置きが長くなりました。
では実際にタイトルの表示・非表示の設定をしてみましょう。
設定方法として簡単なものを2つ取り上げます。
１．プラグインを使ってタイトルを非表示にする方法
２．CSSを追加記載する方法
1. プラグインを使ってタイトルを非表示にする方法
プラグインの種類もいくつかありますが、ここでは「Title Remover」を使用しました。
インストール後「有効化」すると編集ページの右側に下図のような欄が設けられます。
特に設定というものはありません。他のプラグインでもほぼ同じようなものでした。
□にチェックを入れるだけでそのページのタイトルが非表示となります。
プラグインはやっぱり簡単ね
2. 追加CSSでタイトルを非表示にする方法
「追加CSS」でタイトルを非表示とする方法をご紹介します。
プラグインはできるだけ使いたくないという方には良い方法です。
不具合が生じた場合はそのまま追加したCSSを削除すればOKです。
安全のため本体のスタイルシートに手を加えるのは避け追加CSSを利用したほうがいいでしょう
なおこの追加CSSとプラグインの両方が存在した場合、この追加CSSは無効になります
追加CSS記載の方法は2通りあります。
(1) WordPress管理画面からCSS追加
(2) 各ページ編集画面下部の「追加CSS」や「カスタムCSS」に記載する方法
（１）WordPress管理画面からCSS追加
WordPressのダッシュボードから[外観]→[カスタマイズ]→[追加css]と進み、ここにCSSコードを追加します。
追加するCSSの構文
.entry-title {
display: none;
}
文字通り ” タイトルの表示はしない ” という意味ですね、これを「追加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」なのでご注意。
（２）記事ごとの「追加CSS」で設定
記事編集ページの下側にある「add CSS」や「追加CSS」あるいは「カスタムCSS」といった欄にCSSを追加します。
この欄が無い場合はプラグインで設定できます（次の項）。
ここに次のコードを記入します。
そのページのみに設定が反映されるので page-idとかpostidとか、そもそもIDを指定する必要はありません。
.entry-title {
display: none;
}
記載したページだけに適用されるのだからわかりやすい
この「CSSを追加」する欄が編集ページ下部に無い場合は追加設定できます
各ページに追加CSS欄を追加する方法
編集ページ下部に「追加CSS」欄が無い場合は、プラグインで追加することが出来ます。
いくつかある中から、ここでは「Add css to post」（作：Kachibito氏）をご紹介します。
タイトルには「プラグインを使わずに～」とありますが、実際にはプラグインも用意することになったようです。
デスクトップにZIPファイルをダウンロードし、解凍せずそのままWordPress の「プラグイン」にアップロードし有効化します。
記事 idとその確認方法
WordPress にも慣れてくると、各IDを知ることが必要となる機会が増えてきます。
一瞬どうだっけと思うようなことですが、一度知ってしまえば簡単なものです。
別の記事にまとめました。
（おわり）
－ 広 告 －
【おすすめの有料テーマ】
このblogはSWELLを使って作りました。以前使っていたCocoonと技術提携があります。
機能が豊富なのですがまだまだ使いこなせていません。
価格はちょっと高めかもしれません
しかしブロックエディタに最適化されている最新のテーマです
- 他テーマからの乗り換えも簡単
- 一度支払えばアップデートも無料
- 複数のサイトで利用できます
－ 広 告 －
