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-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; }
当ブログに掲載されているCSSについて
- CSSはCocoonのスタイルを元にカスタマイズをしています。仕様変更等で表示が崩れる可能性があります。その場合は追加したコードを削除してください。
- 表示確認はWindows/Chrome, Firefox, Edge、iPhone8/Safariで行っています。その他の端末では意図した表示にならない可能性があります。
- CSSが反映されない場合は以下のページをご確認ください。
WordPressテーマ設定(CSS等含む)を変更しても反映されない場合のトラブルシューティング方法 | Cocoon
CSSが効かない・反映されないときの対処法まとめ
コメント