Zenback デザインハックブログ
http://designhack.zenback.jp/
Zenbackのデザイン変更は実はとっても簡単!いろんなデザイン変更方法をご紹介します。
ja-JP
2013-10-24T14:19:57+09:00
-
見出しを女子っぽくハート&点線にしてみる
http://designhack.zenback.jp/2013/10/post-ba44.html
@tomoko_and さんが運営されている、ネイルやアクセやグルメや旅行ネタの...
<p><a href="http://twitter.com/tomoko_and">@tomoko_and</a> さんが運営されている、ネイルやアクセやグルメや旅行ネタのかわいい女子ブログ <a href="http://gladioli-nail.jugem.jp/">-&-</a> で、Zenbackの見出しの部分を、とってもかわいくアレンジしてくださいました。</p>
<p><img alt="Tomoko_and" title="Tomoko_and" src="http://zenback.lekumo.biz/blog/images/2013/10/tomoko_and.png" style="border: 1px solid gainsboro; width: 550px;"/></p>
<p>小さなハートと点線が、女子っぽくて素敵です。Zenbackも女子分を付加すべく、真似してみます。</p>
<h3>コード</h3>
<pre class="prettyprint">
<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>
</pre>
<h3>で、どうなるの?</h3>
<p>この下のZenbackのラベル部分がかわいくなりました。</p>
<!-- ここから下が実際のコードです。 -->
<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>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
zenback
2013-10-24T14:19:57+09:00
-
関連する記事画像の横幅を調整する
http://designhack.zenback.jp/2013/08/htmlcss-e837.html
こんな時にどうぞ 関連する記事画像の横に中途半端に空白がある、横幅いっぱいにちょ...
<h3>こんな時にどうぞ</h3>
<p>関連する記事画像の横に中途半端に空白がある、横幅いっぱいにちょうどよく埋めたい、という時にwidthの値を任意に変更してご利用ください。デフォルトは110pxに指定されています。</p>
<h3>コード</h3>
<pre class="prettyprint">
<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>
</pre>
<h3>で、どうなるの?</h3>
<p>以下の画像のように、左の隙間がいい感じにうまりました。</p>
<p><span><img class="asset asset-image at-xid-photo-41136721" alt="Related_entry_width" title="Related_entry_width" src="http://designhack.zenback.jp/images/2013/08/28/related_entry_width.png" /></span><br />
</p><!-- ここから下が実際のコードです。 -->
<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>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2013-08-28T17:50:45+09:00
-
.@shinji_yonetsu さんの、フラットデザイン&エフェクト有りZenbackカスタマイズのご紹介
http://designhack.zenback.jp/2013/05/zenback-8ddf.html
本日は、素敵なZenbackデザインカスタマイズ情報を公開してくださったブログを...
本日は、素敵なZenbackデザインカスタマイズ情報を公開してくださったブログをご紹介します。<br /><br />
それは<a href="http://twitter.com/@shinji_yonetsu">@shinji_yonetsu</a>さんのブログ「<a href="http://ameblo.jp/amebloger-s/">AmebloeEnjoyMethod</a>」の、こちらの記事です。<br /><br />
<a href="http://ameblo.jp/amebloger-s/entry-11523936950.html"><img alt="Amebloenjoymethod" title="Amebloenjoymethod" src="http://zenback.lekumo.biz/photos/uncategorized/2013/05/10/amebloenjoymethod.png" border="0" /><br />
zenback導入方法まとめとデザイン変更方法まとめ|AmebloEnjoyMethod</a><br /><br />
スクリーンショットでもわかるように、パキッとしたフラットデザインなサイトです。このサイトにぴったりマッチしつつ、さらにソーシャルボタンのところにはちょっとしたエフェクトまであるZenbackにカスタマイズいただきました。<br /><br />
詳しくは、元記事をご覧ください。
<a href="http://twitter.com/@shinji_yonetsu">@shinji_yonetsu</a>さん、素敵なカスタマイズのご紹介、ありがとうございました!<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A113137308298929432&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2013-05-10T11:45:03+09:00
-
ラベルの背景色を変更したい
http://designhack.zenback.jp/2013/01/post-76ce.html
こんな時にどうぞ Zenbackのデフォルトテーマのラベルの色は、各ソーシャルメ...
<h3>こんな時にどうぞ</h3>
<p>Zenbackのデフォルトテーマのラベルの色は、各ソーシャルメディアのテーマカラーに合わせて緑や青に塗られています。これを自分のサイトのテーマカラーに合わせたい場合は、以下のように設定してください。</p>
<p>2013/08/08 おしらせ欄のラベルの背景色も変更できるよう、アップデートいたしました。</p>
<h3>コード</h3>
<pre class="prettyprint">
<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>
</pre>
<h3>で、どうなるの?</h3>
<p>ラベルの部分が全部共通の色になりました。</p><!-- ここから下が実際のコードです。 -->
<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>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2013-01-21T14:22:47+09:00
-
サイトの見出しのスタイルにぴったり合わせたい
http://designhack.zenback.jp/2012/09/post-a8d9.html
こんな時にどうぞ Zenbackのスタイルとサイトの見出しとぴったり合わせたい場...
<h3>こんな時にどうぞ</h3>
<p>Zenbackのスタイルとサイトの見出しとぴったり合わせたい場合、例えばこのサイトの見出しのスタイルに合わせるにはこんなふうに作ります。</p>
<p>2013/08/08 おしらせ欄のラベルのスタイルも変更できるよう、アップデートいたしました。</p>
<h3>コード</h3>
<pre class="prettyprint">
<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>
</pre>
<h3>で、どうなるの?</h3>
<p>サイトの見出しのスタイルそのままでZenbackが表示されるようになります。</p><!-- ここから下が実際のコードです。 -->
<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>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2012-09-28T11:42:51+09:00
-
前後左右の隙間を調整したい
http://designhack.zenback.jp/2012/09/post-dea8.html
■ こんな時にどうぞ なんだか、Zenbackが前後左右とくっついちゃって変だな...
<h3>■ こんな時にどうぞ</h3>
<p>なんだか、Zenbackが前後左右とくっついちゃって変だなあ、という時は以下のコードで調整できます。</p>
<h3>■ コード</h3>
<pre class="prettyprint">
<style>
#zenback #zenback-widget {
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;
}
</style>
</pre>
<h3>■ で、どうなるの?</h3>
<p>前後左右に50pxスペースを取って、Zenbackを表示しています。</p><!-- ここから下が実際のコードです。 -->
<style>
#zenback #zenback-widget {
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;
}
</style>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2012-09-13T15:13:51+09:00
-
背景色をつけたい
http://designhack.zenback.jp/2012/09/post-fd05.html
■ こんな時にどうぞ Zenbackの後ろに背景色をつけたい!というときにどうぞ...
<h3>■ こんな時にどうぞ</h3>
<p>Zenbackの後ろに背景色をつけたい!というときにどうぞ。</p>
<h3>■ コード</h3>
<pre class="prettyprint">
<style>
#zenback #zenback-widget {
background-color: gold;
}
</style>
</pre>
<h3>■ で、どうなるの?</h3>
<p>Zenbackの背景色が gold になりました!<br />
もちろん、background-image: url("../images/kabegami.png")を指定して背景画像を入れることも出来ますよ。</p><!-- ここから下が実際のコードです。 -->
<style>
#zenback #zenback-widget {
background-color: gold;
}
</style>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2012-09-04T14:35:41+09:00
-
ラベルのアイコンを変更したい
http://designhack.zenback.jp/2012/08/post-0cf6.html
■ こんな時にどうぞ Zenbackの「関連する記事」、「関連するみんなの記事」...
<h3>■ こんな時にどうぞ</h3>
<p>Zenbackの「関連する記事」、「関連するみんなの記事」など、ラベル部分のアイコンを変更します。あらかじめ、アイコン画像をどこかにアップロードしてそのURLを取得しておいてください。</p>
<p>16x16サイズのこんなアイコンを用意してみました。<br />
→ <img src="http://zenback.lekumo.biz/img/icon.png"> ぷちっ。</p>
<h3>■ コード</h3>
<pre class="prettyprint">
<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>
</pre>
<p>url()の中に、アップロードした画像のURLを入れてください。</p>
<h3>■ で、どうなるの?</h3>
<p>関連する記事などのラベルのアイコンが<a href="http://twitter.com/zenbirdlove">ぜんばーど</a>に変わりました。</p><!-- ここから下が実際のコードです。 -->
<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>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2012-08-21T11:25:27+09:00
-
【最初に読んでね】このブログの使い方
http://designhack.zenback.jp/2012/08/post-0921.html
Zenback デザインハックブログへようこそ! ### ここは何が出来るところ...
<p>Zenback デザインハックブログへようこそ!</p>
<h3>ここは何が出来るところ?</h3>
<p>自分のサイトに合わせてもっとかわいくorかっこよくZenbackの色やフォントやサイズを調整したい!とお思いのあなたのために、サンプルコードをたくさん掲載しているサイトです。</p>
<p>ご希望のカスタマイズをサイドバーから探していただき、記事を読んでコードをコピペしてお使いください。</p>
<h3>CSSカスタマイズの基本</h3>
<h4>CSSスタイルの記述場所</h4>
<p>head内に直接書いても、外部ファイル(<em>*</em>.css)に書いても、大丈夫です。
また、Zenbackのスクリプトコードの位置にかかわらず、HTML内のどこに書いても動作します。</p>
<h4>上級者向け情報</h4>
<p>HTMLとCSSの構造をコードと図解で紹介しています。コードを見たほうが手っ取り早い方はどうぞ。</p>
<p><a href="http://zenback.lekumo.biz/css/2012/07/zenbackhtmlcss-d81f.html"><img src="http://capture.heartrails.com/200x150/shadow?http://zenback.lekumo.biz/css/2012/07/zenbackhtmlcss-d81f.html"><br />ZenbackのHTML/CSSコード 図解付き解説</a></p>
<h3>カスタマイズに当たって、やってはいけないこと</h3>
<ul>
<li>関連するみんなの記事や、広告、TOPSYやZenbackのロゴを見えなくすることはやめてください</li>
</ul>
<p>こういうカスタマイズ方法を載せて欲しい!というご意見があれば、ぜひ <a href="http://twitter.com/zenback">@zenback</a> までいつでもご質問ください。</p>
<h3>■ Zenback</h3>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
zenback
2012-08-20T16:10:00+09:00
-
ラベルの文字のサイズを変更したい
http://designhack.zenback.jp/2012/07/post-9770.html
■ こんな時にどうぞ Zenbackの「関連する記事」や「関連するみんなの記事」...
<h3>■ こんな時にどうぞ</h3>
Zenbackの「関連する記事」や「関連するみんなの記事」、「Twitter」といったラベルの部分、ここの文字サイズを変更できます。
<h3>■ コード</h3>
<pre class="prettyprint">
<style>
#zenback #zenback-widget .zenback-module-label {
font-size: 20px;
}
</style>
</pre>
<h3>■ で、どうなるの?</h3><!-- ここから下が実際のコードです。 -->
<style>
#zenback #zenback-widget .zenback-module-label {
font-size: 20px;
}
</style>
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//designhack.zenback.jp/&nsid=95555262940720146%3A%3A107042954790632739&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
<!-- ここまで -->
zenback
2012-07-18T18:30:49+09:00