はてなブログテーマ製作｜ページャーを作るのに一苦労

はてなブログのテーマを自作テーマにしようと現在奮闘しております。

皆さんこんにちわ、モノトーン好きのmonoです。

さて、タイトルの通り、今日もはてなブログのテーマをちまちまと作っておりますが、今回はページの次へ、前への表示のページャーです。

デフォルトのページャーの設定を見てみる
ページャーのCSS
出来上がりはこんな感じになりました

デフォルトのページャーの設定を見てみる

デフォルトのページャーの設定を見てみると、私の苦手なflexboxで、space-betweenで両端になっていました。

この設定でも構わないと思ったのですが、タイトルが長くてスマホで見ると文字が密接していてちょっとわかりにくいような気がします。

パソコンで見る分にはそれほど支障はないんですけど。

どうしたものか。

よくあるのが、afterやbeforeの擬似要素で「NEXT」「BEFORE」などの文字を付け加えるとか、矢印を入れるとか、それくらいですかね。

で、私が考えたのが、flexboxで横並びになっているのを解除して2列にしてから矢印マークを擬似要素でつけることにしました。

ページャーのCSS

ちょっと長いんですが、もし何かの拍子で消えてしまったとしてもこの記事に残しておけば後から使えるかもしれないから残しておこうと思います。

これを作るだけで数時間。

/* 記事のページャー */
.pager {
    margin: 2em 0 4em 0;
    display: flex;
    flex-direction: column;
}
.pager-prev a {
    text-decoration: none;
    position: relative;
    display: block;
    color: var(--color-bg-ui);
    margin-bottom: 5px;
    text-align:left;
    margin-left: 32px;
    line-height: 30px;
}
.pager-next a {
    text-decoration: none;
    position: relative;
    display: block;
    color: var(--color-bg-ui);
    text-align: right;
    margin-right: 37px;
    line-height: 30px;
}
.pager-prev a:hover,
.pager-next a:hover {
    opacity: .7;
}

.pager-prev a::before {
    position: absolute;
    text-align: center;
    display: block;
    font-family: blogicon;
    content: "\f005";
    height: 30px;
    width: 30px;
    color: #fff;
    background-color: var(--color-bg-ui);
    border-radius: 50%;
    left: -32px;   
}
.pager-next a::before {
    position: absolute;
    font-family: blogicon;
    content: "\f006";
    height: 30px;
    width: 30px;
    text-align: center;
    color: #fff;
    background-color: var(--color-bg-ui);
    border-radius: 50%;
    right: -37px;
}
.pager-arrow {
    display: none;
}