はてなブログでページャーをカスタマイズしてみた。

f:id:Kawan0116:20210507150117p:plain

記事の下にページャーがありますね。

何もデザインしなければテキストだけですね(このブログの場合)。

そのままだと味気ないということでカスタマイズしてみました。

.pager.pager-permalink.permalink {
margin-top: 20px;
}

.pager-prev a {
    margin-bottom: 20px;
}

.pager-prev a,
.pager-next a {
text-align:center;
display: block;
background: #fff;
text-decoration: none;
padding:16px;
border-radius: 5px;
border:1px solid #ddd;
width: 100%;
}
 
.pager-next a:hover,
.pager-prev a:hover {
background:#af1a17;
color: #fff;
border: 1px solid #af1a17;
border-radius: 5px;
}

簡単に説明するとaタグをブロック化してボタンを作ります。

上の状態であれば、コンテンツの幅と同じになります。

サイドバーまで広がらないということですね。

ボタンが大きいので押しやすいと思っています。

小さなボタンでオシャレにアレンジしても面白いですね。

トップページのページャーと記事ページのページャーは同じデザインにしています。

統一感があって良いかなと思っています。

スマホ、PCで表示確認済み。要するにレスポンシブ対応ですねぇ~。

これでOKとしておこう・・・。