SharePoint 2010 SPD による参照列 フィールドのサイズ変更

こんにちは、奥田です。

以前こちらの Blog で、入力フォーム内のリッチテキスト ボックスのサイズ変更を行う方法をご紹介しました。

SharePoint 2010 SPD によるリストフォーム リッチテキストのサイズ変更
https://crieilluminate.wordpress.com/2011/01/18/sharepoint-2010-spd-%e3%81%ab%e3%82%88%e3%82%8b%e3%83%aa%e3%82%b9%e3%83%88%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0-%e3%83%aa%e3%83%83%e3%83%81%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%ae%e3%82%b5/

お客様から、複数選択の参照列も同様に横幅を広げたいとご質問いただいたので、追記です。

上記記事と同様の操作で、SharePoint Designer 2010 でフォームをカスタマイズ加え、手順10のスタイルを加える部分に、下記スタイルを利用ください。

select
{
 
width:200px !important;
}

sa

  うさぎ

広告

SharePoint 2010 アイテムの表示画面でリボンを消す

こんばんは、奥田です。今日も SharePoint UI ネタです。
リスト内のアイテムをクリックすると、アイテムの表示画面がダイアログで開きますが、この際にダイアログ内に表示されるリボンを消す方法です。

Web ダイアログで開く DispForm.aspx を、内容確認画面として利用したいという要望があったため、リボンメニューは消してしまいたかったんです。

a

アイテムの表示画面 (DispForm.aspx、もしくは SPD で作成したアイテム表示画面) 内に下記スタイルを追加します。

#s4-ribbonrow
{
   display:none;
}

b

(画面ショットはリボンを消すだけではなく、表示形式も SPD で編集しています)

以上、奥田理恵でした。

SharePoint 2010 特定のページでサイド リンク バーを非表示に

こんばんは、奥田です。
今日はお客様からいただいた質問から、サイド リンク バーを特定のページで非表示にする Tips のご紹介です。

次のスタイルでサイド リンク バーは非表示となります。

#s4-leftpanel
{
  display : none;
}
.s4-ca
{
margin-left : 0px !important;
}

● 特定のページのみサイド リンク バーを消したい場合
   ・ SPD でページを開き、ソースコード内に上記スタイルを追加
   ・ コンテンツ エディター Web パーツでスタイルを追加

● サイト内全ページでサイド リンク バーを消したい場合
   ・ マスターページにスタイルを追加 (CSS ファイルでも master 内でも)

以上。奥田理恵でした。

SharePoint 2010 「現在のページは、元のテンプレートからカスタマイズされています。 テンプレートの状態に戻します。 」追記

こんにちは、奥田です。
以前、SharePoint Designer 2010 でページをカスタマイズしたときに遭遇した問題点の 解決方法 Tips として次の内容を投稿しました。
SharePoint 2010 「現在のページは、元のテンプレートからカスタマイズされています。 テンプレートの状態に戻します。 」

上記投稿では、「現在のページは、元のテンプレートからカスタマイズされています・・・」のメッセージを消すためにマスターページを編集する方法をご紹介しました。
今回はマスターページを編集しなくても、カスタマイズを加えたページのみの編集でメ
ッセージを消す方法を追記します。

<方法>
カスタマイズを加え、「現在のページは、元のテンプレートからカスタマイズされています・・・」のメッセージを消したいページ内に次のスタイルを追加します。

<style type=”text/css”>
div #s4-statusbarcontainer{
display:none;
}
</style>

マスターページを編集してメッセージを消した場合、ステータスバー自体がサイト内の全ページで表示されなくなってしまいます。「現在のページは、元のテン・・・」以外のメッセージも表示されません。
今回ご紹介した方法では消したいページのみのカスタマイズとなります。「現在のページは、元のテン・・・」のメッセージのみを消したい場合は、こっちのほうがよさそうですね。

以上、追記でした。

奥田理恵

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 「現在のページは、元のテンプレートからカスタマイズされています。 テンプレートの状態に戻します。 」

こんにちは、奥田です。
今日は SharePoint Designer 2010 でページをカスタマイズしたときに遭遇した問題点の 解決方法 Tips です。

まず SPD で行ったカスタマイズについてですが、
SharePoint 2010 で、トップページに SharePoint Designer 2010 で変更を加えました。
行った内容は PlaceHolderMain 内に <div> タグをいれ、その中に <img> タグをいれただけです。
(横幅いっぱいにキレイにおさまるよう用意したトップ画像を、トップページのコンテンツエリア内にきっちりおさめたかったんです。ブラウザーでの Wiki 編集で画像を入れるとどうしても横の padding が気になり。。
)

SharePoint 2010 では <SharePoint:EmbeddedFormField> 内の内容は SharePoint Designer 2010 で編集できるようになっていますが、それ以外の内容は、ソースコードが既定で黄色の背景となっており詳細モードにしないと編集できません。
今回 <PlaceHolderMain> 内にソースコードを追加したかったため、詳細モードにし、上記編集を行いました。

すると、「現在のページは、元のテンプレートからカスタマイズされています。テンプレートの状態に戻します。 」 とステータスバー内にメッセージが表示され、「テンプレートの状態に戻します」 をクリックすると、編集した内容が消えてしまいます。このメッセージが管理者にのみ表示されるのだったらまだいいのですが、、閲覧や投稿権限のユーザーにも表示されてしまいます。
image11

解決方法として、下記を行ってみました。
・ マスターページ内の下記ソースコードに赤字部分を追加。
ステータスバーが表示される <div> タグに ms-hide スタイルを適用させて非表示に。
下記タグをコメントアウトでもいいと思います。

<div id=”s4-statusbarcontainer” class=”ms-hide”>
<div id=”pageStatusBar” class=”s4-status-s1″>
</div>
</div>

ただ、この方法だとステータスバー全体が非表示となるため、今回消したいメッセージだけではなくステータスバー全体が非表示となってしまいます。
ステータスバー全体を非表示にするのが問題となるようであれば、このメッセージを含む場合のみ、 id が “s4-statusbarcontainer” の div タグを非表示にするような script を記述してもいいと思います。

詳細モードでページを編集することもままあることだと思うので、サイト コレクションレベルとかサイトレベルで、ステータスバーに表示するメッセージを消せるよう設定があればいいのに。。と思っちゃいました。

ということで、SharePoint Designer 2010 で、ページを詳細モードで編集した際の 「現在のページは、元のテンプレートからカスタマイズされています。テンプレートの状態に戻します。 」 メッセージを消す方法についてでした。

2011/02/07 追記

奥田理恵

SharePoint 2010 カスタム テーマの作成

こんにちは、奥田です。今日は SharePoint 2010 テーマについてです。テーマ機能は 2007 にもある機能で、サイトの色合いを簡単に変更できる機能ですが、2010 でしくみが変わっているのはみなさんご存じでしょうか。
次図は SharePoint 2010 のテーマ設定画面です。
 

<2010 での変更点>
■ 標準搭載のテーマから選択するだけではなく、ブラウザー操作でのテーマのカスタマイズが行えるようになっています。
(次図は設定画面)  

テーマのしくみ、カスタマイズ方法が変更されています。
  SharePoint 2007 では、12\TEMPLATE\THEMES フォルダー以下に CSS や画像ファイルをフォルダーに入れて格納し、12\TEMPLATE\LAYOUTS\1041 フォルダー内にある SPTHEMES.XML にテーマとして利用できるよう定義情報を追加していました。(SharePoint ハイブ以下を変更するため IIS 再起動が必要)
SharePoint 2010 ではテーマの定義ファイルは、thmx ファイルに変更され、ブラウザーでの設定 (上図) やPowerPoint 2010 を利用してカスタム テーマの作成が可能になっています。
これまではテーマの作成は CSS 編集やサーバーへの定義ファイルの展開が必要となることから、エンドユーザー側ではなかなかカスタマイズが難しいものでしたが、ブラウザー操作や PowerPoint 2010 を利用したカスタマイズが可能になったことによりテーマの作成は開発者ではなくエンドユーザーが行える内容となっています。(その分カスタマイズできる範囲は狭くなっており、CSS 編集によるデザインを実現したい場合はマスターページ作成が必要です)

<SharePoint 2010 でのテーマカスタマイズ方法>
■    ブラウザー操作でのテーマカスタマイズ
1. [サイトの操作] – [サイトの設定] をクリックしてサイトの設定画面を開く
2. 外観セクションにある [サイトのテーマ] をクリックする
3. サイトのテーマ画面の [テーマのカスタマイズ] で設定を行う    

■    PowerPoint 2010 でのカスタムテーマ作成
1. PowerPoint 2010 を開く
2. [デザイン] タブの [配色] – [新しい配色パターンの作成] をクリックする
3. [新しい配色パターンの作成] ダイアログ ボックスで設定を行う
4. [ファイル名] – [名前を付けて保存] をクリックし、Office テーマ (.thmx) ファイルとして保存する
5. テーマ ギャラリー (http://トップレベル サイト URL/_catalogs/theme/) に保存した thmx ファイルをアップロードする
6. テーマの設定画面でテーマを変更

<設定できる内容 (主な内容)>
 
① サイド リンク バー内の見出し:テキスト/背景:濃色2
② サイド リンク バー内のリンク  :テキスト/背景:濃色1
③ トップ リンク バー :アクセント 1
④ サイトのタイトル  :テキスト/背景:濃色2
⑤ リボン内のメニュー (サイトの操作など) :テキスト/背景:濃色2
⑥ リボンタブ  :テキスト/背景:淡色1
⑦ トップ、サイドの背景色 :テキスト/背景:淡色2
⑧ ページ内の文字列 :テキスト/背景:濃色2
⑨ ハイパーリンク :ハイパーリンク
⑩ コンテンツ エリアの背景色 :テキスト/背景:淡色1

以上です。 奥田理恵でした。