クリプト

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

koganekaeru's icon'
  • koganekaeru
  • 2018/05/27 14:36
Content image


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

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

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


PC表示の人気記事

Content image


PC表示の新着記事

Content image


スマホ(iphone)の人気記事

Content image


スマホ(iphone)の新着記事

Content image



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

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

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

調査対象 PC:macpro 13inch      スマホ:iphone6s


Content image

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


Content image

新着のTOP画像に使われる場合は上下9ピクセルずつ削られるため 513×288 が最適!!


Content image

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


Content image

今度はスマホの人気記事表示。531×180 で左上基準


Content image

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



ということで

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

Content image

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


②サムネを入れるなら9ピクセル下げた位置から180ピクセル下がったところまで!(カエルの場合は頭がきれてもかまわないので上まで入れています)


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


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


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

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


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

それではまた♪


あ!!!

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


追記:PCのサブ記事だと

Content image

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

公開日:2018/05/27
獲得ALIS:61.71
koganekaeru's icon'
  • koganekaeru
  • @koganekaeru
仮想通貨FX。退屈が嫌い。刺激が欲しい。日々楽しいことを探すエンターテイナーを目指す。

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

【初心者向け】$MCHCの基本情報と獲得方法

Like token Tip token
32.32 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
クリプト

Polygon(Matic)で、よく使うサイト(DeFi,Dapps)をまとめてみた

Like token Tip token
236.30 ALIS
Eye catch
クリプト

2021年1月以降バイナンスに上場した銘柄を140文字以内でざっくりレビュー(Twitter向け情報まとめ)

Like token Tip token
38.10 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
クリプト

【初心者向け】JPYCを購入して使ってみました!

Like token Tip token
30.03 ALIS
Eye catch
クリプト

クリプトスペルズで入手したMCHCを引き出す方法

Like token Tip token
196.20 ALIS
Eye catch
クリプト

UNISWAPでALISをETHに交換してみた

Like token Tip token
40.40 ALIS
Eye catch
クリプト

Uniswap(ユニスワップ)で$ALISのイールドファーミング(流動性提供)してみた

Like token Tip token
59.99 ALIS
Eye catch
クリプト

バイナンスの信用取引(マージン取引)を徹底解説~アカウントの開設方法から証拠金計算例まで~

Like token Tip token
3.50 ALIS
Eye catch
クリプト

Eth2.0のステークによるDeFiへの影響を考える。

Like token Tip token
44.10 ALIS
Eye catch
クリプト

コインチェックに上場が決まったEnjin Coin(エンジンコイン)コインを解説

Like token Tip token
21.49 ALIS