このブログは、デザインテーマの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: #000;
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
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: #000;
border-color: #000;
}
.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）なのにシンプルじゃないなということで、ボタン風はやめて、リンクテキストにしています。
