右サイドバーには、ウィジェットを使ってアーカイブ、カテゴリーなどのリンクを表示出来ますが、この部分のスタイル設定を行います。
CSSクラスの確認
実際にHTMLのソースを見て使用されているCSSクラスを確認します。ウィジェットにある日付アーカイブのリンクは下記のようなHTMLになっています。
“content-sidebar”、”widget widget_archive”などのCSSクラスが使用されています。
<div id="content-sidebar" class="content-sidebar widget-area" role="complementary">
<aside id="archives-2" class="widget widget_archive"><h1 class="widget-title">アーカイブ</h1> <ul>
<li><a href='http://・・・/2014/02/'>2014年2月</a></li>
：
：
TwentyFourteenでの設定場所
上記コードはテンプレートファイル内には記述されていなく、functions.php内の関数によって生成されています。
（sidebar.php）
<?php dynamic_sidebar( 'sidebar-2' ); ?>
（functions.php）
register_sidebar( array(
'name' => __( 'Content Sidebar', 'twentyfourteen' ),
'id' => 'sidebar-2',
'description' => __( 'Additional sidebar that appears on the r
ight.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
※TwentyFourteenのサイドバーについて
TwentyFourteenでは左右のサードバーが設定されていて、左サイドバーをメインサイドバー、右サイドバーをコンテンツサイドバーとしていて、役割やスタイルの設定も分けています。
・メインサイドバー（左）
テンプレートファイル：sidebar.php
style.cssでの設定場所：* 7.1 Widgets
・コンテンツサイドバー（右）
テンプレートファイル：sidebar-content.php
style.cssでの設定場所：* 7.2 Content Sidebar Widgets
TwentyFourteenのstyle.cssの設定をベースに設定
今回は右サイドバーの設定を行っていますので、TwentyFourteenのstyle.cssの”* 7.2 Content Sidebar Widgets”の部分をコピーし、自分の好みに応じて適宜修正します。
●修正例
上部のタイトル部分との余白がないため、下記設定を追加しました。
#content-sidebar {
margin-top: 10px;
}
以下設定例です。
/**
* 7.2 Content Sidebar Widgets
* -----------------------------------------------------------------------------
*/
#content-sidebar {
margin-top: 10px;
}
.content-sidebar .widget a {
color: #24890d;
}
：
：