• TOP
• ブログ

＜ZELOカスタマイズ記⑨＞ページ送り（番号付きページ移動ボタン）のデザインをちょっとだけいじったはなし

2019-12-18T00:00:00+09:00 2019-12-29T05:43:10Z Blogger ZELO カスタマイズ ブログ

いわゆるページネーション。
ZELOの構文でいうと、「番号付きページボタン」。

のデザインをちょーっとだけいじった記録。

※かならずバックアップをとってからカスタマイズしてください。

（番号の背景をマル○に近づけたのと、影をつけた程度のカスタマイズです。）

ビフォー

    /* ---------- 番号付きページ移動ボタン */

    #blog-pager {

    width: 100%;

    height: 100%;

    margin: 2em 0 !important;

    }

    .showpageOf {

    display:none;

    }

    span.showpagePoint {

    display: inline-block;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    padding: .4em .8em;

    margin: 0 .2em;

    border-radius: 0.25em;

    background-color: $(pnow.bg.color);

    color: $(pnow.font.color);

    pointer-events: none;

    }

    span.showpageNum, span.showpage {

    margin: 0 .2em;

    }

    .showpageNum a, .showpage a {

    -webkit-box-sizing: border-box !important;

    -moz-box-sizing: border-box !important;

    box-sizing: border-box !important;

    display: inline-block;

    padding: .4em .8em;

    border-radius: 0.25em;

    color: $(pager.font.color);

    text-decoration: none;

    background-color: $(pager.bg.color);

    }

アフター

    /* ---------- 番号付きページ移動ボタン */

    #blog-pager {

    width: 100%;

    height: 100%;

    margin: 2em 0 !important;

    }

    .showpageOf {

    display:none;

    }

    span.showpagePoint {

    display: inline-block;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    padding: .4em .8em;

    margin: 0 .2em;

    border-radius: 50%;

    background-color: $(pnow.bg.color);

    color: $(pnow.font.color);

    pointer-events: none;

    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);

    }

    span.showpageNum, span.showpage {

    margin: 0 .2em;

    }

    .showpageNum a, .showpage a {

    -webkit-box-sizing: border-box !important;

    -moz-box-sizing: border-box !important;

    box-sizing: border-box !important;

    display: inline-block;

    padding: .4em .8em;

    border-radius: 50%;

    color: $(pager.font.color);

    text-decoration: none;

    background-color: $(pager.bg.color);

    }

おわりっ。