賢威7はシンプルな作りになっているので、あまり派手な装飾がありません。

そこで記事上に自動でアイキャッチ画像を挿入して、訪問者の最初のインパクトを強める方法をご紹介します。

 

スポンサードリンク

アイキャッチ画像を設定するメリット

アイキャッチ画像というのは訪問者の目を引きつけるために使われる画像のこと。

最近では画像とタイトルを組み合わせたものがよく使われていますね。

 

記事の最初に内容を的確に表現するアイキャッチ画像を設定しておけば、タイトルを見て記事を訪問してくれた読者に視覚的にも訴えることができます。

画像は文章では伝わりきらない事柄を補ってくれるので、できればアイキャッチ画像を設定しておきましょう。

 

そして、賢威7では記事の先頭にアイキャッチ画像は表示されないのですが、少しCSSを変更するだけで自動で画像が挿入されるようになります。

簡単なカスタマイズですがコレでブログの印象が大きく変わるので試してみてください。

 

アイキャッチ画像を設置する方法

まずはWordPressのダッシュボードから【外観】→【テーマ編集】へと進みます。

そして、右側の項目の中から【個別投稿(single.php)】を開きます。

 

コードが表示されるので、その中から下記の記述を探しましょう。

<div class="article-body">
<?php

 

Windowsの場合はF3キーを使って上記の記述を探すと簡単に見つけられます。

 

 

記述を見つけたらその部分を下記のように変更します。

 

<div class="article-body">
<?php the_post_thumbnail('large'); ?>
<?php

 

 

これで大サイズ(large)で画像が表示されるようになるので、設定を保存して投稿記事を確認してみてください。

 

画像のサイズ

画像のサイズを変更する場合はダッシュボードの【設定】→【メディア】へ進みます。

「large=大サイズ」なので、ここで画像の大きさを賢威のコンテンツの幅に合わせて700に設定しておきましょう。

 

 

これで幅の上限が700pxとなるので、賢威のコンテンツの横幅と揃えることができます。

 

画像と本文の余白を調整する

アイキャッチ画像を設置すると、過去の記事の画像と本文の間のスペースがなくなってしまうことがあります。

 

 

その場合はアイキャッチ画像の下に自動で空白ができる用に設定を変更しておきましょう。

 

【外観】→【テーマ編集】へと進み、【bace.css】を開きます。

そして、その最下部に下記のコードを貼り付ければOKです。

 

.article-body img:first-child {
margin-bottom: 1em;
}

 

これでアイキャッチ画像と本文の間に余白ができるので、過去の記事が修正する必要がなくなります。