【必見】ALIS最適アイキャッチ画像を考えた！

今日はＡＬＩＳにおいて最高のアイキャッチ画像サイズと配置を考えてみました。

え？もう知ってるし。。。

って思うでしょ？ちょっと下の画像を見てみてください。

PC表示の人気記事

PC表示の新着記事

スマホ（iphone)の人気記事

スマホ(iphone)の新着記事

ＰＣで見ると綺麗に表示されるけどスマホだと切れちゃったり、スマホだと綺麗に表示されるけどＰＣだと画像が切れちゃう。という現象が起きてます。

しかも人気記事と新着記事でも若干ズレが生じていますし、ＴＯＰ画像とサブ画像でもサイズが違います。

ということで両方に対応する（文字や画像が切れない）サイズはないかとちょっと本気で調べてみました。もしかするとＰＣでも画像比率で違ったり、スマホもiphoneとandroidでも違いが出るのかもしれませんが、折角頑張ったので見てみてください！

調査対象　ＰＣ：macpro 13inch      スマホ：iphone6s

まずブログ内の表示は　５３１×２８８　サイズが最適！これは画像が大きすぎると削られる部分が変わってきてしまうため。

新着のＴＯＰ画像に使われる場合は上下９ピクセルずつ削られるため　５１３×２８８　が最適！！

TOP記事からサブ記事に移動するとサイズが小さくなります。　５３１×１４４。しかも左上を基準となります。

今度はスマホの人気記事表示。５３１×１８０　で左上基準。

スマホの新着記事表示は　５３１×１８０　なんですけど９ピクセル削られます。これは上記写真のpockyさんの記事画像を見るとよく分かります。

ということで

ＰＣにもスマホにも対応する画像・文字を入れる場所の最強はこれだ！

①上下９ピクセル分は削られるのでフレームなどは入れない。

②サムネを入れるなら９ピクセル下げた位置から１８０ピクセル下がったところまで！（カエルの場合は頭がきれてもかまわないので上まで入れています）

③背景画像は単色で作った方が切れてもわかりづらい。（実験のため敢えてグラデ入れてます）

④サブタイトルを入れるなら上から１８９ピクセルより下にいれること。

上記を守るとＰＣでもスマホでも綺麗に表示されますよ！！

といいつつこの記事が実験なので失敗したらリライトしますね(笑）

いやぁ、しんどかった。。成功していますように！！

それではまた♪

あ！！！

まだツイッターでカエルをフォローしていない人は　こちら　からフォローお願いしますね♪

追記：ＰＣのサブ記事だと

この位置まで上げないと切れますね。。。。残念。