インフォシェア株式会社 小林茉利奈
みなさま、こんにちは。インフォシェアの小林と申します。
本稿では引き続き Web パーツの話題で、コンテンツ エディター Web パーツについてご紹介いたします。
コンテンツ エディター Web パーツを使用すると、 Word のように書式を自由に設定したり、表やハイパーリンク、画像等を挿入したりすることができます。
さらに、 HTML 等を挿入することができるので、ちょっとした開発に使われることがあります。
Web パーツと言えばサイトのトップページという印象を持たれている方も多いかと思いますが、実は、リストやライブラリのページも Web パーツによって構成されており、追加や削除が可能です。
下図では、「早出/残業/休出申請」リストのページに下記の Web パーツを追加して、検索フィルターを作成しました。
・「クエリ文字列( URL )フィルター」 Web パーツ
（所属部署列に接続しています）
・コンテンツ エディター Web パーツ
（HTML を挿入して所属部署のボタンを作成しています）
所属部署のボタン（赤枠）をクリックすると、該当する所属部署（緑枠）のアイテムのみが表示されるようになっています。
このように、コンテンツ エディター Web パーツは工夫次第で様々な用途に用いることができます。
■参考
コンテンツ エディター Web パーツについてより詳しく知りたい方は、下記を参考にしてください。
コンテンツ エディター Web パーツを使用する(SharePoint Server2010)：
https://support.office.com/ja-jp/article/コンテンツ-エディタ-Web-パーツ-c1350ff6-934c-4c2e-8e53-1ec3b548a0dc
以下では、リストやライブラリのページで Web パーツを追加する方法と、コンテンツ エディター Web パーツの設定方法をご紹介します。
(1)リストやライブラリのページでWebパーツを追加する方法
1.Web パーツを挿入したいページを開きます。
2.[設定]をクリックし、[ページの編集]を選択します。
3.[Web パーツの追加]をクリックします。
4.追加したい Web パーツを選択して、[追加]をクリックします。
コンテンツ エディター Web パーツは「メディアおよびコンテンツ」カテゴリにあります。
5.Web パーツの編集等が完了したら、ページ上部の[ページ]タブの[編集の終了]をクリックします。
※「現在のページの編集を中止します。」と表示されますが、実際には中止ではなく編集内容が保存されるので注意してください。
サイトのトップページでは、[編集の終了]をクリックすると、変更内容の[保存][変更の破棄][キャンセル]を選択できます。
以上で Web パーツの追加ができました。
(2)コンテンツ エディター Web パーツの設定方法
書式の変更や段落の設定は[テキストの書式設定]タブより行います。
表や画像、リンクの挿入は、[挿入]タブより行います。
HTML 等の書き込みは[テキストの書式設定]タブの[ソースの編集]より行います。
今回は、所属部署に接続しているクエリ文字列( URL )フィルター Web パーツの[クエリ文字列のパラメーター名]を"department"と設定して、下記の HTML を書き込みました。
≪HTML≫
総務部
<input onclick="location.href='?department=経理課'" type="button" value="経理課" style="width: 90px;"/>
<input onclick="location.href='?department=庶務課'" type="button" value="庶務課" style="width: 90px;"/>
<input onclick="location.href='?department=人事課'" type="button" value="人事課" style="width: 90px;"/>
<br/>営業部
<input onclick="location.href='?department=個人営業課'" type="button" value="個人営業課" style="width: 90px;"/>
<input onclick="location.href='?department=法人営業課'" type="button" value="法人営業課" style="width: 90px;"/>
<br/>ＩＴ部
<input onclick="location.href='?department=サポート課'" type="button" value="サポート課" style="width: 90px;"/>
<input onclick="location.href='?department=システム開発課'" type="button" value="システム開発課" style="width: 90px;"/>