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

SharePoint Online : 2017.12.04 Monday

前回の記事「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やるってよ |  Office 365市販本(1) |  Office 365市販本(2) |  MSサイトでプランを勉強 |  TechNetでプランを勉強 |  sway, cortana, delve |  E5プラン |  Office Online制限 |  SharePoint 2016 RC |  アーキテクチャ |  Connections, Listings, Invoicing | 
SharePoint Online Webパーツ(クラシック)
標準 Webパーツ |  スクリプトエディタ |  RSSビューア |  フィルタWebパーツ |  XsltListViewWebPart |  グラフ表示パーツ | 
SharePoint Online リスト/ライブラリ
標準 リスト/ライブラリ |  アンケート(Survey) |  画像ライブラリ |  ニュースフィード |  日英サイト間でリストデータ移行 |  ライブラリ ドラッグ&ドロップ |  ライブラリ ファイル一覧出力 |  リスト外観変更 |  Explorer URL |  ディスカッション掲示板 |  注目リンク |  OneDrive 通知メール送信 |  OneDrive バージョン履歴 |  複数ファイルダウンロード |  アイテムはレコードです |  列の書式設定(Column Formatting) | 
SharePoint Online リスト/ライブラリ/ページ(モダン表示)
モダン ドキュメントライブラリ |  モダン リスト・ライブラリ |  モダン ナビゲーション |  モダン サイトのロゴ |  モダン コマンドバー |  モダン ビュー |  モダン フォーム |  モダン サイト情報 |  モダン ページ、Webパーツ |  モダン ホームページ設定 |  Seattle から Oslo そして Modernへ |  モダン Webパーツページの管理は使えない |  モダン Webパーツ リスト、ライブラリ |  モダン Webパーツ 埋め込み |  モダン サイドリンクバーの有効化 |  モダン Webパーツ ファイルビューア― |  モダン Webブラウザ幅に応じた表示 |  モダン ページ タイトルと画像 |  モダン Webパーツ リンク |  モダン Webパーツ クイックリンク | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online Notes移行
Notes情報表示 |  Notesデータ移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont Online 動作仕様
制限値が気になる |  Webページ破損 |  サイトコレクション削除 |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイトメールボックス |  標準 サイト |  サイドリンクバー |  外部ユーザー共有 |  おすすめ エラー |  直打ちURL |  外観変更エラー |  サイトコレクション機能 |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  外部共有サイト、外部ユーザー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  外部ユーザー削除 Remove-SPOExternalUser |  お知らせタイルとエクスペリエンスバージョン | 
Office 365 動作仕様
OneDrive概要 |  OneDrive設定 |  OWAエラー画面 |  新しい Office 365管理センター |  Office 365メッセージ |  OneNote同期/ファイル |  Office 365サイト |  Office 365監査ログ |  Project Web App |  機能更新とエラー画面 |  Outlook Webのメッセージ | 

search this site.
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

SharePoint情報サイト
SharePoint Developer Center
Support Team Blog
松崎 剛 Blog
SharePoint Developer
SharePoint Technical Note
ILLUMINATE JAPAN Blog
SharePoint Factory
新卒管理者の奮闘ブログ
SharePoint Maniacs
AvePoint Japan Community
idea.toString();
SharePoint Issue
Office365/SharePoint



   風水吉凶方位 |  奇門遁甲 |  金運神社 |  金運本 |  気場 |  水族館 |  イルカ |  ペンギン |  クラゲ |  仏像 |  論語 | 
   般若心経 |  日本庭園 |  二十四節気 |  菜根譚 |  城郭
   情報共有(SharePoint) |  OneNote活用 |  サーバー監視 |  イベントログ |  IT資産管理 |  技術TIPS