アイキャッチ画像のサイズを調整しよう

こんにちは、明人です。


私のブログにお越しいただき、
ありがとうございます。

eyecatch02

今回は、アイキャッチ画像について
どんな画像がいいのか?
サイズは?
など、いろんな疑問があると思う。

私も実際、画像自体はイメージに合ったもの、
そして、イメージしやすいもの
という事を考えて選んできた。

だが、サイズとなると、意外と無頓着。
サイドや上下が切れたら、
サイズをちっちゃくすればいいやって思ってきた。

そうそう、でもね。
ちっちゃくしても、切れちゃう時ってありません?

その時は、あまり気にしなかったんだけど、
いざ、気になると、気になって気になって。

そこで、ちょっと調べてみたので、
お伝えしようと思う。

その前に、
「アイキャッチ画像」って何?
どう扱えばいいの?って事を少し。

トップページのそれぞれの記事に対して、
使われている画像が、アイキャッチ画像です。

この画像は、視覚的に
どのような記事内容なのかを示すのに、
とても重要な役割を果たしている。

そして、読者さんに興味を持たせることも
出来るので、とても重要です。

それに、表示する大きさを変えることで、
イメージに近づける事が出来るので、
大きさはとても重要ですね。

ということで、
大きさを変えたり、調整したりする方法を
お伝えしていきますね。

アイキャッチ画像の大きさを変更するには、

「外観→テーマの編集」をクリック。

「テーマのための関数(functions.php)」
をクリック。

add_theme_support(‘menus’);
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 246, 200, true );
add_image_size( ‘small_thumbnail’, 60, 60, true );


という箇所の下に、
下記のコードを追記する。

add_image_size( ‘eyecatch’, 240, 240, true );

「ファイルを更新」をクリック。

『240,240』の部分が、画像サイズになる。
大きさを変えたい場合は、この数字を調整しよう。

次に、「メインインデックスのテンプレート」
をクリック。

<!–アイキャッチ画像–>
<?php if(has_post_thumbnail()){ ?>
<div class=”left”>
<a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php echo the_post_thumbnail(); ?></a>
</div>
<?php } ?>
<!–/アイキャッチ画像–>


上記のコードの4行目中に、
『eyecatch』と追記すれば完了です。

こんな感じです。

<a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php echo the_post_thumbnail(eyecatch); ?></a>

いかがでしたか?
ちょっとした作業をするだけで、
簡単に画像サイズを調整できるんです。

やらない手はないですね。
あなたも挑戦してみてくださいね。

分からなくなったら、いつでもご相談ください。
解決できるまで、お手伝いさせていただきます。


よろしくお願いします。


では、今日はこの辺で・・・


最後までお付き合いいただき、
ありがとうございます。

コメントを残す

サブコンテンツ

プロフィール

お気軽にご質問ください!



わからないことやお困りのことがあれば、お気軽にご相談ください。

このページの先頭へ