前回は、最新の投稿のリスト、日付アーカイブ、カテゴリーの前後のページへのリンク（投稿ナビゲーション）の設定を行いましたが、今回は単一投稿表示時における前後の投稿へのリンクのCSS設定を行います。
CSSクラスの確認
単一投稿表示中に前後の投稿のリンク（投稿ナビゲーション）がどのCSSクラスで設定されているか、実際にHTMLソースを見て確認してみます。
投稿ナビゲーション部のHTMLソースは下記のようになっていて、”post-navigation”というCSSクラスが使用されています。
<nav class="navigation post-navigation" role="navigation">
<h1 class="screen-reader-text">投稿ナビゲーション</h1>
<div class="nav-links">
<a href="・・" rel="prev">
<span class="meta-nav">前の投稿</span>・・</a>
<a href="・・" rel="next">
<span class="meta-nav">次の投稿</span>・・</a> </div><!-- .nav-links -->
</nav><!-- .navigation -->
TwentyFourteenでの設定場所
前後のページのリンクでは、”twentyfourteen_paging_nav()”というテンプレートタグを使っていましたが、前後の投稿へのリンクでは、”twentyfourteen_post_nav()”を使用しています。
・single.php
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
// Previous/next post navigation.
twentyfourteen_post_nav();
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
・twentyfourteen_post_nav()の定義場所
前後のページの場合と同様で、inc/template-tags.php内に定義されています。
TwentyFourteenのstyle.cssの設定をベースに設定
上記のCSSクラスは、TwentyFourteenのstyle.cssの”6.7 Post/Image/Paging Navigation”の部分に設定されています。
“6.7 Post/Image/Paging Navigation”内の該当する部分をコピーし、自分の好みに合わせて修正します。
●修正例
・image-navigationはどこで使われているか未確認ですが、とりあえずそのままそのままコピーしました。
・下記部分の文字サイズが大きかったので小さくする設定を追加しました。
<h1 class=”screen-reader-text”>投稿ナビゲーション</h1>
.post-navigation h1 {
font-size: 23px;
}
・post-navigationクラスの”margin: 24px auto 48px;”を削除しました。
/**
* 6.7 Post/Image/Paging Navigation
* --------------------------------------------------------
*/
.post-navigation,
.image-navigation {
max-width: 474px;
padding: 0 10px;
}
.post-navigation a,
.image-navigation .previous-image,
.image-navigation .next-image {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 11px 0 12px;
width: 100%;
}
.post-navigation .meta-nav {
color: #767676;
display: block;
font-size: 12px;
font-weight: 900;
line-height: 2;
text-transform: uppercase;
}
.post-navigation a,
.image-navigation a {
color: #2b2b2b;
display: block;
font-size: 14px;
font-weight: 700;
line-height: 1.7142857142;
text-transform: none;
}
.post-navigation a:hover,
.image-navigation a:hover {
color: #41a62a;
}
.post-navigation h1 {
font-size: 23px;
}