ブログの更新通知をメールで受け取る

Stinger8のサイドバー・カスタマイズ。トップページで新着記事を表示させない&その他デザインの修正

こんにちは。世界のヘイショーです。本日も引き続きStinger8のカスタマイズについて。前回トップページをカスタマイズしましたが、今回はサイドバーを修正していきたいと思います。

>>【過去記事】Stinger8のカスタマイズ。トップページにオリジナルの文章を入れる

変更前のトップページはこんな感じです。

 

カスタマイズのポイントは以下の通り。

トップページで新着記事を表示させない

一つ目のカスタマイズは、サイドバー上方に位置されている新着記事一覧をトップページでのみ非表示にする方法。ご存知の通りStingerのトップページには記事一覧がメインカラムにあるので、サイドバーの新着記事一覧は必要ないと判断しました。

sidebar.phpを編集します。元のコードはこれ。

コード

<div id="side">
	<div class="st-aside">

		<?php if ( is_active_sidebar( 10 ) ) { ?>
			<div class="side-topad">
				<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 10 ) ) : else : //サイドバートップのみのウィジェット ?>
				<?php endif; ?>
			</div>
		<?php } ?>

		<?php get_template_part( 'newpost' ); //最近のエントリ ?>

		<?php if ( is_active_sidebar( 1 ) ) { ?>
			<div id="mybox">
				<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 1 ) ) : else : //サイドウイジェット読み込み ?>
				<?php endif; ?>
			</div>
		<?php } ?>
		<!-- 追尾広告エリア -->
		<div id="scrollad">
			<?php if ( is_active_sidebar( 2 ) ) { ?>
				<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 2 ) ) : else : ?>
				<?php endif; ?>
			<?php } ?>
		</div>
		<!-- 追尾広告エリアここまで -->
	</div>
</div>
<!-- /#side -->

 

変更後はこうなります。

コード

<div id="side">
	<div class="st-aside">

		<?php if ( is_active_sidebar( 10 ) ) { ?>
			<div class="side-topad">
				<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 10 ) ) : else : //サイドバートップのみのウィジェット ?>
				<?php endif; ?>
			</div>
		<?php } ?>

		<?php if (!is_front_page()) : ?>
		<p class="menu_underh2">新着記事はこちら</h2>
		<?php get_template_part( 'newpost' ); //最近のエントリ ?>
		<?php endif; ?>

		<?php if ( is_active_sidebar( 1 ) ) { ?>
			<div id="mybox">
				<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 1 ) ) : else : //サイドウイジェット読み込み ?>
				<?php endif; ?>
			</div>
		<?php } ?>
		<!-- 追尾広告エリア -->
		<div id="scrollad">
			<?php if ( is_active_sidebar( 2 ) ) { ?>
				<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 2 ) ) : else : ?>
				<?php endif; ?>
			<?php } ?>
		</div>
		<!-- 追尾広告エリアここまで -->
	</div>
</div>
<!-- /#side -->

 

あとCSSも若干変更しました。

コード

/*-- サイドページの新着記事 --*/

#side .kanren .clearfix dd .kanren-t a {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}
#side .kanren dl {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

#side .st-aside .kanren {
    padding-top: 5px;
}

 

サイドバーの見出しをCSSでカスタム

デフォルトのサイドバーの見出しがすごくプレインだったので、はっきりと見出しだと分かるようにデザインを変更したいと思います。変更前がこれ。

以下のCSSを適用します。

コード

/*-- サイドバーの見出し --*/
p.menu_underh2:before {
    position: absolute;
    left: 5px;
    top: 6px;
    content: '\f061';
    color: #aaa;
    font-family: 'FontAwesome';
    font-size: 12px;
    line-height: 1;
}
    
p.menu_underh2 {
	padding-bottom:5px;
	    border-bottom: 1px dotted #888;
    position:relative;
    padding-left:25px;
    color:#333 !important;
}

変更後がこれ。

見出しのデザインはOKですが、各セクションの感覚が狭すぎるのここを上手くグルーピングしたいと思います。

 

各セクション間の間隔を広げる

以下のCSSを適用。

コード

/*-- サイドバーのPタグ --*/
.ad p{
	color:#555;
}

/*-- サイドバーの各セクション間の間隔 --*/
.ad {margin-bottom: 30px;}
.ad:first-child {margin-top: 10px;}

 

変更後がこちら。

大分ましになってきました。

あとこれは好みの問題ですが、カテゴリーリストのテキストの青色+下線が気になったので普通の黒色に変更します。

コード

/*-- カテゴリー --*/
#side .textwidget ul li a {
    color: #444;
    text-decoration: none;
}

#side .textwidget a:hover {
    color: #b22222;
}

#side .textwidget ul li {
    font-size: 14px;
    line-height: 28px;
    color: #444;
}

/*-- サブカテゴリー --*/
#side .textwidget ul li ul li:before{
    position: absolute;
    left: 5px;
    top: 6px;
    content: '\f105';
    color: #666;
    font-family: 'FontAwesome';
    font-size: 12px;
    line-height: 1;
}

#side .textwidget ul li ul li{
 position:relative;
    padding-left:20px;
}

 

変更後

全体的に読みやすくなったと思います。

サイドバーのコンテンツはあまり目立たせたくなかったので、フォントの色は抑えめの黒に設定しました。

 

WordPress Popular Postsの人気記事一覧のCSSカスタマイズ

次にWordPress Popular Postsというプラグインで付けた人気記事一覧のスタイリングへ。元の見た目はこんな感じです。

 

以下のCSSを適用します。

コード

/*-- 人気記事 --*/
.wpp-list li {
    font-size: 14px;
    line-height: 24px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #ccc;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

.wpp-list li:last-child {
    border-bottom:none;
}

.wpp-list li a{
color: #555;
text-decoration:none;
}

.wpp-thumbnail {
    margin: 0 10px 0 0 !important;
}

 

変更後はこれ。

 

以上でサイドバーのカスタマイズは終了です!

 

ちなみに、Stinger7(ブログ型)からStinger8(ミニサイト型)に変更してからトラフィックが8倍くらいに増えました(^_^)まあデザインの変更だけでなく、キーワード選定してサイトのタイトルやコンセプトを変更、カテゴリーの整理など、いろいろ行った結果ですが。ミニサイトは今のGoogleのアルゴリズムにあっているかもしれませんね。