Zenback デザインハックブログへようこそ!
ここは何が出来るところ?
自分のサイトに合わせてもっとかわいくorかっこよくZenbackの色やフォントやサイズを調整したい!とお思いのあなたのために、サンプルコードをたくさん掲載しているサイトです。
ご希望のカスタマイズをサイドバーから探していただき、記事を読んでコードをコピペしてお使いください。
Zenback デザインハックブログへようこそ!
自分のサイトに合わせてもっとかわいくorかっこよくZenbackの色やフォントやサイズを調整したい!とお思いのあなたのために、サンプルコードをたくさん掲載しているサイトです。
ご希望のカスタマイズをサイドバーから探していただき、記事を読んでコードをコピペしてお使いください。
@tomoko_and さんが運営されている、ネイルやアクセやグルメや旅行ネタのかわいい女子ブログ -&- で、Zenbackの見出しの部分を、とってもかわいくアレンジしてくださいました。
小さなハートと点線が、女子っぽくて素敵です。Zenbackも女子分を付加すべく、真似してみます。
<style> /* ラベルのアイコンと背景色をリセット */ #zenback #zenback-widget #zenback-news-hasimage .zenback-module-label, #zenback #zenback-widget #zenback-related-links .zenback-module-label, #zenback #zenback-widget #zenback-related-article .zenback-module-label, #zenback #zenback-widget #zenback-twitter .zenback-module-label, #zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-label, #zenback #zenback-widget #zenback-facebook-comment .zenback-module-label { background: none; background-color: #ffffff; } /* ラベルのテキストの箇所を、サイトの見だし(ここではh3)スタイルに合わせる */ #zenback #zenback-widget .zenback-module-label a, #zenback #zenback-widget .zenback-module-label span { margin::10px 0 0 0; padding: 2px 0px 2px 25px; color: black; font-weight: bold; font-size: 16px; background: url(http://zenback.lekumo.biz/blog/images/2013/10/heart.png) 5px center no-repeat; } /* コンテンツ部分のborder-topに指定されている線を、見出しに合わせる */ #zenback #zenback-widget #zenback-news-hasimage .zenback-module-content, #zenback #zenback-widget #zenback-related-article .zenback-module-content, #zenback #zenback-widget #zenback-related-links .zenback-module-content, #zenback #zenback-widget #zenback-twitter .zenback-module-content, #zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-content, #zenback #zenback-widget #zenback-facebook-comment .zenback-module-content { border-top:1px dotted #CCC; } </style>
この下のZenbackのラベル部分がかわいくなりました。
関連する記事画像の横に中途半端に空白がある、横幅いっぱいにちょうどよく埋めたい、という時にwidthの値を任意に変更してご利用ください。デフォルトは110pxに指定されています。
<style> /* 画像の横幅を広くする */ #zenback #zenback-widget #zenback-related-article .zenback-module-item.hasthumb, #zenback #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail, #zenback #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-title { width: 124px; } </style>
以下の画像のように、左の隙間がいい感じにうまりました。
続きを読む ".@shinji_yonetsu さんの、フラットデザイン&エフェクト有りZenbackカスタマイズのご紹介" »
Zenbackのデフォルトテーマのラベルの色は、各ソーシャルメディアのテーマカラーに合わせて緑や青に塗られています。これを自分のサイトのテーマカラーに合わせたい場合は、以下のように設定してください。
2013/08/08 おしらせ欄のラベルの背景色も変更できるよう、アップデートいたしました。
<style> /* ラベルの背景色を pink に変更 */ #zenback #zenback-widget #zenback-news-hasimage .zenback-module-label, #zenback #zenback-widget #zenback-related-article .zenback-module-label, #zenback #zenback-widget #zenback-related-links .zenback-module-label, #zenback #zenback-widget #zenback-twitter .zenback-module-label, #zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-label, #zenback #zenback-widget #zenback-facebook-comment .zenback-module-label, #zenback #zenback-widget #zenback-powered img { background-color: pink; } /* 各項目の上部の線を pink に変更 */ #zenback #zenback-widget #zenback-news-hasimage .zenback-module-content, #zenback #zenback-widget #zenback-related-article .zenback-module-content, #zenback #zenback-widget #zenback-related-links .zenback-module-content, #zenback #zenback-widget #zenback-twitter .zenback-module-content, #zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-content, #zenback #zenback-widget #zenback-facebook-comment .zenback-module-content { border-color: pink; } /* Zenbackロゴの背景色を pink に変更 */ #zenback #zenback-widget #zenback-powered { border-top: 1px solid pink; } </style>
ラベルの部分が全部共通の色になりました。
Zenbackのスタイルとサイトの見出しとぴったり合わせたい場合、例えばこのサイトの見出しのスタイルに合わせるにはこんなふうに作ります。
2013/08/08 おしらせ欄のラベルのスタイルも変更できるよう、アップデートいたしました。
<style> /* ラベルのアイコンと背景色をリセット */ #zenback #zenback-widget #zenback-news-hasimage .zenback-module-label, #zenback #zenback-widget #zenback-related-links .zenback-module-label, #zenback #zenback-widget #zenback-related-article .zenback-module-label, #zenback #zenback-widget #zenback-twitter .zenback-module-label, #zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-label, #zenback #zenback-widget #zenback-facebook-comment .zenback-module-label { background: none; background-color: #ffffff; } /* ラベルのテキストの箇所を、サイトの見だし(ここではh3)スタイルに合わせる */ #zenback #zenback-widget .zenback-module-label a, #zenback #zenback-widget .zenback-module-label span { margin: 30px 0 10px; padding: 0 5px 5px; color: black; font-weight: bold; font-size: 116%; } /* コンテンツ部分のborder-topに指定されている線を、見出しに合わせる */ #zenback #zenback-widget #zenback-news-hasimage .zenback-module-content, #zenback #zenback-widget #zenback-related-article .zenback-module-content, #zenback #zenback-widget #zenback-related-links .zenback-module-content, #zenback #zenback-widget #zenback-twitter .zenback-module-content, #zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-content, #zenback #zenback-widget #zenback-facebook-comment .zenback-module-content { border-top: 3px solid #89BC5C; } </style>
サイトの見出しのスタイルそのままでZenbackが表示されるようになります。
なんだか、Zenbackが前後左右とくっついちゃって変だなあ、という時は以下のコードで調整できます。
<style> #zenback #zenback-widget { margin-top: 50px; margin-bottom: 50px; margin-left: 50px; margin-right: 50px; } </style>
前後左右に50pxスペースを取って、Zenbackを表示しています。
Zenbackの後ろに背景色をつけたい!というときにどうぞ。
<style> #zenback #zenback-widget { background-color: gold; } </style>
Zenbackの背景色が gold になりました!
もちろん、background-image: url("../images/kabegami.png")を指定して背景画像を入れることも出来ますよ。
Zenbackの「関連する記事」、「関連するみんなの記事」など、ラベル部分のアイコンを変更します。あらかじめ、アイコン画像をどこかにアップロードしてそのURLを取得しておいてください。
16x16サイズのこんなアイコンを用意してみました。
→ ぷちっ。
<style> /* おしらせ欄 */ #zenback #zenback-widget #zenback-news-hasimage .zenback-module-label { background-image: url(http://zenback.lekumo.biz/img/icon.png); } /* 関連する記事 */ #zenback #zenback-widget #zenback-related-article .zenback-module-label { background-image: url(http://zenback.lekumo.biz/img/icon.png); } /* 関連するみんなの記事 */ #zenback #zenback-widget #zenback-related-links .zenback-module-label { background-image: url(http://zenback.lekumo.biz/img/icon.png); } /* Twitter */ #zenback #zenback-widget #zenback-twitter .zenback-module-label { background-image: url(http://zenback.lekumo.biz/img/icon.png); } /* はてなブックマーク */ #zenback #zenback-widget #zenback-hatena-bookmark .zenback-module-label { background-image: url(http://zenback.lekumo.biz/img/icon.png); } /* Facebook */ #zenback #zenback-widget #zenback-facebook-comment .zenback-module-label { background-image: url(http://zenback.lekumo.biz/img/icon.png); } </style>
url()の中に、アップロードした画像のURLを入れてください。
関連する記事などのラベルのアイコンがぜんばーどに変わりました。
<style> #zenback #zenback-widget .zenback-module-label { font-size: 20px; } </style>
<style> #zenback #zenback-widget .zenback-module-content { font-size: 20px; } </style>