クリプト

【必見】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
クリプト

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

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

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

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

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

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

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

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

約2年間ブロックチェ-ンゲームをして

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

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

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

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

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

Uniswap v3を完全に理解した

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

【DeFi】複利でトークンを運用してくれるサイト

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

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

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

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

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

【第8回】あの仮想通貨はいま「テレグラム-TON/Gram」

Like token Tip token
69.90 ALIS