Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

cybozu kintoneのポータル等の画像サイズ

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

ポータル等で設定できる画像サイズを確認したので、メモ代わりに。

cybozu共通ヘッダー画像(「cybozu.com」ロゴに置き換わる)

ファイルサイズ800kbまで。

推奨サイズ:幅87 * 高さ26px

cybozuログイン画面背景画像

ファイルサイズ5MBまで。

幅高さともにウインドウ全体に追随。PC版モバイル版とも同じ。

余白ができないように、縦横の短い側に合わせて縦横比を維持したまま拡大縮小される(background-size : cover)。

ポータル画像

ファイルサイズ5MBまで。

PC版での見え方

高さ63 px。

横幅は980~画面最大までウインドウに追随。

余白ができないように、縦横の短い側に合わせて縦横比を維持したまま拡大縮小される(background-size : cover)。例えば幅980 * 高21 px の画像を指定すると高さが足りないため、3倍に拡大されて両端が画面外に見切れる。

ブラウザの幅 980 px より小さい幅では、ポータルそのものが右にはみ出す(横スクロールが発生する)ため、980 * 63 pxが維持される

モバイル版での見え方

高さ 50 px。

横幅はウインドウに追随。

余白ができないように、縦横の短い側に合わせて縦横比を維持したまま拡大縮小される点(background-size : cover)はPC版と同じ

以上の仕様から考えて

1920 * 63 px の画像サイズで、その中央980 * 63 px を利用すればPC版では常に画面から切れることなく表示されそう。ただその場合でも、モバイル版では中央部分だけ(端末によっては320 px など)しか表示されない。

情報としてこの画像を使うのはけっこう限られるかな。