SharePoint Online モダンページのタイトルと画像は、横幅の伸縮に応じて変わる

前回の記事「SharePoint Online モダン表示では Webブラウザの幅を変えると表示項目が増減」の続編です。Webブラウザの幅を変えた時に、モダンページのタイトルエリア画像、タイトル(テキスト)がどのように変わるか、どのぐらいのサイズのタイトル画像を準備すればいいか、調べてみました。前回と同様に 横幅 1440pxから開始して、1024px未満、640px未満、480px未満と 横幅を狭めていきました。


Webブラウザの幅 1440px

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

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

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

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

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

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

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

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

SharePoint Modern Page Titles

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

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

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

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

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

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



【最近の投稿記事】



SharePoint Online
Office 365/SharePoint Online事始め,ライセンス
Office 365やるってよ |  MSサイトでプランを勉強 |  TechNetでプランを勉強 |  E5プラン | 
Office 365/SharePoint Online関連の書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 
Office 365製品、サービス
sway, cortana, delve |  Office Online制限 |  SharePoint 2016 RC |  アーキテクチャ |  Connections, Listings, Invoicing |  Microsoft 365 Roadmap |  Bookings | 
SharePoint Online リスト/ライブラリ(クラシック)
標準 リスト/ライブラリ |  アンケート(Survey) |  画像ライブラリ |  ニュースフィード |  日英サイト間でリストデータ移行 |  ライブラリ ドラッグ&ドロップ |  ライブラリ ファイル一覧出力 |  リスト外観変更 |  Explorer URL |  ディスカッション掲示板 |  注目リンク |  OneDrive 通知メール送信 |  OneDrive バージョン履歴 |  アイテムはレコードです |  イベントのエクスポート |  既定ビュー破損 |  バージョン管理の改悪Update |  複数行テキストのリッチテキスト | 
SharePoint Online Webパーツ(クラシック)
標準 Webパーツ |  スクリプトエディタ |  RSSビューア |  フィルタWebパーツ |  XsltListViewWebPart |  グラフ表示パーツ |  サイトフィード(ニュースフィード)データ出力 | 
SharePoint Online リスト/ライブラリ/ページ(モダン)
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン | 
SharePoint Online Webパーツ/テーマ(モダン)
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー | 
SharePoint Online サイト(モダン)
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online 外部共有
外部ユーザー共有 |  外部共有サイト、外部ユーザー |  外部ユーザー削除 Remove-SPOExternalUser |  外部ユーザーの定義とライセンス付与の要否 |  共有の設定オプションが増えた |  サイトコレクション共有設定 | 
SharePoint Online 移行
Notes情報表示 |  Notesデータ移行 |  Sharegateインストール |  Sharegateファイル移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont PnP PowerShell
PnPの概要 |  テナントバージョン取得 | 
SharePiont + PowerApps
PowerAppsリンク集 | 
SharePiont Online 動作仕様
制限値が気になる |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイドリンクバー |  直打ちURL |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  お知らせタイルとエクスペリエンスバージョン |  クォータ警告と共有設定を一括取得 |  SharePoint Online 10 GB/User増量 |  SharePoint管理センター |  アクセス要求の設定 |  ファイルアップロードの宛先ライブラリ |  SharePoint管理センター Preview |  データ移行ツール |  サイトページ機能 |  SharePointホームページ |  管理者の業務範囲 |  記憶域の管理 |  クォータの増量要求 |  クラシックモード制限の無効化 | 
SharePiont Online 不具合
Webページ破損 |  サイトコレクション削除 |  おすすめ エラー |  外観変更エラー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  発行インフラストラクチャー機能 Trouble |  ダウンロード最小化戦略の問題点 |  日時がSeattle時間になる問題 |  サイトコレクション削除後の保存期間 |  Webパーツコマンドバー文字が重なる |  日本語対応がひどい | 
Office 365 動作仕様
OneDrive概要 |  OneDrive設定 |  OWAエラー画面 |  新しい Office 365管理センターUI |  Office 365メッセージ |  OneNote同期/ファイル |  Office 365サイト |  Office 365監査ログ |  Project Web App |  機能更新とエラー画面 |  Outlook Webのメッセージ |  Office 365 ホーム |  OneDrive削除アクティビティメール |  Projectホームページ |  Teamsチームサイトのアクセス権限 |  O365管理センター メニュー |  ASPX,HTMLファイル表示差異 |  Teamsデスクトップクライアント設定 |  Office Online自動保存と自動編集 |  Microsoft Search |  OneDriveページパラメータ |  SharePoint+Teams+O365グループ |  Officeアプリアイコン | 

SharePoint全般
SharePoint概要
SharePointとは? |  アーキテクチャ |  サイトテンプレート |  リストテンプレート |  Webパーツ |  アクセス権限 |  SharePoint用語集 | 
SharePoint構築 Tips
リスト名(URL) |  ライブラリ名(URL) |  フィールド名(内部名) |  ビュー名(ファイル名) |  リストテンプレート(ワークフロー削除) |  大きなリストの問題 |  アイテム一覧の列幅 |  機能とWebパーツ |  フィールドデータ型 |  禁則文字 |  隠しリスト表示 |  管理パス |  サイト内の列 |  サポート期限 |  PDFをブラウザで開く |  URLエンコード・デコード |  日時の絶対値表示 |  エクスプローラーで開く |  パブリック・個人用ビュー | 
SharePoint開発 Tips
開発の概要 |  開発者ダッシュボード |  MSDN URL |  RESTインターフェイス |  ページパラメータ IsDlg |  ビジュアルアップグレード |  機能(Feature) |  2010開発者向けの資格 |  2013開発者向けの資格 |  ページパラメータ contents |  リソースファイル |  リスト/ライブラリGUID |  テーマ |  トレースログ |  PowerShell文字コード |  SharePoint Framework | 
search this site.
SharePoint Online書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 


SharePointモダン リスト
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン | 
ひと目でわかるOffice 365ビジネス活用28の事例 SharePoint Server 2016対応版 (マイクロソフト関連書)

SharePointモダン Webパーツ
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー | 
ひと目でわかるOffice 365サイトカスタマイズ&開発編 SharePoint Server 2016対応版

SharePointモダン サイト
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 | 
ひと目でわかる SharePoint Server 2016




ひと目でわかるPowerAppsノンコーディングでのビジネスアプリ作成入門 (マイクロソフト関連書)

SharePoint情報サイト
Tech community(SharePoint)
SharePoint Developer Center
Support Team Blog
SharePoint Technical Note
ILLUMINATE JAPAN Blog
AvePoint Japan Community
idea.toString();
からめもぶろぐ。
Office 365 & PowerX
SPeed LAND 365
Art-Break:Tech


   風水吉凶方位 |  奇門遁甲 |  金運神社 |  金運本 |  水族館 |  仏像 |  論語 |  般若心経 |  庭園 |  二十四節気 |  菜根譚 | 
   SharePoint活用 |  OneNote活用 |  サーバー監視 |  イベントログ |  IT資産管理 |  技術TIPS