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

Zenbackを導入

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

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

ただし，位置は 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ewfWFOx0JUrGZKRlCCxisIiBJtaIyXckV80qaKZ4HjYOFamWLnOiO8Rzaowl49K23N6xpcbSWDKSVlNMd5tP5BAJ6L0uv5ggPWGIu7Ilz6IGW6jaX4VORbeBvJuEuWM-igMrvcBH5cpe/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP1xAkVBl3zGreivMJHxw12_hRBYEK8WDLBp8Lh0crvv66ynch9DHi7rX2MbsLR6n-TvYuI9EqxJzwQV3L2Tr46_SRaqjx1a2hPA-CbvlPmrxela4zol-6GfOZrNwhTA0A4-3aVQMHpEjB/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を適用して以下のようになった．少しは統一感が増しただろうか．

忘れたらググればいい

2012年8月9日木曜日

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

Zenbackを導入

デザインをカスタマイズ

アイコン

CSS

カスタマイズ完了