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屋のみなさんに聞いてみました
ブログって、ページ送りがついてますよね。一覧にも、記事詳細にも。先日気付いたのですが、 記事一覧のページ送りは『右』にいくほど過去になって、詳細ページは『左』にいくほど過去になるサイトが多いのです。

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;
    }

当ブログに掲載されているCSSについて

コメント

タイトルとURLをコピーしました