SharePointのページに下部固定のフッターをつけてみた

SharePointのページにフッターをつけたい場合、通常はマスタページをカスタマイズすることになると思います。
しかし、マスタページをいじれないエンドユーザー・デベロッパーとか、SharePoint Onlineでカスタムマスタページを作りたくない!という場合はちょっと工夫が必要となります。

以下で紹介するのは、JavaScriptでフッター要素をページに追加し、CSSでスタイリングする方法です。
ページのコンテンツが少ない場合はウィンドウの最下部、それ以外はページ最下部に固定で表示されます。
検証した環境はSharePoint2013オンプレミスのチームサイト、ブラウザがIE11、マスタページはデフォルトのseattle.masterです。

できあがりはこんな感じ。
20150624

ソースコードです。

<style>
#s4-bodyContainer {
    position:relative;
    min-height: 100%;
    padding-bottom: 30px;
    box-sizing: border-box;
}
/* footer */
.footer-container{
    position:absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
    background-color:#29629C;
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
</style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var footerHtml = "<div class='footer-container ms-dialogHidden'>";
    footerHtml += "<footer>© Marineko. All rights reserved.</footer></div>";
    $("#s4-bodyContainer").append(footerHtml);
});
</script>

マスタページはさわりたくないんだよね~、というときに、参考にしてみていただければと思います。

広告

SharePointのページに下部固定のフッターをつけてみた」への1件のフィードバック

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中