SharePoint 2010 SPD によるリストフォーム リッチテキストのサイズ変更

「リッチテキスト コントロールのサイズが小さいよぅ!」
SharePoint リストに入力する際に、思ったことはないですか?
今日は SharePoint
リストの入力フォームについて、リッチテキストのサイズを大きくする方法を記載します。
SharePoint Server 2010 で InfoPath によるフォーム カスタマイズが行える場合はいいですが、Enterprise ではない場合は InfoPath でリスト フォームのカスタマイズは行えないし、Enterprise の場合も管理メタデータ列や発行イメージ列を利用している場合は InfoPath では扱えない列となるため InfoPath でのカスタマイズは難しくなってしまいます。また、予定表リストのフォームは InfoPath でのカスタマイズはサポートされていません。

私も、予定表の入力フォーム内の [説明] 列について、リッチテキストコントロールのサイズを変更したいと思ったのがこの投稿のきっかけです。
ということで、予定表の入力フォームを例に、SPD を利用した、リストフォーム内のリッチテキストのサイズ変更方法をご紹介します。

  1. SharePoint Designer 2010 でサイトを開く
  2. [リストとライブラリ] 一覧から対象のリストをクリックして開く
  3. [フォーム] をクリック
    form1
  4. フォームの一覧が開くので、リボンから [新しいアイテムのフォーム] をクリック
    (表示フォーム、編集フォームもリボン内メニューから作成可能です)
    form2
  5. [新しいリスト フォームの作成] ダイアログが開くので、ファイル名などの必要な内容を入力して、[OK] をクリック
    form3
  6. フォームの一覧に追加したリストフォーム (aspx ファイル) が追加されるので、[既定に設定] をクリックして既定の新規作成フォームとして設定
    form4
  7. 作成したリストフォーム (aspx ファイル) をクリックしてエディターで開きます。
    既定のリッチテキスト (予定表の場合は [説明] 列) はマウス等でサイズを大きくしようとしても、できないはずです。
    form5
  8. コントロールのプロパティ等ではサイズ変更ができないため、ページ内にインラインでスタイルを追加することによりサイズを変更します。
    既定のままではソースコードすべては編集できないようになっているため、リボン内の [ホーム] タブの [詳細モード] をクリックします。
    ※ 既定では、ページ内ソースコードを簡単には編集できないよう、ソースコードのほとんどの部分が黄色背景で表示されています。[詳細モード] をクリックすると、この黄色背景が消え、すべてのソースコードが編集可能となります。
    (誤ったソースコード編集によってページを壊してしまう可能性があるのでご注意を。今回ご紹介している手順では NewForm.aspx を直接編集しているのではなく、NewForm2.aspx を作成しているため、最悪編集途中で NewForm2.aspx を壊してしまって元に戻せなくなった場合も NewForm.aspx を既定に戻せば大丈夫です)

  9. ソースコード内の次の箇所を探します。(550 行目あたり)
    <asp:Content ContentPlaceHolderId=”PlaceHolderBodyAreaClass” runat=”server”>
    <style type=”text/css”>
    .ms-bodyareaframe {
    padding: 8px;
    border: none;
    }
    </style>
    </asp:Content>
  10. 探したコードのスタイル定義に、スタイルを追加します。(赤字を追加)
    説明するまでもないと思いますが、ここで指定した width と height がリッチテキストのサイズになります。
    <asp:Content ContentPlaceHolderId=”PlaceHolderBodyAreaClass” runat=”server”>
    <style type=”text/css”>
    .ms-bodyareaframe {
    padding: 8px;
    border: none;
    }
    .ms-rtelong {
    width:500px;
    height:500px;
    }
    </style>
    </asp:Content>
  11. 上書き保存して、動作確認します。
    リッチテキストが指定したサイズで表示されます。
    form6

以上、リストフォーム内の入力しにくいちっちゃいリッチ テキストのサイズを大きくするカスタマイズ方法でした。

奥田理恵

SharePoint 2010 SPD によるリストフォーム リッチテキストのサイズ変更」への1件のフィードバック

  1. ピンバック: SharePoint 2010 SPD による参照列 フィールドのサイズ変更 « クリエ・イルミネート ブログ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中