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-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のリダイレクト問題にも対応しているなど、サポート体制も充実しているようです。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿