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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

先日バズ部 テーマ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;/*記事リストの間隔をコンパクトに*/
}

サイドバーウィジェット

サイドバーウィジェット


とこんな感じです。
サイドバーが縦に長くなりすぎるのを防ぐ目的もありコンパクトにしています。
Facebookやツイッターを表示している方には良いかと思います。
間違っていたらどうぞご連絡お願いします!

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ

コメントを残す

*