はてなブログのページャをカスタマイズ

hatenaロゴ

このブログは、デザインテーマのMinimalismをカスタマイズして使っていますが、記事のタイトルが長くなると、個別記事のページの下にあるページャが折り返される(改行)のが気になっていました。

そこで、CSSでカスタマイズし、「white-space:nowrap」でページャのリンクテキストを1行で表示するようにしたのですが、記事タイトルが長いと、ページャの矢印アイコンが表示されないことがあったので、しかたなく、矢印アイコンを非表示にしていました。

そして、テキストじゃなくボタン(風)に表示したいということで、はてなブログのページャをボタン風に表示するようになりました(スマートフォンで見るとカッコ悪い...。)

その後、記事タイトルの長さによって、ページャのリンクテキストの幅(ボタンの幅)が変化するのが気になったので、ページャを固定幅にするため、「white-space:nowrap;」に「overflow:hidden;」と「text-overflow:ellipsis;」を追加して解決しました。

参考になるブログ・Webサイト
Web備忘録 - [CSS] 1行で収まらなずに要素の幅を超えた文字列を「…」で省略する方法

ただ、矢印アイコンがないのはさびしいので、リンクテキストに矢印を追加するのではなく、リンクテキスト(ボタン)の前後に矢印を表示することにしました。

前置きが長くなりましたが(いろいろ考えているのです)、コードは次のとおりです。

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

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

/* リンクテキスト */
.pager a {
    text-decoration: none;
    padding: 6px;
    color: #454545;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    transition: 0.3s;
    width: 276px; /* 固定幅にする */
    white-space: nowrap; /* リンクを折り返さない */
    overflow: hidden; /* はみ出た部分は隠す */
    text-overflow: ellipsis; /* 末尾に「…」と三点リーダーをつける */
    display: inline-block; /* リンクと矢印を横並びにする */
    text-align: center;
}

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

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

/* 前へリンクの前に矢印を表示 */
.pager-prev:before {
    float: left;
    margin: 8px 8px 0 0;
    content: "\25C0";
}

/* 次へリンクの後に矢印を表示 */
.pager-next:after {
    float: right;
    margin: 8px 0 0 8px;
    content: "\25b6";
}

.pager-arrow {
    display: none;
}

/* トップページやカテゴリーページのリンクの幅 */
.pager a[href*="page="] {
    width: 25%;
}

今は、せっかくのミニマリズム(Minimalism)なのにシンプルじゃないなということで、ボタン風はやめて、リンクテキストにしています。

- 追記 -
はてなブログの関連記事をカスタマイズしてシンプルに表示を書きました。