前回は、最新の投稿のリスト、日付アーカイブ、カテゴリーの前後のページへのリンク（投稿ナビゲーション）の設定を行いましたが、今回は単一投稿表示時における前後の投稿へのリンクの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;
}

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

関連記事の目次