【最初に読んでね】このブログの使い方

Zenback デザインハックブログへようこそ!

ここは何が出来るところ?

自分のサイトに合わせてもっとかわいくorかっこよくZenbackの色やフォントやサイズを調整したい!とお思いのあなたのために、サンプルコードをたくさん掲載しているサイトです。

ご希望のカスタマイズをサイドバーから探していただき、記事を読んでコードをコピペしてお使いください。

続きを読む "【最初に読んでね】このブログの使い方" »

2013年10月24日 (木)

見出しを女子っぽくハート&点線にしてみる

@tomoko_and さんが運営されている、ネイルやアクセやグルメや旅行ネタのかわいい女子ブログ -&- で、Zenbackの見出しの部分を、とってもかわいくアレンジしてくださいました。

Tomoko_and

小さなハートと点線が、女子っぽくて素敵です。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のラベル部分がかわいくなりました。

続きを読む "見出しを女子っぽくハート&点線にしてみる" »

2013年8月28日 (水)

関連する記事画像の横幅を調整する

こんな時にどうぞ

関連する記事画像の横に中途半端に空白がある、横幅いっぱいにちょうどよく埋めたい、という時に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>

で、どうなるの?

以下の画像のように、左の隙間がいい感じにうまりました。

Related_entry_width

続きを読む "関連する記事画像の横幅を調整する" »

2013年5月10日 (金)

.@shinji_yonetsu さんの、フラットデザイン&エフェクト有りZenbackカスタマイズのご紹介

本日は、素敵なZenbackデザインカスタマイズ情報を公開してくださったブログをご紹介します。

それは@shinji_yonetsuさんのブログ「AmebloeEnjoyMethod」の、こちらの記事です。

Amebloenjoymethod
zenback導入方法まとめとデザイン変更方法まとめ|AmebloEnjoyMethod


スクリーンショットでもわかるように、パキッとしたフラットデザインなサイトです。このサイトにぴったりマッチしつつ、さらにソーシャルボタンのところにはちょっとしたエフェクトまであるZenbackにカスタマイズいただきました。

詳しくは、元記事をご覧ください。 @shinji_yonetsuさん、素敵なカスタマイズのご紹介、ありがとうございました!

続きを読む ".@shinji_yonetsu さんの、フラットデザイン&エフェクト有りZenbackカスタマイズのご紹介" »

2013年1月21日 (月)

ラベルの背景色を変更したい

こんな時にどうぞ

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>

で、どうなるの?

ラベルの部分が全部共通の色になりました。

続きを読む "ラベルの背景色を変更したい" »

2012年9月28日 (金)

サイトの見出しのスタイルにぴったり合わせたい

こんな時にどうぞ

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が表示されるようになります。

続きを読む "サイトの見出しのスタイルにぴったり合わせたい" »

2012年9月13日 (木)

前後左右の隙間を調整したい

■ こんな時にどうぞ

なんだか、Zenbackが前後左右とくっついちゃって変だなあ、という時は以下のコードで調整できます。

■ コード

<style>
#zenback #zenback-widget {
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 50px;
	margin-right: 50px;
}
</style>

■ で、どうなるの?

前後左右に50pxスペースを取って、Zenbackを表示しています。

続きを読む "前後左右の隙間を調整したい" »

2012年9月 4日 (火)

背景色をつけたい

■ こんな時にどうぞ

Zenbackの後ろに背景色をつけたい!というときにどうぞ。

■ コード

<style>
#zenback #zenback-widget {
	background-color: gold;
}
</style>

■ で、どうなるの?

Zenbackの背景色が gold になりました!
もちろん、background-image: url("../images/kabegami.png")を指定して背景画像を入れることも出来ますよ。

続きを読む "背景色をつけたい" »

2012年8月21日 (火)

ラベルのアイコンを変更したい

■ こんな時にどうぞ

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を入れてください。

■ で、どうなるの?

関連する記事などのラベルのアイコンがぜんばーどに変わりました。

続きを読む "ラベルのアイコンを変更したい" »

2012年7月18日 (水)

ラベルの文字のサイズを変更したい

■ こんな時にどうぞ

Zenbackの「関連する記事」や「関連するみんなの記事」、「Twitter」といったラベルの部分、ここの文字サイズを変更できます。

■ コード

<style>
#zenback #zenback-widget .zenback-module-label  {
	font-size: 20px;
}
</style>

■ で、どうなるの?

続きを読む "ラベルの文字のサイズを変更したい" »

2012年7月12日 (木)

文字のサイズを大きく/小さくしたい

■ こんな時にどうぞ

Zenbackの文字がなんだか大きい!とか小さい!ときは、このコードの20pxのところを好きな文字サイズに変更してご利用ください。

■ コード

<style>
#zenback #zenback-widget .zenback-module-content { 
	font-size: 20px;
}
</style>

■ で、どうなるの?

続きを読む "文字のサイズを大きく/小さくしたい" »

ここは何のブログ?
ここは、Zenbackっていうブログパーツのデザインカスタマイズをご紹介するブログです。Twitter @zenback のなかのひとが運営しています。

設定方法など、よくわからなくなっちゃったら、「Zenback デザインハックブログ: 【最初に読んでね】このブログの使い方」の記事をご覧ください。

サイト内検索

Twitter

RSS登録