こんにちは けいこぶ です。
皆さんはブログの記事を投稿するときにアイキャッチ画像って設定されていますか？
アイキャッチとは？
アイキャッチ画像は、その名の通り ユーザーの目（アイ）を引きつける（キャッチ）するための画像です。記事のタイトルや内容に合ったアイキャッチ画像をつけることで、 ユーザーの興味を引き、記事が読まれやすくなる効果があります。
（出典：ferret「アイキャッチとは」）
アイキャッチ画像ってとても重要ですが、なかなか大きさって難しいですよね。
そんなアイキャッチ画像の最適な大きさについて考えてみました。
■目次■
最適なアイキャッチ画像の大きさとは？
最適なアイキャッチ画像とは何ぞや？と感じるかと思います。
いろいろなブログやサイトでアイキャッチ画像の大きさに関して調べてみるとといろいろな記事がありました。
特に多かったのがSNSを意識したアイキャッチ画像の大きさ調整です。
FacebookやTwitterなどのSNSではアイキャッチ画像がすべて表示されるのではなく一部が途切れてしまうそうで、それを考慮してアイキャッチ画像を設定するとか何とか。
なるほど、SNSに対応するのは重要ということですね。
でも・・・
う～ん、ちょっと求めているのと違うんですよね ( ＾ω＾；)
そんな高度な設定は初心者の私には不要です。
とにかく見やすいのか見やすくないのを知りたいのです。。
実際にいろいろ設定してみた
てっとり早く自分でいろいろ設定して確認してみることにしました。
画像横一杯に画像をそのまま表示
まずはアイキャッチ画像をそのまま貼りつけてみました。
・・・デカイんじゃおオマエ( ｣ﾟДﾟ)｣
ちょっと大きすぎますね。
私の場合はcssをいじって記事投稿画面の横幅を広くしていますので、余計にデカく感じます。
これではアイキャッチ画像が本体です。さりげなく記事の内容を伝えるのではなく、もはやアイキャッチ画像が記事の一部になってしまっています。
ちょっと良くないですね。
画像を横幅の7～8割表示
アイキャッチ画像を横幅の7～8割くらいになるように表示してみました。
実際、私のブログの結構な記事はこのスタイルを採用しています。
まあ…無難ですね。
ただ、やはり左右の隙間が気になります。かといってシェアボタンやタイトルを合わせて小さくしてしまうと横幅を大きく改造した意味がないですし、この辺はジレンマですね。
他のブログを見ましても、横幅の7～8割くらいに収めているブロガーさんは多いように思えます。
上下を切り取って横一杯に画像を表示
あ～！コレコレ！こんな感じにしたかったヾ(●´∀`*●)ﾉ
ビビッ！ときました。まさにやりたい形はコレだったのです。
記事よりも目立たずにアピールだけはしっかりとしていくスタイル。それを実現するためには上下を切り取ってでも横一杯に広げてあげればよかったのです。
これからの記事はこのサイズを積極的に取り入れていきたいと思います。
横長の写真で表現できないアイキャッチ画像もある
見栄えが良い横長のアイキャッチ画像ですが、サイズを無理に変えようとするとかえって変になる場合もあります。
例えばこんな写真を使っているとしたら、無理に横長にすると…
こんな具合になってしまいます。
まあアイキャッチ画像なのでまあこれでもよいのですが、ちょっと雰囲気が出ないですね。
この辺は投稿する記事の内容、アイキャッチ画像の種類によって臨機応変に使い分けるべきなのでしょう。
自分のブログの記事幅を知る方法
アイキャッチ画像を考えたり横長に切り取ったりする際に、自身のブログの記事幅を知っておくのは何かと便利です。
自身のブログの記事幅を知る方法の一例を紹介します。
ワードプレスのメイン画面より「外観」⇒「テーマの編集」と進みます。
おそらくほとんどの人は子テーマを使用していると思いますので、「編集するテーマを選択」より親テーマを選択してください。
私の場合はテーマ「STORK」を選択していますので「stork」を選択します。
するとスタイルシート（style.css）のファイルが出てくると思いますのでそれを選択します。
ソースコードがズラズラと出てくるかとは思います。その中から次の項目を探してください。
（ソースコードの一部は省略して表示しています）
@media only screen and (min-width: 1166px) {
#main{
width: 798px;
margin: -35px;
padding: 35px;
}
}「@media only screen and (min-width: 1166px)」とはディスプレイの横幅が1166px以上ならこの動作をしますよ～みたいなものです。
♯mainとはテーマによって異なりますが、私の使っているSTORKでは記事を表示している項目のことです。
上のコードですとブログの記事幅は798pxだとわかります。
ですのでアイキャッチ画像を横幅一杯に表示するためには横幅798pxの画像を用意すれば良いことがわかります。
まとめ
アイキャッチ画像って記事の出来栄えを左右する中で結構重要な要素だと思います。
せっかくですので納得行くまで作りこみたいですよね。
私はとりあえず全体を表示しないといけない画像の場合は全体の7～8割に表示して、切り取っても問題ない画像の場合は横幅一杯に表示しようかと思います。
ブログの幅を変えてしまうとこのあたりの寸法はすべて変わってしまいますので、ブログの幅などはしっかりと決めておいた方が良さそうですね。