Google+ Badge モドキを基本情報ガジェットで作る ～Blogger テンプレートを作るよ！ (31)～

こんにちはー！

今回は、自己紹介に使う「基本情報」ガジェットを Google+ Badge 風に改造します！

作ってみよう！ Google+ Badge 風自己紹介ガジェット

作ろうと思ったきっかけ

ユーザー表示の見た目が気に入って Google+ Badge ガジェットをブログに導入してみたのですが、これって表示までに数秒のタイムラグがあるんですよね。

ブログが表示された～と思ってさあ読み始めようと思った数秒後にガクン！とサイドバーが動くのが少し気になります。

＜ガクン！

さすがにロード時間はどうしようもない……と思ったんですが、基本情報ガジェットを改造すれば似たようなモノなら作れそうだなと思ったので試してみます！

今回は css の変更だけで出来る範囲で！

HTML を編集するのは少し疲れたので、今回は CSS だけでできる範囲で済ませます。

ブログの管理画面から、 [テンプレート]  > [カスタマイズ] > [上級者向け] > [CSS　の追加] を選択します。

そこに以下のコードを入力します。自己紹介ガジェットが複数ある場合は、Profile1 の部分を使用するガジェットの ID に変更してください。

#Profile1 .widget-content{
text-align: center;
border: 1px solid #d0d0d0;
border-radius: 3px;
}
#Profile1 dt{
height: 57px;
}
#Profile1 .profile-img{
float: none;
box-shadow: none;
border: none;
padding-top: 14px;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#Profile1 .profile-name-link {
font-size: 17px;
line-height:21px;
font-weight: normal;
color: black;
margin-bottom: 12px;
}
#Profile1 .profile-textblock {
font-size: 12px;
color: #777;
width: 80%;
margin: auto;
margin-top: 12px;
margin-bottom: 12px;
}
#Profile1 .profile-link {
display: block;
margin: auto;
margin-top: 12px;
padding-bottom: 8px;
}

結果比較！

実際に使ってみると、以下のようになります！（写真の真ん中のやつです）

本物のバッジと比べて、アイコンやフォローボタンが少し小さかったり、ニックネームやキャッチフレーズ等が表示されなくなっていますが、その代わりに自己紹介文が表示できるようになっています。

一応、基本情報ガジェットに元々ある機能で、マウスカーソルを置けば Google+ プロフィールが表示されるので特に問題はないと思います。

 「フォロー」 ボタンの分の高さを最初から確保しているので、後から大きさが変わるということもありません。名前が長くて改行されると変わるかもしれませんが、その時はそうならない程度に調整してください。

欲を言えばフォローボタンとアイコンの大きさも似せたいんですが、大きさ指定で拡大すると粗くなるし……どうにかする方法はあるのかな？