バズ部テーマXeory baseのサイドバーをカスタマイズしてみた！

先日バズ部　テーマXeory　baseのサイドバーをカスタマイズしたい！の記事を投稿後
早速サイドバーをカスタマイズしてみました。
前回はサイドバーのphpをいじってIDやクラスを変えようと思ったのですが、今回は少しシンプルにXeory　baseをそのままカスタマイズ出来るようにしてみました。

実際にした事は
・ウィジェットのリストの間隔が間延びしているように感じたのを詰めた
・ウィジェット同士の間隔も大きかったのを詰めた
・ウィジェットタイトルを可愛くした

それでは早速どのようにしたか書いていきますね！
まずはHTML
普通にウィジェットで最近の投稿を作成したものです。

<div class="side-widget-inner">
<h4 class="side-title"><span class="side-title-inner">最近の投稿</span></h4>
<ul>
<li><a href="http://hero-style.com/bazu_xeory_base_side/">バズ部　テーマXeory　baseのサイドバーをカスタマイズしたい！</a></li>
<li><a href="http://hero-style.com/div_center_2/">divの中の画像を中央に配置したい時　もっと優しく</a></li>
<li><a href="http://hero-style.com/syntaxhighlighter-evolved/">SyntaxHighlighter Evolved　でコードを表示するようにしてみました</a></li>
<li><a href="http://hero-style.com/bazu_custum_sorry/">バズ部のテーマカスタマイズのカテゴリに投稿した記事</a></li>
<li><a href="http://hero-style.com/kureyon/">ホットカーペットに置き忘れたクレヨンが溶けて固まってしまいました</a></li>
</ul>
</div>

あてたcssは

/*side-widget*/
.side-widget {
  margin-bottom: 10px;/*ウィジェット同士の間隔を詰めた*/
  padding-bottom: 10px;
  line-height: 1.6;
  font-size: 14px;
}
.side-widget .side-title{
	background: #ef8593;/*ウィジェットタイトルの背景*/
	color: #fff;/*ウィジェットタイトルの文字*/
	font-size: 1em;
	padding: 3px;
	margin-bottom: .25em;
	margin-top: 0;

}
.side-title-inner{
	border: 1px solid rgba(255, 255, 255, .6);/*ウィジェットタイトルの内側にライン*/
	display: block;
	width: 100%;
	height: 100%;
	padding: .9em .8em	
}
.side-widget ul li{
	padding: 7px 0px;/*記事リストの間隔をコンパクトに*/
}