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

hatenaロゴ

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

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

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

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

※ 個別記事の下にある前後の記事へのリンク(ページャ)が記事のタイトルではなく「次のページ」と「前のページ」になってしまいます...。

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

CSS
.pager a {
    font-size: 0;
}

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

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

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

参考になるブログ・Webサイト
Qiita - CSSでテキストを書き換える方法
いろいろ研究所 - 新しくなったはてなブログのページャーを見やすく整形する
16bit! - 【UX】「次の記事」は新しい記事のことだけど、「次のページ」は古い記事のこと
はてなブログ開発ブログ - 目的の記事にたどり着きやすくなるよう、前後の記事へのリンクと記事一覧ページを修正しました

- 追記 -
はてなブログに「前のページ」ボタンを設置する(jQuery)を書きました。
「前のページ」に戻るボタンなんかいらないを書きました。