以前までのはてなブログでは、記事の下部にあるページャーが「前の記事»」「«次の記事」とあるだけで、前後の記事がなんなのかわかりづらく、クリックしてみようという意慾も喚起しにくく離脱の原因となりうる仕様でした。

「目的の記事にたどり着きやすくなるよう、前後の記事へのリンクと記事一覧ページを修正しました - はてなブログ開発ブログ」のアップデートにより、それが解決され、次の記事の見出しと、前の記事の見出しが表示されるようになりました。

しかし、私としてはまだ不満があり、それをCSSで解消してみました。

ビフォー

これが

アフター

こうなります。

ちなみにこのカスタマイズしたのはこのブログじゃなく別のブログです。ここのは標準のまま。

全文

.pager{
    overflow: hidden;
}

.pager .pager-prev,.pager .pager-next{
    display: block;
    margin: 1em 0;
}
.pager-arrow{
    display: none;
}

.pager .pager-prev {
    float: right;
}
    .pager .pager-prev:before {
        content: "ひとつ次の記事「";
    }
    .pager .pager-prev:after{
        content: "」 »";
    }
    
.pager .pager-next {
    float: left;
}
    .pager .pager-next:before {
        content: "« ひとつ前の記事「";
    }
    .pager .pager-next:after{
        content: "」";
    }

解説

画面認識の不一致

まず第一に不満だったのが、画面認識の感覚です。

はてなブログの標準では、新しい記事が左に、古い記事が配置されています。

webページは横書き、つまり左から右に読むことがほとんどです。そしてはてなブログでも横書きです。

横書きの本は左から右にページを読み進めていきますよね？ということは私は古い記事が左で、新しい記事が右に配置されているのが感覚として自然に思います。

.pager .pager-prev,.pager .pager-next{
    display: block;
    margin: 1em 0;
}

.pager .pager-prev {
    float: right;
}
.pager .pager-next {
    float: left;
}

floatを使い左右を逆に配置しました。

.pager{
    overflow: hidden;
}

overflow:hidden;は、floatでなくなった高さを出してレイアウト崩れを防ぐためです。

overflow:hidden;がないとこうなる。

参考：あなたがコーディング初心者を脱する方法｜WEB Drawer

言語感覚の不一致

そして、言語感覚の不一致です。CMSの大元となった英語圏の人間の感覚なのか知りませんが、たいていのCMS(ブログサービス)では、新しい記事が「前」(prev)、古い記事が「次」(next)となっています。

これがどうにも相容れませんし、私はよく混乱の元となっています。

日本語の感覚でいったら、「前」が古い記事、「次」が新しい記事になるほうが自然ではないでしょうか。

「前にこんなことがあってさー」という会話があったら「前」とは過去のことです。

「次あれやろう」の「次」といったら未来のことです。

この「前の記事」に新しい記事を、「次の記事」に過去の記事が割り当ててあるのですごく混乱します。

そこで.pager .pager-prevに対してcontent: "ひとつ次の記事「";を、.pager .pager-nextに対してcontent: "« ひとつ前の記事「";という、本来の記述と逆の表記をつけたしました。

    .pager .pager-prev:before {
        content: "ひとつ次の記事「";
    }
    .pager .pager-prev:after{
        content: "」 »";
    }
    
    .pager .pager-next:before {
        content: "« ひとつ前の記事「";
    }
    .pager .pager-next:after{
        content: "」";
    }

beforeとafter擬似要素で、キャプションを付け足し、括弧でくくっています。

括弧に元あった«マークが内包されてしまわないように

.pager-arrow{
    display: none;
}

で非表示にして、content要素で再記述するようにしています。

「次」「前」問題はいい加減どうにかしてほしい

「次」は未来。
「前」は過去で統一してほしいですねー。

押さえておきたい書籍