Webブラウザの幅 1440px

Webサイトの一般的な幅は 950px近辺らしいですが、まずは Webブラウザの幅 1440pxで 計測を開始。タイトル画像、テキストの情報は以下の通りでした。

SharePointモダンページ タイトル 画像 伸縮 1

  • タイトル画像の幅:1216px
  • タイトル画像の高さ:228px (不変)
  • タイトルテキストの開始位置: 左から40px, 下から32px
  • タイトルテキストのフォント: 36px

Webブラウザの幅 1024px未満、640px未満

Webブラウザの幅を 少し狭くしても、テキストの開始位置、フォントは変化せず。

Webブラウザの幅が 640px未満になると、フォントサイズが変わりました。

  • タイトルテキストの開始位置: 左から30px, 下から35px
  • タイトルテキストのフォント: 28px

Webブラウザの幅 480px未満、236px

その後も...Webブラウザの幅を 狭くしていけば 徐々に変わる感じです。

SharePointモダンページ タイトル 画像 伸縮 2

SharePoint Online モダンページのタイトルと画像 仕様 まとめ

「タイトル画像」の仕様は、以下の通りです。

  • 横長の画像で、中央部分が残る
  • 画像の色あいで タイトルテキストのフォント色が 白または黒になる
  • 左下に タイトルテキストが表示される

「タイトルテキスト」の仕様は、以下の通りです。

  • Webブラウザの横幅に応じて フォントサイズが拡大/縮小する
  • テキストが長い場合は、はみ出した部分は表示されない

どのデバイス(スマートフォン、タブレット、パソコン)からのアクセスを主と考えるかにもよりますが...「どれでも」「それなりに」であれば スマートフォン縦持ち時の横幅 320pxが 中央の幅となるような画像をつかうのがよろしいかと。ある程度、デバイスが絞れるのであれば そのデバイス(のWebブラウザ)の横幅を基準にした画像を使うのがよろしいかと。


2018年の記事

2017年の記事


風水吉凶方位 風水吉凶方位 |  奇門遁甲 奇門遁甲 |  金運神社 金運神社 |  仏像 仏像 |  論語 論語 |  般若心経 般若心経 |  二十四節気 二十四節気 |  菜根譚 菜根譚 |  SharePoint活用 SharePoint |  OneNote活用 OneNote |  ICT活用 ICT