Office 365 SharePoint サイト [Office 365] ロゴ、リンク先の変更 (マスターページに js を組み込む)

こんにちは、奥田です。今日は Office 365 サイトのデザイン カスタマイズ ネタです。

code0602_1

Office 365 サイトの左上部に表示される Office 365 ロゴについて、リンク内容を変更する Tips です。
マスターページに javascript を組み込む Tips としても活用いただけると思います。

オンプレ SharePoint Server 2013 ではタグ構造が異なるため、ご紹介している javascriptでは動作しません。
対象のタグ ID を見つけてアレンジいただく or 太田さんのステキ Blog にオンプレの場合 PowerShell にて左上部の SharePoint ロゴを変更できる方法を記載されていますので、ご参考に。
   
idea.ToString() 「SharePoint 2013 左上の製品ロゴを変更する

 サイト コレクション機能の [発行インフラストラクチャ]、サイト機能の [発行機能] がアクティブ化されている
   トップ レベル サイトで操作してください。

1.マスターページ ギャラリーをエクスプローラーで開く

2.seattle.html をデスクトップ等任意の場所 (ローカルPC上) にドラッグアンドドロップしてコピー

3.デスクトップ等任意の場所にコピーした html ファイルの名前を変更。(例:myseattle.html)

4.名前を変更後の html (myseatle.html) を、エクスプローラーで開いたマスターページギャラリー内に
     ドラッグアンド ドロップしてアップロード

5.アップロード後、しばらく待つと、対応するマスターページ (myseattle.master) が自動生成される

6.マスターページ ギャラリー内のHTML(myseattle.html)を、任意のエディターで開く (メモ帳でもOK)

7.<!—SPM からはじまるコメント タグが複数行見つけられます。
     それらの次行に、下記コードを追加 
(必要に応じて、表示する文字列やリンク先は変更ください)
  code0602

   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script&gt;
   <script type="text/javascript">
       $(document).ready(function () {
           $(‘#O365_MainLink_Logo’).text(‘ホーム’);
           $(‘#O365_MainLink_Logo’).attr(‘href’, ‘/’);
           $(‘#O365_MainLink_Logo’).attr(‘aria-label’, ‘ポータルトップに戻る’);
           $(‘#O365_MainLink_Logo’).attr(‘style’, ‘color:white;’);
     });
    </script>

8.html を上書き保存

9.ブラウザーでマスターページ ギャラリーを開き、HTML (myseattle.html) をメジャーバージョンに発行

10.サイトのマスターページをこれに変更
    code0602_2

少し宣伝も、、   上記操作がどういうしくみを利用して、なにをしているかよくわからない方へ

  ぜひ、弊社トレーニング コース CI303-H SharePoint 2013 サイト デザイン開発 のご受講をおすすめします!
  しくみがわかれば、今回の例以外に、画面のここをこう変えたいというご要望があった際に、まず、できることか/できないことか
  の判断がつくようになり、自分でその方法がわかるようになります!
  少なくても、こういったBlog記事によくあるサンプルコードの組み込み方がわかるようになります。

  ということで、現在弊社で人気No.3 のトレーニング コースのご紹介でした。

以上、奥田でした うさぎ

広告

Office 365 SharePoint サイト [Office 365] ロゴ、リンク先の変更 (マスターページに js を組み込む)」への5件のフィードバック

  1. ピンバック: Office 365 SharePoint サイト [サイト] メニューのリンク先変更 | クリエ・イルミネート ブログ

  2. ピンバック: Office 365 SharePoint サイト [Office 365] ロゴ、リンク先の変更 (マスターページに CSS を組み込む) | クリエ・イルミネート ブログ

  3. とっても素敵な内容、ありがとうございます。
    さっそく試してみたのですが、手順10で、任意のマスタが出てきません。
    何が原因として考えられるでしょうか??

    返信する
  4. コメントありがとうございます。
    手順9は行っていただきましたでしょうか? html ファイルをメジャーバージョンに発行しないと、手順10 で表示がされません。ご確認くださいませ。

    返信する
    • おっしゃるとおり、メジャーバージョンにきちんと発行できていませんでした。
      失礼しました。

      コードをコピペさせてもらったのですが、2行目が「</script> 」となっていたので、マスター反映後、エラーになってしまいました。
      なおしていただいたほうがよいかと思います。

      ありがとうございました♪

      返信する

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中