はてなブログの「前のページ」と「次のページ」を逆にしてみる

hatenaロゴ

今まであまり気にしたことがなかったというか、ブログはそういうものなんだと勝手に思っていたのが、「前のページ」「次のページ」と「前の記事」と「次の記事」の関係。

    ブログ的には
  • 「次のページ」=「古い記事」
  • 「前のページ」=「新しい記事」
    個人的には
  • 「次のページ」=「新しい記事」
  • 「前のページ」=「古い記事」

個人的には、「前」は過去のこと、「次」は未来のことだと思っていますが、ブログは逆。
よくよく考えると、どっちがどっちだっけと、わけがわからなくなって、混乱してしまう。

そんなわけで、トップページやカテゴリー、月別アーカイブのページャ(前後の記事へのリンク)の「次のページ」と「前のページ」のリンクをCSSで逆(反対)に表示してみることにしました。

※ 個別記事のページャが記事のタイトルではなく「次のページ」と「前のページ」になってしまいます...。

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
.pager {
    font-size: 0;
}

.pager-prev a:before {
    font-size: 15px;
    content: "次のページ";
}

.pager-next a:after {
    font-size: 15px;
    content: "前のページ";
}

リンクテキスト(「前のページ」、「次のページ」、個別記事のページャの記事タイトル)の文字列を「font-size: 0」で見えなくして、前のページのリンク(の前)に「次のページ」、次のページのリンク(の後)に「前のページ」という文字列を挿入してそれぞれ表示します。

参考になるブログ・Webサイト
Qiita - CSSでテキストを書き換える方法
16bit! - 「次の記事」は新しい記事のことだけど、「次のページ」は古い記事のこと
ウェブ企画パートナーズ - ブログの「前へ」「次へ」ボタンは左右どちらか過去・未来?

- 追記 -
はてなブログのトップページに「前のページ」リンクを設置した
はてなブログの個別記事以外にページャの矢印をつけたい