Cocoonのページ送りナビの左右を入れ替えるCSS

Cocoonのページ送りは初期状態では＜古い記事｜新しい記事＞のように、左に古い記事・右に新しい記事の配置になっています。

これを左右逆に入れ替えて、＜新しい記事｜古い記事＞のような並びにするCSSの紹介です。

表示サンプル

コードを適用した表示はこんな感じです。
「Cocoon設定＞投稿＞ページ送りナビ設定」の「表示」の項目の各設定の表示サンプル。

「ページ送りナビの枠線を表示する」はオンでもオフでも大丈夫です。

デフォルト

古い記事のタイトル

新しい記事のタイトル

サムネイル正方形

古い記事のタイトル

新しい記事のタイトル

【コピペでOK】ページ送りナビの左右を入れ替えるCSS

子テーマのstyle.cssに以下のコードをコピペするだけです。

/* ページ送りナビの左右を入れ替える */
.pager-post-navi a.prev-post {
	flex-direction: row-reverse;
}
.pager-post-navi a.next-post {
	flex-direction: row;
}
.pager-post-navi a.next-post:before {
	content: '\f053';
	margin: 0 5px 0 0;
}
.pager-post-navi a.prev-post:before {
	content: '\f054';
	margin: 0 0 0 5px;
}
.pager-post-navi a.next-post .next-post-title {
	margin: 0 0 0 10px;
}
.pager-post-navi a.prev-post .prev-post-title {
	margin: 0 10px 0 0;
}
@media screen and (min-width: 481px) {
    .pager-post-navi.post-navi-square {
        flex-direction: row-reverse;
    }
    .post-navi-square.post-navi-border a:last-child {
        border-left-width: 1px;
    }
    .post-navi-square.post-navi-border a:first-child {
        border-left-width: 0;
    }
}

カスタマイズする

上下を入れ替える

「Cocoon設定＞投稿＞ページ送りナビ設定」の「表示」の項目で

• 「デフォルト」の設定の時
• 「サムネイル正方形」の設定で、スマホ表示(480px以下)の時

上が新しい記事のタイトル・下が古い記事のタイトルになるようにする場合以下のコードを追加。

/* ページ送りナビの上下を入れ替える */
.pager-post-navi.post-navi-default {
	flex-direction: column-reverse;
}
.post-navi-default.post-navi-border a.prev-post {
	border-top-width: 0;
}
.post-navi-default.post-navi-border a:only-child,
.post-navi-default.post-navi-border a.next-post {
	border-top-width: 1px;
}
@media screen and (max-width: 480px) {
    .pager-post-navi.post-navi-square {
        flex-direction: column-reverse;
    }
    .post-navi-square.post-navi-border a:first-child {
        border-top-width: 0;
    }
    .post-navi-square.post-navi-border a:last-child {
        border-top-width: 1px;
    }
}

古い記事のタイトル

新しい記事のタイトル

記事タイトルの上にラベルを追加する

今回はclass名に合わせて「次のページ/前のページ」のラベルを付けてみます。

.prev-post-title:before,
.next-post-title:before {
	color: #999999; /* 文字色 */
	font-size: 12px; /* 文字サイズ */
	margin-bottom: 0.3em;
	display: block;
}
.next-post-title:before {
	content: '次のページ';
}
.prev-post-title:before {
	content: '前のページ';
}

古い記事のタイトル

新しい記事のタイトル

古い記事のタイトル文字を右寄せにする

以下を追加

.prev-post-title {
	text-align: right;
}

表示サンプル

古い記事のタイトル。2行目以降も右寄せになる。

ラベルだけ右寄せは以下を追加

.prev-post-title:before {
	text-align: right;
}

表示サンプル

古い記事のタイトル。2行目以降は右寄せにならない。

Web上での「新/古」の左右感覚の考察

記事一覧では”昇降順が新しい順”なら大抵左上が一番新しく、右下が一番古い記事になると思います。
そのため、私は記事のページ送りナビでも「右が古い記事」という感覚があります。

”記事一覧と記事ページで同じ左右感覚”のイメージ

一方ブラウザの「戻る/進む」では「右が進む」のため、戻る進むという観点では「右が新しい」という感覚もあると思います。

ブラウザでは左が戻る・右が進む

こんな感じで左右感覚が曖昧のまま「前/次」という表記だとどっちがどっちかわからなかったりするので、記事のナビは「新/古」の表記が好きです。笑
※一覧ページはこの限りではない

実際どの程度の方が記事単位で見た時「右が古い記事」という感覚なのか不明ですが、気になる方はこの記事のコードをご活用いただければと思います！

2019-03-18追記:
同様の感覚の方の、アンケート結果も掲載された面白い記事を見つけました。

左が過去で右が未来…？ページ送りの正しい方向とは？WEB屋のみなさんに聞いてみました

ブログって、ページ送りがついてますよね。一覧にも、記事詳細にも。先日気付いたのですが、 記事一覧のページ送りは『右』にいくほど過去になって、詳細ページは『左』にいくほど過去になるサイトが多いのです。

webimemo.com

2014年の記事ですがこちらを見ると、私のような右が過去派は若干劣勢のようです。
「まぁ…そうだろうな」という感じですが笑

右が古いの感覚は私の場合pixivの影響が大きいなぁと思います。
ギャラリーのように並ぶので一覧とイラスト詳細ページの左右が一致していて右が古いイラストなんですよね。
今アンケートをとったらもっと差が出て劣勢になりそうだな～と思うのでした。

修正履歴

• 2019-01-11: レスポンシブ対応が不十分だったのでコードを修正しました。

  修正前のコード

  /* ページ送りナビの左右を入れ替える */
  .pager-post-navi.
  post-navi-square,
  .pager-post-navi a.prev-post {
  	flex-direction: row-reverse;
  }
  .pager-post-navi a.next-post {
  	flex-direction: row;
  }
  .pager-post-navi a.next-post:before {
  	content: '\f053';
  	margin: 0 5px 0 0;
  }
  .pager-post-navi a.prev-post:before {
  	content: '\f054';
  	margin: 0 0 0 5px;
  }
  .pager-post-navi a.next-post .next-post-title {
  	margin: 0 0 0 10px;
  }
  .pager-post-navi a.prev-post .prev-post-title {
  	margin: 0 10px 0 0;
  }
  .post-navi-square.post-navi-border a.prev-next-home:last-child,
  .post-navi-square.post-navi-border a.next-post {
  	border-left-width: 1px;
  }
  .post-navi-square.post-navi-border a.prev-next-home:first-child,
  .post-navi-square.post-navi-border a.prev-post {
  	border-left-width: 0;
  }
  .post-navi-square.pager-post-navi.post-navi-border a:last-child {
  	border-top-width: 1px;
  }

  /* ページ送りナビの上下を入れ替える */
  .pager-post-navi.post-navi-default {
  	flex-direction: column-reverse;
  }
  .post-navi-default.post-navi-border a.prev-post {
  	border-top-width: 0;
  }
  .post-navi-default.post-navi-border a:only-child,
  .post-navi-default.post-navi-border a.next-post {
  	border-top-width: 1px;
  }