賢威7で記事にアイキャッチ画像を表示する方法


WordPressのテーマを賢威7に変えましたが、アイキャッチ画像を設定しても記事に「アイキャッチ画像が表示されない!」

「アイキャッチ画像を表示する」にチェックが入ってないのだと思い、賢威7の設定を1から見直しましたがアイキャッチ画像に関する項目は見当たらない。

3度ほど設定を見直した結果、賢威7はデフォルトではアイキャッチ画像は表示されないことを知りました(笑)。

そこで賢威7の子テーマを編集してアイキャッチ画像を表示させることにしましたが、なぜアイキャッチ画像は重要なのか考えてみました。

ブログにおけるアイキャッチ画像の重要性

アイキャッチ画像は記事を華やかにするだけでなく、読者の興味を引くことができます。アイキャッチ画像を見て記事を読むかどうか判断する人もいるそうです。

ブログの記事はSNSによる拡散からのユーザーの流入経路として、大きな役割を担うようになりました・・・ブログ記事にアイキャッチ画像を設定しておくと、Facebookで「いいね!」が押されたとき、記事のタイトルだけでなく画像も一緒にニュースフィードに表示されます。

 

それだけでなく、アイキャッチ画像が設定されている場合、SNSに画像付きで表示されるので、キャチャーなアイキャッチ画像を設定しておくと、興味を持つ人が増えて拡散に繋がるそうです。

 

 

賢威7のデフォルトの状態。確かにアイキャッチ画像があるのと、ないのとでは大きな違いがあるのかもしれません。

けれど当ブログではフリー素材をリサイズ・トリミングしているだけ。そこまで効果のあるアイキャッチ画像を用意することはできないと思います(笑)。

アイキャッチ画像の重要性について勉強になったので、賢威7に早速アイキャッチ画像を表示させるように子テーマを編集したいと思います。

(参考サイト: project Freedom「【賢威7】アイキャッチ画像を記事ページ上部に表示するカスタマイズ

 





賢威7にアイキャッチ画像を表示させるカスタマイズ

賢威7は記事タイトルの下にソーシャルボタンが表示されるようになっています。

アイキャッチ画像を表示させるのはソーシャルボタンの下でもいいのですが、好みにもよると思いますが、見栄え的にソーシャルボタンの上の方がいいと思います。

そこで投稿ページのsingle.phpの中で、ソーシャルボタンを呼び出す記述がヘッダー内にあります。


<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>
</header>
<div class="article-body">


<body>の前でソーシャルボタンを呼び出す、


<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>


の上に、下記のアイキャッチ画像を呼び出すコードを記述します。


<div style="text-align: center"><?php the_post_thumbnail('large'); ?></div>


ソーシャルボタンの下に表示させたいなら、下に記述すればアイキャッチ画像はソーシャルボタンの下に表示されます。

アイキャッチ画像を中央表示させたくないなら、<div style="text-align: center">〜</div>は消してください

 

大きい画像を使用する場合

このコードだとアイキャッチ画像は大サイズの画像を呼び出します。

 

 

賢威7の記事本文の横幅は700pxなので、700pxより大サイズ画像を使用する場合「設定」→「メディア設定」で画像サイズを上限を780px以下にしないとアイキャッチ画像がはみ出してしまいます。

 

まとめ

  • アイキャッチ画像は見栄えをよくする
  • 記事タイトル同様に読者の興味を引き付ける
  • SNSでの拡散にも大きく影響

これでアイキャッチ画像が賢威7にも表示されるので、アイキャッチ画像で見栄えだけでなく記事をよりキャッチャーにしましょう。

 

今日のたつじんへの一歩

たつじんwたつじんw

当ブログはソーシャルボタンも大きいです。大きいアイキャッチ画像を使用すると記事がなかなか表示されないので逆効果かもしれません(笑)