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

hatenaロゴ

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

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

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

その後、記事タイトルの長さによって、ページャのリンクテキストの幅(ボタンの幅)が変化するのが気になったので、ページャを固定幅にするため、「white-space:nowrap;」に「overflow:hidden;」と「text-overflow:ellipsis;」を追加して解決しました。
参考:Web備忘録 - [CSS] 1行で収まらなずに要素の幅を超えた文字列を「…」で省略する方法

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

前置きが長くなりましたが(いろいろ考えているのです)、コードは次のとおりです。
(デザイン設定→カスタマイズ→デザインCSSにコードを入力)

.pager {
	font-size: 14px;
}

.pager a { /* リンクテキスト */
	text-decoration: none;
	padding: 6px;
	color: #454545;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	transition: all ease .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)なのにシンプルじゃないなということで、ボタン風はやめて、リンクテキストにしています。