bloggerにZenbackを導入+デザインをカスタマイズ | 忘れたらググればいい

2012年8月9日木曜日

bloggerにZenbackを導入+デザインをカスタマイズ

Zenbackを導入

ブログに関連記事やtwitter,facebookのコメントなどを表示させるブログパーツのZenbackを導入した.

Zenbackであなたのブログに全てのフィードバックを。

bloggerへの導入は以下のサイトを参考に.

Blogger での zenback 利用方法 | slumbers

ただし,位置は footer のあとにしたかったので,挿入位置は以下に.

...
    </div>
  </div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- X:S ZenBackWidget --><script type='text/javascript'>
// <![CDATA[
document.write(unescape(...));
// ]]>
</script><!-- X:E ZenBackWidget -->
</b:if> 

</b:includable>
<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
...

デザインをカスタマイズ

このブログでは,色彩を #6bd を基調にしているけど, デフォルトのパーツは色がバラバラ. ということで,CSSをイジってカスタマイズした.

以下のCSSをテンプレートの適当なところに追加した. 色以外にも少し修正してある.

  • 「関連する記事」と「関連するみんなの記事」のアイコンは背景が黄緑色で塗られていて, CSSを変更しただけでは使えないので, どんな背景でも使えるようにバックを透明に修正したものを使う (なおtwitterのアイコンはすでに背景が透明になっている).
  • ラベルの幅がまちまちなので,一番長くなるはてなブックマークに合わせて 175px にしておいた. 数が増えると幅が長くなるので一応 min-width として指定した.
  • facebookだけラベルの高さが違うので全部 1.8em に統一した.

アイコン

icon-article-trans.png

icon-link-trans.png

CSS

#zenback-widget #zenback-related-article .zenback-module-label {
    background-image: url(http://2.bp.blogspot.com/-l_2a_RMzYDI/UCKQCw8KLnI/AAAAAAAAEfQ/9CBpAALk7ls/s1600/icon-article-trans.png) !important;
    background-color: #6bd !important;
    min-width: 175px;
    height: 1.8em; // 2.0em * 0.9
}
#zenback-widget #zenback-related-article .zenback-module-content {
    border-color: #6bd !important;
}
#zenback-widget #zenback-related-links .zenback-module-label {
    background-image: url(http://2.bp.blogspot.com/-N4PPIaMpW_M/UCKQCwoyNoI/AAAAAAAAEfc/sySqDz25nj0/s1600/icon-link-trans.png) !important;
    background-color: #6bd !important;
    min-width: 175px;
    height: 1.8em; // 2.0em * 0.9
}
#zenback-widget #zenback-related-links .zenback-module-content {
    border-color: #6bd !important;
}
#zenback-widget #zenback-twitter .zenback-module-label {
    background-color: #6bd !important;
    min-width: 175px;
    height: 1.8em; // 2.0em * 0.9
}
#zenback-widget #zenback-twitter .zenback-module-content {
    border-color: #6bd !important;
}
#zenback-widget #zenback-hatena-bookmark .zenback-module-label {
    background-color: #6bd !important;
    min-width: 175px;
    height: 1.8em; // 2.0em * 0.9
}
#zenback-widget #zenback-hatena-bookmark .zenback-module-content {
    border-color: #6bd !important;
}
#zenback-widget #zenback-facebook-comment .zenback-module-label {
    background-color: #6bd !important;
    min-width: 175px;
    height: 1.8em; // 2.0em * 0.9
}
#zenback-widget #zenback-facebook-comment .zenback-module-content {
    border-color: #6bd !important;
}
#zenback-widget #zenback-powered {
    border-top: 1px solid #6bd !important;
}
#zenback-widget #zenback-powered img {
    background-color: #6bd !important;
}

カスタマイズ完了

CSSを適用して以下のようになった.少しは統一感が増しただろうか.