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