cocoonのアイキャッチ画像を推奨サイズ（1200×630px）で設定したら・・・
サムネイルが見切れている！
なんて困ったことはありませんか？
私もこの問題に直面し頭を悩ませましたが、ある解決策にたどりついたので情報を共有したいと思います。
cocoonのサムネイル、アイキャッチについて
一応わからない人の為に説明しておくと、
・「アイキャッチ」は記事タイトルの真下に出てくる画像
・「サムネイル」は記事一覧やおすすめ記事などに出てくる画像
cocoonアイキャッチ画像の両端が見切れた！
ネットではcocoonのアイキャッチ画像は1200px×630pxが推奨されています。
もちろんこのサイズには理由があり、ツイッターやフェイスブックで記事が共有された時に、見切れずに表示できるか？という問題をクリアする為に推奨されているサイズなんです。
この情報をもとに、私も素直に推奨サイズでアイキャッチを設定してみました。
しかしここで問題発生！！！
サムネイルで表示された画像を見てみると、両サイドが見切れてしまっていたのである・・・。
もちろんアイキャッチの方ではきちんと表示されている・・・。
まさか推奨サイズでこのようなトラブルが起きるとは思ってもいなかったので、調べてみることに。
サムネイルのサイズ変更をいじってみても
cocoonの設定→メディアにサムネイルのサイズ変更という項目があります。
※cocoon設定ではないので注意。
ここにたどり着いた時は「これか！」と思いサイズを入力し勝手にトリミングされるみたいなチェック項目を外してみる。しかし問題は解決する事は無く、サムネイルは見切れたままだった。
ここは関係ない事を知り、さらにネットで調べることに。
アイキャッチについていろいろ調べてみると・・・
サクッと簡単に解決出来る方法は残念ながら見つからなかった。
他の人はどうなっているのかがふと気になり、いくつかのサイトを見てみたけれど実際見切れている人も多い。
気にしなければそれまでだが、私はどしてもこの見切れ問題を直したかった。
そこで試行錯誤を繰り返した結果、ある解決法にたどり着いたのである。
横のサイズは1200px以上が好ましい
いっそのこと画像のサイズをちっちゃくすればいいんじゃないか？と思う人もいるかもしれません。
しかしどうも調べてみると、横の画像サイズは1200px以上が望ましい事が分かった。
あまり小さすぎると引き延ばした時に、画像が荒くなったりする事も理由の1つらしいです。
また、1200px以上のアイキャッチ画像だとgoogle評価が高いとの事！
真実はgoogleにしか分からないが・・・。
何を重視するかで画像サイズを変更！
結局自分が「何を重視するか？」で対策方法が変わってきます。
以下に2つの方法を記載しておきますので、自分の重視する方で設定してみて下さい。
自分のサムネイルを重視する
自分のサムネイル部分を綺麗に表示したいなら、比率を16:9（横:縦）に設定するとうまくおさまります。
だたしcocoon設定でサムネイルのアイキャッチサイズをデフォルトで設定している場合です。
私の場合は、横の1200px固定にしたかったので、縦のサイズを675pxにしました。
計算方法は簡単で横1200pxを16で割ります。すると75という数値が出ます。
この75をの縦比率の9と掛け算すると675になります。これが横のpx数です。
しかしツイッターやフェイスブックで見切れずに表示されるのは「1200×630」
私の縦のサイズは675pxであり、少し見切れてしまう事に間違いありません。
ではどのくらい見切れてしまうのか？実際の画像を見て見比べてみましょう。
画像では上下の赤線部分が切れている事が分かると思います。
しかしこの部分が見切れても大丈夫な人はアイキャッチ画像を16:9にする事でサムネイル問題は解決できます。
ツイッターやフェイスブックを重要視したい場合
これらで記事が共有された場合の事を考えた場合は、アイキャッチ画像は1200×630が推奨されています。
しかし当然ながらcocoonの記事一覧の画像は見切れてしまう事になります。
この場合は両サイドが約40pxずつ削られる事となります。
なので両サイドギリギリにまで文字や表示したい内容をいれなければOKです。
まとめ
以上がcocoonでアイキャッチを推奨サイズにしたら、サムネイルが見切れる問題の解決方法でした。
私はサムネイル重視で、サイズを変更していきました。
しかし今度はそれはそれで、今度は「アイキャッチの上下」が見切れるという問題が発生しました。
その解決法はこちらに記載しています。
コメント