サイトのタイトルを自前のロゴ画像で置き換える

SharePoint2010のチームサイト、サイトタイトルの表示がそっけなくてさびしいですよね。
140519

アイコンはサイトの設定で変えられますが、それ以外は普通はいじれません。
そこで、CSSを使ってここに自前のタイトルロゴ画像を貼ってみることにしました。

140519_2

ついでに背景に画像も表示してみましたが、これはやりすぎかもですね(笑)

さて、CSSはこんな感じです。

/*タイトルロゴを貼る*/
.s4-titletext
{
    background-image: url('ロゴ画像のURL');
    background-repeat: no-repeat;
    background-position: left;
}
.s4-title h1, .s4-title h2, .s4-title span
{
    display: none;
}
/* タイトルエリアに背景画像を設定 */
.s4-title
{
    background: url('背景画像のURL') #fff repeat-x !important;
}

あと、サイトのアイコンをサイトの設定から変えられない環境でも、以下のCSSで(無理やり)変えられます。

.s4-titlelogo a
{
    display: block;
    width: 105px; /* 置き換える画像の幅に合わせ指定 */
    height: 70px; /* 置き換える画像の高さに合わせ指定 */
    overflow: hidden;
    background: url(’置き換える画像のURL’) no-repeat;
}
.s4-titlelogo > a > img
{
    height: 0;
    padding-top: 80px; /* 置き換える画像の高さ+αで適宜微調整してください */
}

ちなみに、上のロゴ画像はコチラのジェネレータで作りましたっ。

http://supalogo.com/

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中