WordPressでタイトル下のアイキャッチ表示をどう運用するか

記事ごとにアイキャッチの有無jを設定

記事の冒頭部分に表示するために完成度の高いアイキャッチ画像を毎回用意するのはWebページの作成に結構な負担になります。

アイキャッチの表示は記事ごとが理想?

公式をはじめWordPressの多くのテーマはタイトル直下にアイキャッチを表示することを想定して作られています。

人気サイトでは、このタイトル下にクオリティーの高い凝ったアイキャッチ画像を表示しているのを多く見かけます。

しかし、個人が運用するサイトでは投稿する記事の内容に見合った画像を準備するのは大変。

記事の内容によっては、テキスト文の表示だけで充分といったこともあります。

そんな事情から個別投稿ページのアイキャッチは一括非表示に設定する使い方をしている方も多いことでしょう。

関連記事などのサムネイルとして、記事ごとにアイキャッチ画像は登録するけど記事を開いたときのタイトル下には表示しないというやり方です。

しかし、サイトの運用が進んできて余裕ができたとき、ユーザーにとっての閲覧性(UX)の向上をねらいたいときに、この記事にはコンテンツに見合ったアイキャッチを表示させたいと思うことがあります。

記事ごとに非表示設定(CSSを使う)

特定の記事にだけにアイキャッチを表示させたいときは、他の記事に非表示の設定を行うといった方法があります。

Cocoonの場合

WordPressの人気無料テーマであるCocoonでは、記事の編集画面で次のCSSを追加で記述します。

.eye-catch {
display: none;
}

テーマ全体の設定ではアイキャッチを有効にしておいて、アイキャッチを表示させない記事へ個別に追加のCSSを設定するわけです。

SANGOでは

有料テーマのSANGOでも、最新のバージョンでは追加でCSSの記述が可能です。

追加するCSSは次の通り

.entry-header .post-thumbnail {
  display: none!important;
}

いずれも非表示にしたい記事に追加のCSSを記述し、アイキャッチを表示したい記事はCSSを追加せずそのままにします。

公式テーマやほかのテーマでは、アイキャッチを表示してるスタイルシートを探してdisplay: noneを指定する方法が一般的かと思われます。

テーマが追加のCSSをサポートしていない場合はプラグインなどで対応することになるでしょう。

すでに記事が大量にある場合

何十記事、または100記事以上もの大量の記事が作成済みだというサイトで個別にCSSを追加設定するのは大変な作業量でしょう。

もしデータベースの知識があるならばphpMyAdminを使ってデータベースを直接操作し記事ごとにCSSを追加できれば作業は楽になります。

ただし、データベースが何か分からないし触ったこともないという方は管理画面の投稿ページの編集でCSSを記述した方が無難でしょう。

視覚に訴えるアイキャッチは重要だ

このように、サイトの運用がある程度進んでから個別にアイキャッチ表示をさせるには、単純作業をこれまで作成した記事の数だけ大量にこなすことになり現実的でなく場合によってはリスクを伴います。

最初からプロ並みの完成度を持った画像を用意できれば問題はありませんが、これを負担に感じてアイキャッチ非表示で運用を進めることは少なくないでしょう。

その後、特定の記事に限っては概要を記すためタイトル直下にアイキャッチを表示させたいと意向が変わることはあります。

早くアクセス数を増やすにはある程度まとまった数の記事が必要だとはよく聞きますが、アイキャッチの重要性については情報が少ないように思われます。

Webサイトを訪れたユーザーに対して大量のテキスト文字を読み始める前に、記事内容に見合ったイメージ画像を視覚で認識してから読み進んでもらうことはサイトを運営する側にとってもメリットがあります。

公式を含めWordPressテーマの多くがタイトル下アイキャッチ表示を初期設定で有効としていることを鑑みれば、大量に記事を書き進める前に記事ごとの表示の必要性について確認しておく必要があるのではないでしょうか。

おすすめ記事

WordPress標準ブログカードのスタイルをカスタムして整える方法