Google Friend ConnectのSocial barを導入 (BloggerのNavbarの位置も修正)

Google Friend Connectを導入してみましたで導入したGoogle Friend Connectですが、昨日Social barというツールバータイプの統合ガジェットが公開されたので導入してみました。

Google，「Friend Connect」のツールバーを提供：ITpro 他でも紹介されています。

結果はこれです。

コンパクトに機能がまとまっている点が良い感じです。

また、Friend Connectではコメントをページごとに書けるように設定できますが、そうするとブログ全体のコメント一覧を見ることができないという欠点があります。(管理者は見れるんですが)
その場合も、真ん中の一番広い部分をクリックすると、コメントを含むメンバのアクティビティが表示されるのである程度代替になりそうです。

ところで、Social barを本ブログのようなGoogle Bloggerに導入すると一部で不都合があります。
Navbarと呼ばれるこの↓部分とブログのヘッダの一部がSocial Barによって隠れてしまうのでます。

NavbarはBloggerのテンプレートをみても該当する部分が無く、直感的にはいじりようがありません。

しかし、FirebugやHTMLソースで調べてみると、Navbarは
<div id="navbar" class="navbar section">
であることがわかりますので、CSSとして、

#navbar {
margin: 40px 0 0 0;
}

を加えることで下にずらすことができます。

ついでに、よりツールバーっぽく見えるよう、Social barを最上部に固定(常駐)することにしました。

Social bar導入のためのスニペットを見ると、

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1234622588636"></div>
<!-- Render the gadget into a div. -->

という記述があるので、 id="div-1234622588636のdivをいじればよさそうです。

#div-1234622588636 {
position: fixed;
width: 100%;
top: 0;
left: 0
}

を加えることで固定できました。

結果はこれです。

どうでしょうか?


ちなみに、CSSの知識が無かったので、
とほほのスタイルシート入門（基礎知識）
や
CSSレイアウト実践講座
を参考にさせてもらいました。