PWA サイト上でグリッドの列ヘッダーの表示幅が狭く、文字がすべて表示されない現象の対処方法について

こんにちは、SharePoint サポートの森村です。
今回の投稿では、Project Server 2013 および Project Online の PWA (Project Web App) サイト上でグリッドの列ヘッダーの表示幅が狭く、列ヘッダー内の文字がすべて表示されない現象への対処方法についてご案内いたします。

PWA サイト上にはプロジェクト センター等、多数のグリッドを使用するページが存在します。
現時点の製品の動作として、下記 2 点のページにてグリッドの列ヘッダーの表示幅が狭く、また列の幅を変更することはできないため、文字がすべて表示されない現象が発生することを確認しています。

項目 1) リソース計画のページ (プロジェクトセンターから個々のプロジェクトを選択後に、[プロジェクト] タブから [リソース計画] をクリック)

項目 2) ポートフォリオ分析のリソース分析の要件の詳細ページ (リソース分析のページにて、[分析] タブ内の [要件の詳細] をクリック)

それぞれについて対処方法をご案内します。

項目 1) リソース計画のページ内の文字サイズ スタイルを変更する方法 (スクリプト エディタ Web パーツの使用)

スクリプト エディター Web パーツにてページ内のスタイル情報を上書きし、列ヘッダーの文字サイズを変更することで現象の回避を行います。こちらの方法は「リソース計画のページ」にて使用可能です。

本方法を実施した場合、リソース計画のページ内の日付情報以外の列ヘッダー部分 ([リソース名] 等) の文字サイズは変更されますが、リソース計画のページ以外には影響を与えません。
このため、ポートフォリオ分析の機能を使用していない場合は、こちらの対処方法のみをご利用いただくことをお勧めします。

手順 ====

1. 管理者の権限にて PWA サイトを表示します。

2. サイド リンク バーから [プロジェクト] をクリックし、[プロジェクト センター] を表示します。

3. いずれかのプロジェクト名をクリックし、プロジェクトの詳細を表示します

4. リボン メニューの [プロジェクト] タブから、[リソース計画] をクリックします。

5. リソース計画のページが表示されたら、右上の歯車のアイコンをクリックし、[ページの編集] を選択します。

6. [メイン] の部分にある [Web パーツの追加] をクリックします。

7. Web パーツの一覧が上部に表示されるので、ここから [カテゴリ] 内の [メディアおよびコンテンツ] を選択し、右側に表示された [スクリプト エディター] を選択し、右側に表示されている [追加] ボタンをクリックして Web パーツを追加します。

8. [メイン] 部分に [スクリプト エディター] と表示されている Web パーツが追加されます。右側に表示されている [スニペットを編集] をクリックします。

9. [埋め込み] というダイアログが表示されます。「スクリプト、または埋め込みコードを以下に貼りつけます。」のテキスト ボックス内に、下記のスタイル情報をコピーして貼り付けを行い、[挿入] をクリックします。(グリッドに表示される列ヘッダー内の文字サイズを 11px に変更する、という内容となります。)

   <style type="text/css">

   .ms-grid-col-header-normal

   {

   font-size:11px;

   }

    

   .ms-grid-col-header-normal-hover

   {

   font-size:11px;

   }

    

   .ms-grid-col-header-part-selected

   {

   font-size:11px;

   }

    

   .ms-grid-col-header-part-selected-hover

   {

   font-size:11px;

   }

    

   .ms-grid-col-header-all-selected

   {

   font-size:11px;

   }

    

   .ms-grid-col-header-all-selected-hover

   {

   font-size:11px;

   }

   </style>

10. リボン メニューの [ページ] タブ内にある [編集の終了] をクリックします。

11. リソース計画のページの列ヘッダー内の文字サイズが変更され、日付情報がすべて列ヘッダーセル内に表示されます。
    また、3) で選択したプロジェクト以外のリソース計画のページの表示につきましても上記手順にて変更が行われます。
    なお、表示に変化が無い場合は、Ctrl+F5 でブラウザーの再読み込みを行ってください。

対処方法実施後のリソース計画ページの表示

項目 2) PWA サイト全体のグリッドのヘッダー内の文字サイズ スタイルを変更する方法

上記のスクリプト エディター Web パーツを使用する方法は、ポートフォリオ分析のリソース分析ページには使用できません。
ポートフォリオ分析のリソース分析ページの対処方法としては、スタイル ライブラリ内のスタイルシート情報を編集し、PWA サイト内のグリッドに表示される列ヘッダー内の文字サイズを変更することで、リソース分析のページの列ヘッダー内の文字がすべて表示される動作となります。

このため、本方法を実施した場合、併せて「リソース分析のページ」の現象も解消しますが、その他、PWA サイト内のプロジェクト センター等、グリッドを使用するページすべてにて、列ヘッダー内の文字サイズが変更されます。

手順 ====

1. 管理者の権限にて PWA サイトを表示します。

2. [ポートフォリオ分析] メニューをクリックし、作成済みのポートフォリオ分析一覧を表示させます。

3. [ポートフォリオ選択シナリオ] のうち、[リソース] の分析を行っているものをクリックします。

4. リソース分析のページが表示されますので、[分析] タブ内の [要件の詳細] をクリックします。

5. 右クリックメニューから [ソースの表示] を選択します。

6. 表示されたソースにて、10行目前後に下記のような jsgrid を含むスタイル シートへのリンク情報が存在するので、その内容をテキストファイル等にメモします。ソースのページを閉じます。

   例 :
   <link rel="stylesheet" type="text/css" href="/PWA/_catalogs/theme/Themed/4949467C/jsgrid-97164DC0.themedcss?ctag=1"/>

7. 右上の歯車のアイコンをクリックし、[サイトの設定] メニューを選択します。

8. [Web デザイナー ギャラリー] 以下の [テーマ] をクリックします。

9. [Themed] フォルダを開き、手順 6) にて確認したフォルダを開きます。(上記の例では、4949467C が対象です。)

10. フォルダ内にファイル情報が表示されますので、次のページを表示し、手順 6) で確認した jsgrid-97164DC0 が存在することを確認します。(表示されていませんが、拡張子は themedcss となります。)
    jsgrid-97164DC0 が表示されていない場合は前後のページをご確認ください。

11. themedcss ファイルの右の [...] をクリック、ポップアップした画面の [...] をクリック、[コピーのダウンロード] をクリックします。

12. themedcss ファイルのバックアップを取得しておきます。

13. themedcss ファイルをテキストエディタで開きます。

14. ファイル内にて ms-grid-col-header のキーワードで検索し、font-size:1em; と指定している 6 か所の部分を、例えば font-size:10px; に修正し、保存します。

    ---------------------
    修正前
    ---------------------
    .ms-grid-col-header-normal
    {
    font-size:1em;

    (中略)

    .ms-grid-col-header-normal-hover
    {
    font-size:1em;

    (中略)

    .ms-grid-col-header-part-selected
    {
    font-size:1em;

    (中略)

    .ms-grid-col-header-part-selected-hover
    {
    font-size:1em;

    (中略)

    .ms-grid-col-header-all-selected
    {
    font-size:1em;

    (中略)

    .ms-grid-col-header-all-selected-hover
    {
    font-size:1em;

    ---------------------
    修正後
    ---------------------
    .ms-grid-col-header-normal
    {
    font-size:10px;

    (中略)

    .ms-grid-col-header-normal-hover
    {
    font-size:10px;

    (中略)

    .ms-grid-col-header-part-selected
    {
    font-size:10px;

    (中略)

    .ms-grid-col-header-part-selected-hover
    {
    font-size:10px;

    (中略)

    .ms-grid-col-header-all-selected
    {
    font-size:10px;

    (中略)

    .ms-grid-col-header-all-selected-hover
    {
    font-size:10px;

15. [Web デザイナー ギャラリー] - [テーマ] をクリックし、[Themed] – [<対象のテーマ>] フォルダを開き、リボン メニューの [新しいドキュメント] をクリックします。

16. [ファイルの選択] にて手順 14) で変更した themedcss ファイルを指定し、[OK] をクリックします。
    「ドキュメントは正常にアップロードされました。このフォームを使用して、ドキュメントのプロパティを更新してください。」と表示された後、[保存] をクリックします。

17. 再度 [リソース分析] のページの表示を確認します。表示が変更されていない場合は、Ctrl+F5 でブラウザーの再読み込みを行います。

対処方法実施後のリソース分析ページの表示

なお、本方法実施の場合、プロジェクト センター等のグリッドに表示される列ヘッダー内の文字サイズが変更されますが、「スクリプト エディター Web パーツを使用し、グリッドのヘッダー内の文字サイズ スタイルを変更する方法」の方法をプロジェクト センター等に適用することで、手間はかかりますがその他のページへの影響を防ぐことが可能です。

プロジェクトセンター等の場合は列ヘッダー内の文字サイズは 13px となっているため、例えば下記のスタイル情報をスクリプト エディター Web パーツに登録することで、以前と同じ表示となることをご確認いただくことが可能です。

<style type="text/css">
.ms-grid-col-header-normal
{
font-size:13px;
}

.ms-grid-col-header-normal-hover
{
font-size:13px;
}

.ms-grid-col-header-part-selected
{
font-size:13px;
}

.ms-grid-col-header-part-selected-hover
{
font-size:13px;
}

.ms-grid-col-header-all-selected
{
font-size:13px;
}

.ms-grid-col-header-all-selected-hover
{
font-size:13px;
}
</style>

いかがでしたか。

今回の投稿は以上です。

(2014/12/22追記)

関連サポート技術情報が公開されましたので、ご案内させていただきます。

タイトル : Project Server 2013 の PWA サイト上にて、日付が表示されるセルの幅が狭く、日付が正しく表示されない現象が発生する

URL : https://support.microsoft.com/kb/3025500