【Twenty Twelve】記事下の新しい、古い記事のリンクのCSS

Twenty Twelveの記事の下に表示される「古い記事」「新しい記事」?が一行で左右に表示されますが、それを2行にしてそれぞれタイトルを表示する方法について。

next_pre

single.phpファイルのnav.nav-singleにあるナビゲーションを下のコードに書き換えます。Twenty Twelveでは国際化のためのコードを使用していますが、ここでは日本語表示だけの対応にしています。

<span class="nav-previous"><span class="meta-nav">前の記事:</span><?php previous_post_link( '%link', '%title' ); ?></span>
<span class="nav-next"><span class="meta-nav">次の記事:</span><?php next_post_link( '%link', '%title' ); ?></span>

style.cssファイルの最後に下のコードを追加するか、もしくは該当するセレクタのプロパティの値を下のコードに変更します。

.nav-previous,
.previous-image {
  float: none;
  width: 100%;
  display: block;		
}
.nav-next,
.next-image {
  text-align: left;
  float: none;
  width: 100%;
  display: block;	
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です