Japan SharePoint Group勉強会 #10でお話させて頂いた資料です。

1. SharePoint 2013
ロゴの秘密
Japan SharePoint Group #10 @大阪
2013/8/3
株式会社内田洋行 太田浩史

2. 自己紹介
太田 浩史 （おおた ひろふみ）
• 株式会社 内田洋行 （http://www.uchida.co.jp）
– オフィスと教育と情報の会社
– 「働き・学び」の変革
• SharePoint への関わりは MOSS 2007 から。
• Windows から SharePoint まで、サーバ構築から開発まで導入サポート
• 社内でも Notes を Office 365（SharePoint Online）へ移行
• “基本的” には SharePoint 一筋で。

3. ブログ idea.toString();
http://idea.tostring.jp/
「idea.tostring」を bing で検索すると出てきます。

4. 個人的な活動
Ota Hirofumi
https://facebook.com/hrfm.jp
@hrfmjp
https://twitter.com/hrfmjp
Hirofumi OTA
http://www.slideshare.net/hirofumi_ota

5. SharePoint 2013 のロゴって？

6. 文言を変更
いつも表示されている部分なので、企業名とかに
変更したい…。
SharePoint 管理シェルで変更します。
$web = Get-SPWebApplication 'http://sps2013‘
$web.SuiteBarBrandingElementHtml = @‘
<div class="ms-core-brandingText">idea.toString();</div>
@’
$web.Update()

7. 変更できました
詳細はブログに記載しています。
http://idea.tostring.jp/?p=508
HTMLのタグを指定できるということは…、
ほかにも色々出来そう…。
ナビゲーションとか作れるんじゃないかな？

8. というわけで、やってみました
$web = Get-SPWebApplication 'http://otasps2013'
$web.SuiteBarBrandingElementHtml = @"
<style>
#cssmenu{
float:left;
border:none;
border:0px;
margin:0px;
padding:0px;
font-size:14px;
font-weight:bold;
}
#cssmenu ul{
height:30px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px;
}
#cssmenu li a{
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 15px;
text-align:center;
text-decoration:none;
color:#FFFFFF;
}
#cssmenu li a:hover, #cssmenu ul li:hover a{
background: #2580a2;
color:#FFFFFF;
text-decoration:none;
}
#cssmenu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:150px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:150px;
}
#cssmenu li:hover li a{
background:none;
}
#cssmenu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover
a{
background:#2580a2;
border:0px;
color:#ffffff;
text-decoration:none;
}
#cssmenu p{
clear:left;
}
</style>
<div id='cssmenu' style="float:left;">
<ul>
<li class='active '><a
href='index.html'><span>Home</span></a>
</li>
<li class='has-sub '><a
href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product
1</span></a></li>
<li><a href='#'><span>Product
2</span></a></li>
</ul>
</li>
<li><a
href='#'><span>About</span></a></li>
<ul>
<li><a href='#'><span>About
1</span></a></li>
<li><a href='#'><span>About
2</span></a></li>
<li><a href='#'><span>About
3</span></a></li>
<li><a href='#'><span>About
4</span></a></li>
</ul>
<li><a
href='#'><span>Contact</span></a></li>
</ul>
</div>
"@
$web.Update()

9. マウス ホバーで、ドロップダウン メニューなども自由自在！
しかも Web アプリケーションの設定なので、サイトコレクションを
またがるグローバル ナビゲーションになりました！！
その結果

10. まとめ
• 左上のロゴは、PowerShell で変更できる
• 変更時にHTMLを指定できる
• 適用範囲は Web アプリケーション
• 使い方はいろいろ
スクリプトなんかも埋め込めると思います。

11. 参考資料
ナビゲーションのスタイルやタグについて、
下記のWebページを参考にさせて頂きました。
CSSだけで作る動きのあるドロップダウンメニュー
http://weboook.blog22.fc2.com/blog-entry-
359.html
CSS Drop Down Menus
http://cssmenumaker.com/css-drop-down-menu