VALUの背景画像(カバー画像)のサイズのカスタマイズする際の基準

VALUの背景画像(カバー画像)のサイズのカスタマイズする際の基準について
様々なレイアウト工夫を行っている人が居るようなのでサイズを調べてみた。
結論からいうとセンター出しは楽なのですが左右の調節が閲覧端末で少し厄介かもしれない。

設定変更
1. 中央の位置

設定変更

基本情報から
https://valu.is/users/manage/dashboard

『カバー画像の追加』を押す
画像を変更する
保存

pngの人も稀に見かけましたがjpegの人が多い。
※ jpeg⇒jpgじゃないのかと思いましたが
VALUのソースコードではこうなっているので。

中央の位置

画像が極端に大きなサイズでアップロードしても一定の規格に縮小されている。
※横幅1600程度の幅の画像でも自動で縮小された。
サイズは1000だ。
センターは500になる。(厳密に言うと、500と501の境目が中央)
500：500

後述すると例外がある。

縦のサイズ幅

これは、アカウントによって文字数が異なる。(縦の長さ)
プロフィールに書かれている文字数。行数によって変化する。改行入力していなくとも合計行数が長い方が縦に長くなる。

当方のアカウントの背景画像の比率は、
1000*563だった。
他の人で見てみたら
1000*500　等。

中には相当縦長の人も居る為、縦の長さは一概に言えない。

画像調節後に文字を追記して、プロフィールの文字数増やすと、元画像のサイズによりますが、縮尺が変わる可能性があります。
一定の文字数か改行を意識しないと背景画像調節しないといけなくなるので厄介かもです。

小さいサイズだと例外

587*293の人が居た。
これについてはFacebookなどの元データの画像が小さい可能性があるのか知りませんが、
小さいサイズだとどういう縮尺なのかは調べるのは面倒なので省略します。

画像が掲載されている位置

ソースコードで表示して以下の位置のjpegなどのファイル

コード記述できなかったのでイラストですが、contentsコメントの直下の　イメージ画像です。
横幅・縦幅は、自分のものがいくつなのかを確認するには、ここから参照するのが妥当。

実際

画像例　　↑クリックで拡大するので、確認したい人はVALUに当てはめてみると良いです、
1000pxサイズから、
500でセンターをとって(1行目の紫とオレンジの間が500)
縦横250*250分割と
125*125分割
これ以上割るとずれるので省略
これを実際のVALUの背景に当てはめると
WIDE 1920pxサイズのモニターで、Chrome環境でアクセスすると上下横幅はほぼ適切に表示される。これ以上の画面だと確認していません。(持ってない)

縮小図

1920×1080でフル表示だと元画像1000pxだったものが1:1でほぼ正確に表示される。

現物確認したい人は当方のVALUページで確認してください
https://valu.is/nufufu
2017年8月5日時点。今後画像差し替えする可能性は、あります。

ただし100パーセント表示から、拡大・縮小等するとずれる。
ウィンドウサイズを小さくしたりすると同様。

上に少しずれる。

上部分に繰り上がったり
下部分が出てきたりする為

上下の適切な調節は難しい。
閲覧者の環境を万全に想定することが不可能。

左右の中央からの値は、真ん中基準にすればさほどデザインはずれない。
[char no=”1″ char=”ぬふふ”]基本スマホ表示でもセンターから左右125PXの文字表示と画像表示が基準になっている。
結果中央から左右125PXは暗めの色が良い。(正確には左右130px程度、PCとスマホ想定してサイズに余裕は取ると良い)
中央から左右125px以降の外は、明るい色でも説明文読むのに支障はないと言える。[/char]