投稿記事一覧には文字だけではなく内容に関連した画像も一緒に表示されると、直感的に記事の内容がより把握しやすくなります。そう、アイキャッチ画像というのは文字どおり読者の目に触れて関心を引くためのものなのです。
アイキャッチ画像は記事一覧および記事本文上部に表示されます
このアイキャッチ画像ですが、記事一覧だけではなく記事本文の上部にも表示されます。
しかしながら記事本文の上部に別の大きめの画像を配置しようとすると、アイキャッチ画像と近接してお互いが邪魔になることがあります。スマホのような小さい画面で見る時は特にそう感じます。
こんな時はアイキャッチ画像の方を表示させないことにより、画面をすっきりとさせることができます。
具体的な例を見てみよう
タイトルの下に屋台の画像を入れたのだが、その間にアイキャッチ画像が割り込んでしまった。
屋台の写真の上にトッポッキのアイキャッチ画像。でもこれはこれでいいんじゃない？
うん。でも組み合わせによって邪魔に感じたりイメージが異なる場合は非表示にできるんだ。
投稿記事内のアイキャッチ画像を非表示とする方法
投稿記事内のアイキャッチ画像を非表示とする方法について、実際に自分が試みたものを2つご紹介します。
1. プラグインを使う
2. 追加CSSを設定する
3. 機能内蔵のWordPressテーマを使用する
1. プラグインを使う
Conditionally display featured image on singular pages and posts というプラグインを利用します。
このプラグインをインストールし有効化すると、下図のようにサイドバー内にアイキャッチ画像の設定が表示されます。
□にチェックを入れると記事内のアイキャッチ画像は非表示となります。
なお、表示・非表示の切り替えは記事毎に行えます。
2. 追加CSSを設定する
CSSを追加するといっても、サイトのスタイルシートにアクセスするのではなく「追加CSS」に記載するので、初心者の方でも割と気楽に安心して利用できます。何か問題が起きた場合は追加したCSSを削除するだけです。
追加するCSSコードは次のとおりです。
/* eyecatch画像の非表示 */
.eye-catch {
display: none;
}このコードを追加するのですが、場所は2通りあります。
（その1） 管理画面の「外観」→「カスタマイズ」→「追加CSS」にてコードを記載する。
ただし設定は全ての記事に反映されます。記事毎に指定する方法もあると思いますが、私にはできません。
（その2） 編集画面下部の「add CSS」にコードを追加する。
この追加CSS欄はWordPressにはもともとありません。プラグインを利用してこの欄を追加設置することができます。
ここではプラグイン 「WP Add Custom css 」を使って編集記事下部に「add CSS」欄を設け、そこにCSSを追加既述します。
この「add CSS」欄は各ページに作られます。つまり記事毎にアイキャッチ画像の表示設定ができます。
このプラグインは下記リンクをご覧ください。作者の方は当初プラグインを使うつもりは無かったそうですが、ページ中ほどより下に「追記・プラグイン化」という項目が追加されています。
「追加CSS」のプラグインはこちらから入手できます
「ZIP」の絵をクリックしてデスクトップにダウンロードし解凍します。それをWordPressの「プラグイン」にアップロードします。
↑【訂正】ZIPファイルのままです。お詫び申しげます。
3. 同様の機能があるWordPressテーマを使用する
アイキャッチ画像の表示非表示の機能を備えているテーマもあります。例えば有料テーマですが、このサイトで使用している「SWELL」もその一つです。
SWELLのアイキャッチ画像操作画面
SWELLの公式ホームページです
(おわり)
ー 広 告 ー
