アイキャッチ画像とは
基本的に記事一覧および記事本文上部に表示
1枚の画像で記事の概要を…
ブログの投稿記事一覧を表示するときに、文字だけの表示ではなく内容に関連した画像も一緒にリストとして表示させると、直感的に記事の内容がより把握しやすくなります。
この画像をアイキャッチ画像といい、文字通り読者の目を引くためのものなのです。
ここでは下図の記事一覧に示す韓国の「トッポッキ」というおやつに関する記事を例にして述べてみたいと思います。
アイキャッチ画像（サムネイル）を付加した記事一覧の例
タイトルだけではイメージが湧かなくても、画像によりある程度内容を知ることができますね。
記事内にはアイキャッチ画像を表示したくない場合もある
このように記事一覧に表示されるアイキャッチ画像は同時に投稿記事内の上部にも表示されます。（WordPressテーマにより異なるかもしれません）。
しかし記事本文の上部には別の画像を配置するつもりだったとか、他の画像がアイキャッチ画像と近接してお互いが邪魔になるとか、そもそも記事のトップには大きな画像を表示させたくないのだ…などということもあります。
スマホのような小さい画面で見る時は特にそうですね。
そこで、投稿記事内にはアイキャッチ画像を表示しないように設定をするというのがこの記事のテーマです。
記事内におけるアイキャッチ画像の表示
ではまず投稿記事内にアイキャッチ画像を表示させた場合と表示させない場合を比較してみましょう。
記事内にアイキャッチ画像を表示させない場合
左図はアイキャッチ画像を表示させない通常の状態における投稿記事の状況です。
タイトルの下にある画像はアイキャッチ画像とは関係なく、ページのトップにふさわしいと思われる韓国の屋台の写真を別途配置してみたものです。
記事内にもアイキャッチ画像を表示させた場合
左図はアイキャッチ画像を記事内にも表示させたものです。
画像が屋台の画像の上に割り込むように表示され、屋台の写真と記事本文などはそのまま下に下がりました。
屋台の写真の上にトッポッキのアイキャッチ画像。でもこれはこれでいいんじゃない？
うん。でもこれだったらいっそ屋台の画像は別のところに移した方がいいかな。
ここにGoogle Adsenseの自動バナー広告が入ってきたら更に雑多になるかもね。
そうか。内容に応じて非表示にできると便利だな。
記事内のアイキャッチ画像を非表示とする方法
では投稿記事内のアイキャッチ画像を非表示とする方法について、実際に自分が試みたものをご紹介します。
1. 画像の表示・非表示機能があるWordPressテーマを使用する
2.プラグインを使う
3. 追加CSSを設定する
1. 画像の表示・非表示機能があるテーマを利用する
一番簡単な方法が、アイキャッチ画像の表示・非表示の機能を備えているテーマを利用するものです。例えば有料テーマですが、このサイトで使用している「SWELL」もその一つです。設定は記事ごとに行えます。
SWELLのアイキャッチ画像と表示設定の画面（ともにサイドバーにあります）
2. プラグインを使う
ご利用のテーマにこの機能が無い場合はプラグインを利用する方法があります。ここでは
Conditionally display featured image on singular pages and posts というプラグインを利用します。
このプラグインをインストールし有効化すると、下図のようにサイドバー内にアイキャッチ画像の設定が表示されます。
□にチェックを入れると記事内ではアイキャッチ画像は非表示となります。
なお、表示・非表示の切り替えは記事毎に行えます。
□にチェックを入れると投稿記事内には表示されない
3. 追加CSSを設定する
プラグインはあまり使いたくないという方はCSSを追加する方法があります。カスタムCSSなどともいいます。
CSSを追加するといっても、サイトのスタイルシートに直接アクセスするのではなく「追加CSS」に記載するので、初心者の方でも割と気楽に安心して利用できます。何か問題が起きた場合は追加したCSSを削除するだけです。
追加するCSSコードは次のとおりです。
/* eyecatch画像の非表示 */
.eye-catch {
display: none;
}このコードを追加するのですが、追加する場所には2通りあります。
① 管理画面の「外観」→「カスタマイズ」→「追加CSS」にてコードを記載する
ただし設定は全ての記事に反映されます。記事毎に指定する方法もあるようです。
② 編集画面下部の「add CSS」にコードを追加する
追加CSS（カスタムCSS）欄を追加する
投稿記事下部の追加CSS欄はWordPressにはもともとありませんが、ご利用のWordPressテーマによっては設置されています。なければプラグインを利用してこの欄を追加することができます。
プラグインを使いたくないからCSSに記載しようと思っているのに、どんなんかなあ…
柔軟な対応も必要なんじゃないかと…
プラグイン「WP Add Custom css 」のインストール
ここではプラグイン 「WP Add Custom css 」を使って編集記事下部に「add CSS」欄を設け、そこにCSSを追加既述します。
この「add CSS」欄は各ページに作られます。つまり記事毎にアイキャッチ画像の表示設定ができます。
このプラグイン利用は下記リンクをご覧ください。作者の方は当初プラグインを使うつもりは無かったため「WordPressプラグインを使わずに～」というタイトルになっていますが、実際にはページ中ほどより下に「追記・プラグイン化」というリンク項目が追加されています。
「追加CSS」のプラグインはこちらから入手できます
「ZIPの絵」をクリックしてデスクトップにダウンロードし解凍します。それをWordPressの「プラグイン」にアップロードします。
↑【訂正】ZIPファイルのままでした。お詫び申しげます。
(おわり)
ー 広 告 ー
SWELLの公式HPへジャンプします。アイキャッチ画像の表示・非表示機能搭載です。
他の有料テーマに比べると価格がちょっと高めかもしれません。
Web上の公式マニュアルのほかにユーザーが多くの記事をアップしているので安心です。
機能が豊富なのでまだ半分も使い切っていません。これからが楽しみというところです。
以前使っていたテーマからの引っ越し手順を記事にしました。
－ 広 告 －