はてなブログのページャをボタン風に表示

hatenaロゴ

はてなブログのサイドバーのカテゴリーをボタン風に表示を応用して、各ページの下にある前後のページのリンク(ページャ)をCSSでボタン風(タグ風)に表示してみました。

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

CSS
.pager {
    font-size: 14px;
}

.pager a {
    text-decoration: none;
    padding: 9px;
    color: #454545;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    white-space: nowrap;
    transition: 0.3s; /*ふわっと表示させる*/
}

.pager a:hover {
    color: #fff;
    background: #454545;
    border-color: #454545;
}

.pager-prev,
.pager-next {
    width: 50% !important;
}

.pager-prev a:before {
    content: "\25C0";
}

.pager-next a:after {
    content: "\25b6";
}

.pager-arrow {
    display: none;
}

「white-space: nowrap」でページャのリンクテキストを1行で表示するようにしました。
「width: 50% !important」でページャを記事の横幅よりはみ出ないようにしました。
また、ページャの矢印アイコン(HTMLの特殊文字)の「«」「»」を「◀(25C0)」「▶(25b6)」に変更しました。

※ このブログのテーマはMinimalismなので、他のテーマで表示できないかもしれません。

参考になるブログ・Webサイト
Snagimo - 表示幅に合わせて文字列を省略して「…」を付ける
16bit! - 【UX】「次の記事」は新しい記事のことだけど、「次のページ」は古い記事のこと

- 追記 -
はてなブログのページャをカスタマイズを書きました。