zenbackのCSSをカスタマイズする

zenbackもカスタマイズできるんですね。 Ardor(@ArdorOnline)です。 zenbackブログでcssについて記載がありました。 サイトにあわせたデザインに変更できるように紹介してるんですね。 早速、CSSをカスタマイズしてみました。

zenbackのid/class構造

zenbackブログにブログパーツのid／class構造とcssについてを見て頂くと早いと思いますが、 カスタマイズできそうなCSSをピックアップしておきます。

id / class	箇所
#zenback-widget .zenback-module-label	関連する記事など見出し
#zenback-widget .zenback-module-content	関連する記事のコンテンツ部分
#zenback-widget .zenback-module-list	関連する記事リスト全体
#zenback-widget .zenback-module-item	関連する記事の１つ
#zenback-widget .zenback-module-item-socialcount	記事のツイート数

カスタマイズする際には、注意があります。
zenbackブログに次のように書かれているので守りましょう。

関連リンク、関連キーワード、クラシファイド枠、TOPSYロゴ、Zenbackロゴを非表示にしたり、著しく見えにくくすることは、避けてください。

カスタマイズする前に

カスタマイズする前にzenbackのウィジットテーマを変更するとCSSの指定がシンプルになりますので、カスタマイズを行いやすかったです。 ご自身のブログデザインに合わせて設定しておくとカスタマイズが楽になります。

設定したテーマはシンプルですので、扱いやすい。

zenbackのコードを解析する

Google Chromeを利用していれば、「F12」または、右クリックから「要素を検証」でHTML/CSSの内容が見れます。 もっと細かくカスタマイズしたい方は、解析しながらやってみるといいでしょう。

解析してみると、idとclassの分け方がとても綺麗でしたので、わかりやすい印象でした。 きっとカスタマイズも綺麗にできると思います。

zenbackの見出しをカスタマイズする

zenback内の見出しをカスタマイズしてみます。
見出しは、#zenback-widget .zenback-module-labelでCSSを指定できます。
今回はブログデザインに合わせたいので、見出しと同じCSSを指定します。 指定内容は次の通りです。

border-style: none none solid solid;
border-color: -moz-use-text-color -moz-use-text-color rgb(51, 153, 204) rgb(51, 153, 204);
border-width: medium medium 1px 5px;
padding: 5px 10px;
margin-bottom: 1em;
color: #232F01;
background: #f8f8f8;
background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)); /* webkit safari chrome */
-pie-background:linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* ie */
font-size: 16px;

CSSの指定方法

指定方法は、Bloggerテンプレートデザイナーで指定する方法と、テンプレートに直接指定する方法があります。 どちらでも指定できるので慣れているほうでいいでしょう。

Bloggerテンプレートデザイナー指定

テンプレート指定

指定後の見栄え

最後に

zenbackは、カスタマイズもやり易く、導入することで大きなメリットがたくさんあるブログパーツだと思います。 無料で使えるのに、Bloggerのリダイレクト問題にも対応しているなど、サポート体制も充実しているようです。

最後までお読み頂きありがとうございます。