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

hatenaロゴ

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

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

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

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

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

.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）」に変更しました。

参考になるブログ・Webサイト