最新の投稿のリスト、日付アーカイブ、カテゴリーのページを表示するとページの下部に前後のページへのリンク（投稿ナビゲーション）が表示されていますが、この部分のCSS設定を行います。
CSSクラスの確認
投稿ナビゲーションがどのCSSクラスで設定されているか、実際にHTMLソースを見て確認して見ます。
投稿ナビゲーション部のHTMLソースは下記のようになっていて、”paging-navigation”というCSSクラスが使用されています。
<nav class="navigation paging-navigation" role="navigation">
<h1 class="screen-reader-text">投稿ナビゲーション</h1>
<div class="pagination loop-pagination">
<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://・・/page/2/'>2</a>
<span class="page-numbers dots">…</span>
<a class='page-numbers' href='http://・・/page/12/'>12</a>
<a class="next page-numbers" href="http://・・/page/2/">次へ →</a> </div><!-- .pagination -->
</nav><!-- .navigation -->
TwentyFourteenでの設定場所
上記コードは、twentyfourteen_paging_nav()というテンプレートタグで生成されているようです。
index.php、archive.php、category.php、search.phpでは下記のようにtwentyfourteen_paging_nav()が使用されています。
・index.php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
twentyfourteen_paging_nav();
・twentyfourteen_paging_nav()の定義場所
functions.phpに定義されているのかと思っていたのですが、inc/template-tags.php内に定義されています。
TwentyFourteenのstyle.cssの設定をベースに設定
上記のCSSクラスは、TwentyFourteenのstyle.cssの”6.7 Post/Image/Paging Navigation”の部分に設定されています。
“6.7 Post/Image/Paging Navigation”の部分をコピーし、使用していないクラスは除去し、使用しているCSSクラスを自分の好みに合わせて修正します。
●修正例
・下記部分の文字サイズが大きかったので小さいサイズに変更しました。
<h1 class=”screen-reader-text”>投稿ナビゲーション</h1>
.paging-navigation h1 {
font-size: 23px;
}
/**
* 6.7 Post/Image/Paging Navigation
* ---------------------------------------------------------
*/
/* Paging Navigation */
.paging-navigation {
border-top: 5px solid #000;
margin: 48px 0;
}
.paging-navigation .loop-pagination {
margin-top: -5px;
text-align: center;
}
.paging-navigation .page-numbers {
border-top: 5px solid transparent;
display: inline-block;
font-size: 14px;
font-weight: 900;
margin-right: 1px;
padding: 7px 16px;
text-transform: uppercase;
}
.paging-navigation a {
color: #2b2b2b;
}
.paging-navigation .page-numbers.current {
border-top: 5px solid #24890d;
}
.paging-navigation a:hover {
border-top: 5px solid #41a62a;
color: #2b2b2b;
}
.paging-navigation h1 {
font-size: 23px;
}