SharePoint Online も SharePoint 2013 にアップグレードされたテナントが増えてきて、SharePoint 2010 で定番であった細かなカスタマイズを再度見直す機会が増えてきました。今回は、SharePoint 2010 までも良く見かけた、リストのリッチテキスト フィールドをウインドウ幅に合わせて広げる(フィールドの幅を 100% に指定する)カスタマイズです。

フィールドの横幅を px 指定する方法は、SharePoint Maniacs さんでも紹介されていましたが、この CSS のみでは、入力フォームの幅を 100% 指定時には不十分であるようでしたので、補足になります。

CSS で SharePoint 2013 のリッチテキスト領域の幅を広げる
http://sharepointmaniacs.com/archives/4841

さっそく、そのスタイル指定方法

リッチテキスト フィールドの幅を広げたいフォームを開き、「ページの編集」から「スクリプト エディター」Web パーツを挿入するか、または、マスターページに下記のスタイルを記述します。

<style>
/*--フォームの外枠--*/
table#onetIDListForm{
	width:100% !important;
}
/*--拡張リッチ テキスト--*/
div#WebPartWPQ2>table,
div#WebPartWPQ2 .ms-formtable .ms-formbody{
	width:100% !important;
}
/*--リッチ テキスト--*/
div#WebPartWPQ2>table,
div#WebPartWPQ2 .ms-formtable .ms-formbody .ms-rtelonger,
div#WebPartWPQ2 .ms-formtable .ms-formbody .ms-rtelong{
	width:100% !important;
}
</style>

確認してみると、はい、ウインドウ幅に広がりました。

20131028-1

さいごに

入力フォームの幅が広がるだけで、ユーザーさんの利便性は大きく向上すると思います。ぜひお試しください。

ちなみに、複数行列には、「書式なしテキスト」「リッチ テキスト(太字、斜体、テキストの配置、ハイパーリンク)」「拡張リッチ テキスト(画像、表、ハイパーリンクを含むリッチ テキスト)」の3種類がありますが、「列の作成」画面では、「リッチ テキスト」を選択できません。「列の編集」画面では「リッチ テキスト」を指定できますが、SharePoint 2010 までのバージョンとの互換性確保のために残っているような気がします…どうなのでしょうか…?