SharePoint Online/SharePoint Server 2013(2010) – リストやライブラリで列を表示する幅を調整したい

ここ最近というわけではないですが、よくいただく質問から第3弾です。

■ 質問内容

リストやライブラリのビューで、列幅を調整できないか？

■ 詳細

入力されたデータ内容 (文字数) により、またブラウザーのサイズにより途中でデータが折り返して表示される場合があり、どうしても折り返して表示したくないデータがあるときです。

そして下図のように列のデータ型によって、折り返して表示されるものとされないものがあります。よく利用しがちな [一行テキスト] は折り返しされますね。下図リストには含まれていませんが [複数行テキスト] も折り返されるほうです。対して [選択肢] や [数値]、[日付と時刻] は折り返しされないようです。

 

■ 解決方法

まず設定のみではできません。CSS をビューの aspx 内に挿入する必要があります。

１． 列幅を調整したいと思っているビューを開きます。
２． [設定] – [ページの編集] をクリックします。
  
３． ページが編集モードに切り替わるため、[Web パーツの追加] をクリックし、コンテンツ エディター Web パーツを挿入します。
  
４． 一番上に挿入されたコンテンツ エディター Web パーツをドラッグ操作で、ビューの下に移動します。
  

５． コンテンツ エディター Web パーツ内の [ここをクリックして新しいコンテンツを追加] をクリックします。
    そしてコンテンツ エディター Web パーツ内にマウス カーソルをあわせ、リボン内の [テキストの書式設定] タブ – [ソースの編集] をクリックします。 

 ※ コンテンツ エディター Web パーツ内に [ここをクリックして新しいコンテンツを追加] が表示されない場合は、
    まずコンテンツエディター Web パーツの設定画面を表示してください。
    トップページに配置した Web パーツに対して同様のことを行う場合など、サイトのページ内に配置したコンテンツ エディター Web パーツではそうなります。

６． [HTML ソース] に次の CSS コードを追加し、[OK] をクリックします。

<style type="text/css">
.ms-vh-div[DisplayName=’列の表示名を入れてください’]
{
   width:250px;
}
</style>

       ※ 列の表示名や、列幅は任意に変更
    

７． [ページ] タブの [編集の終了] をクリックして保存します。
  

指定した列幅で表示されるように変更されました。
 

• この方法を行った場合の注意点
  

まず、SharePoint の既定のスタイル クラス名を利用しているため、SharePoint 側で生成されるクラス名が変わると、たちまち動作しなくなります。たとえば SharePoint Online の場合だと大きな Update とか、SharePoint Server 2016 になったときとか。
個人的にはおそらく大丈夫だと思います。なぜかって、おんなじコードで SharePoint Server 2010 でも動作するんですよね、コレ。というか 2010 のときから使ってた Tips です。リストの基本はあんまり変わらないかと。もし変わったとしても、列幅が変更になるくらい大したことないですし。

それよりも、これをやると、ビューを開いた際に [アイテム] タブと [リスト] タブが既定で表示されなくなります。ライブラリで行った場合や [ファイル] タブと [ライブラリ] タブですね。

こんな感じ↓
 

どれでもいいので、リストアイテムを選択すると出てくるのですが。。
 

微妙ですよね。
コンテンツ エディター Web パーツだけではなく、ビューの aspx 内に Web パーツを追加するとこうなるんですよね。。
これも 2010 でもおんなじです。

もしこうなるのがどうしてもいやだ、でも列幅は調整したいんだ！って場合は、面倒ですが、SharePoint Designer 2013 で同様の CSS を追加してください。

１． SharePoint Designer 2013 で対象サイトを開きます。
２． 左側のサイト オブジェクトより [リストとライブラリ] をクリックします。
３． リストとライブラリの一覧が開くため、対象リストもしくはライブラリをクリックして開きます。
４． 対象リスト、ライブラリが開いたら、[ビュー] カテゴリーより、列幅調整 CSS を挿入したいビュー名をクリックします。
  
５． ビューが編集画面 (ソースコード) で開きます。ほとんどのコードが黄色い背景で表示されているかと思います。
       これ、コード編集にロックがかかっている状態ですので、[ホーム] タブより [詳細モード] をクリックします。
  

6．<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> タグ内に CSS を挿入してください。他のタグの間にいれたりしないようにご注意を。
  自信ない方は <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> タグのすぐ下がおすすめ。
  

7.  上書き保存します。

この方法だと、Web パーツを追加しているわけではないため、リボンタブが既定で表示されない！ってことにはなりません。
 

以上、リストやライブラリのビューで、列幅を調整する方法のご紹介でした。
さて、最後にちょっと考えてみてください。ここまでやってまで本当にその列幅、調整する必要ありますか？
「はい！」 って自信もてる場合はぜひ活用してやってください。ある程度、標準機能や画面を受け入れて、うまく利用するのが SharePoint の本当の活用です♪

奥田