SharePoint Online 注目リンクのカスタマイズ方法

SharePoint Online : 2017.04.24 Monday

注目リンクのページング

注目リンクのタイル数が多くなると、ページングされて 境界のタイルが「途中まで表示」となります。
Internet Explorerの画面サイズを小さくすると、やはり 「途中まで表示」となります。
ページの縦幅を節約する場合は、これでいいのですが すべてのタイルをメニューとして表示したい場合には 困ります。
sp-promotedCustom-01

そんな時は、スクリプトエディタWebパーツに CSSを追加して カスタマイズすれば、注目リンクの折り返し表示ができます。
sp-promotedCustom-02

スクリプトエディタに挿入する CSS(StyleSheet)は、以下の通りです。




注目リンクの形状

注目リンクのタイル 150x150 Pixelの四角ですが、「丸」にもできます。
背景イメージも 丸に合わせたり、タイトルや説明も 丸に合わせる必要がありますが。
sp-promotedCustom-03

スクリプトエディタに挿入する CSS(StyleSheet)は、以下の通りです。



「丸」まで極端ではなく・・・「角丸」の柔らかな感じにするには、上記の CSSで「border-radius: 50%;」を「border-radius: 25px;」にすれば 角丸になります。
sp-promotedCustom-04

「border-radius: 」は、水平方向/垂直方向の四隅の半径が指定できます。上だけ角丸とか、下だけ角丸とか・・・アイディア次第で色々できます。
・水平方向の左上 半径
・水平方向の右上 半径
・水平方向の右下 半径
・水平方向の左下 半径
・垂直方向の左上 半径
・垂直方向の右上 半径
・垂直方向の右下 半径
・垂直方向の左下 半径

(2017/08/某日 追記)
注目リンク(リスト)に、新しい列「背景イメージ クラスターの水平方向の開始位置」「背景イメージ クラスターの垂直方向の開始位置」が追加されましたね。

Promoted Link Columns

背景イメージ画像が いままでは 左上の原点から始まって 固定サイズ(150x150ピクセル)に縮小表示されていましたが、新しい列で 開始位置を指定すると そこから背景イメージ画像が表示されます。画像を 真ん中に寄せたり、エッジの部分を作ったりできますね。


【最近の投稿記事】

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