Zenbackというブログパーツをご存知でしょうか。
関連した内容の自分の記事やほかのZenbackユーザーの記事、SNS関連のリンクなど、投稿した記事に関連するリンクを自動で生成してくれる無料のブログパーツです。
以前から設置だけはしていましたが、デフォルト設定のままでしたので、デザインなどを当サイトに合わせるカスタマイズをしてみました。
Zenbackのデザイン変更
今までは、デフォルトのまま使っていたため、タイトルやライン、リンクのカラーも全然あっていませんでした。
なにより関連記事のサムネイルパネルの大きさがあっていないのか、中途半端に並んでいます。
全体のデザインを自サイトの雰囲気にあったものに変更する場合、あると便利なものがテーマです。
Zenbackの管理画面でもテーマが幾つか用意されており、選べるようになっています。
Zenbackのサイトにログインすると、ブログ管理画面になります。
変更したいブログを選びます。
「カスタマイズ」の画面で色々な設定変更が出来ます。
ここでテーマを変更しました。
タイトル部分の装飾やカラーが変わりました。
テーマとして変更されるのは、この部分だけのようですね。
デザインのカスタマイズ
Zenbackでは、自分でもカスタマイズできるようにコードが公開されています。
サイズや色の変更、隙間間隔の調整など、カスタマイズの実例も紹介されています。
こちらを参考に、SeesaaブログのCSSに、以下の部分を追加しました。
/* Zenback */
/* 関連記事のPadding調整 */
#zenback #zenback-widget #zenback-related-article .zenback-module-item.hasthumb {
float: left;
height: 185px;
margin: 0 0 1.62em;
padding: 0 7px 9px;
font-size: 12px;
}
/* タイトルラベルの下に線 */
#zenback #zenback-widget .zenback-module-label {
border-bottom:1px solid #888888;
}
/* リンクカラー*/
#zenback #zenback-widget .zenback-module-content {
color: #333;
}
#zenback #zenback-widget .zenback-module-content a{
color:#006A6A;
text-decoration: none;
}
#zenback #zenback-widget .zenback-module-content a:hover{
color:#006666;
text-decoration:underline;
}
関連記事のサムネイル画像の間隔を調整して、一行に4個表示されるようにしました。
あとは、タイトルの下に線を引き、リンクカラーを変更しました。
最終的には、こんな感じです。
「お知らせ」のリンクカラーの変更方法が、どうしても分かりませんでした。
変更できないなら表示させないように出来ないか調べてみましたが、無料利用だと出来ないようです。有料会員登録をすると、表示の有無を設定できるようになるようです。
まとめ
関連記事の自動生成をしてくれる便利なブログパーツで、色々なサイトで見かけますので使ってる方も結構多いとに思います。
自サイトに合わせて自由にデザインをカスタマイズできると、とても利用しやすいですね。
いちから自分で作れるほど腕があればよいのですが、初心者レベルでは難しすぎます。
こういうカスタマイズ可能なブログパーツは、初心者レベルの私にはとても重宝します。
もっと勉強しないといけませんね。
