はてなブログの個別記事以外にページャの矢印をつけたい

hatenaロゴ

はてなブログの個別記事のページャにはクラス名（pager-arrow）つきで矢印「«」「»」が表示されているのに、トップページやカテゴリ、月別アーカイブには矢印がなくさびしいので、カスタマイズして表示させてみます。

ちなみに、個別記事のページャ（前と次の記事へのリンク）は、「記事タイトル」が表示されていますが、トップページやカテゴリ、月別アーカイブは「次のページ」のままです。

記事ページ（記事個別ページ）の下部にある前後の記事へのリンク（ページャ）は、これまで「次の記事」あるいは「前の記事」とのみ表示していましたが、よりわかりやすくなるよう前後の記事タイトルを表示するようにしました。

思いのほか手間取ったのは、カテゴリや月別アーカイブのページャの「前のページ」「次のページ」の文字の前後に謎のスペースが入っていて、トップページのページャと同じように矢印を表示できなかったこと（半角スペースが1個余計に表示される）。
行き当たりばったりで、パソコン向けはなんとか次のとおり表示できました。

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

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

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

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

ページャを「font-size: 0」で見えなくして、擬似要素タグのbeforeとafterを使ってそれらの前後に「« 前のページ」「次のページ »」を挿入してそれぞれ表示しました。

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

HTML 内のスペースや改行による「ズレ」を除去する TIPS

HTML 内のスペースや改行により「ズレ」が発生することがあります。これを除去する TIPS の紹介です。この記事は、私が遭遇した問題と解決策の共有です。数ある「ズレ」の要因の一つであり、一つの解決方法の紹介になります。

ただ、このブログのテーマ（Minimalism）のスマートフォンの表示だとうまく表示できなかったので、次のようにしました。

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

CSS
/* Media Queries - Small Tablet & Smartphone */
@media screen and (max-width:640px) {
    .pager {
        text-align: right;
    }
    :not(.permalink)>.pager-next {
        float: right !important;
        text-align: right !important;
    }
    .pager-permalink {
        display: inline;
    }
    :not(.permalink)>.pager-next a{
        border: 0;
        padding: 0;
    }
}