右サイドバーには、ウィジェットを使ってアーカイブ、カテゴリーなどのリンクを表示出来ますが、この部分のスタイル設定を行います。

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;
}
　　：
　　：

「ブートストラップ３を使って自作テーマ作成」の目次へ

関連記事の目次