SANGOのページ分割ボタンが崩れる問題をcssのみで解決

先日、1記事を複数ページに分ける「ページ分割」を行い表示を確認したところ

と、焦りましたがCSSで簡単に解決できたので共有します。

ページ送りのボタンがズレている

SANGOでページ分割を行い、ボタンが表示されましたが何か違和感を感じる…！
画像で確認してもらえば分かりますがボタン左側が少しズレてしまってます。

これをcssで修正していきたいと思います。

.page-links span.current{
    display: unset;
    width: unset;
    height: unset;
    margin: unset;
    border-radius: unset;
    background: transparent;
    font-size: unset;
    text-align: unset;
    line-height: unset;
}

このcssを書き込めば、下の画像のようにボタンのズレが解消されます！

何故ボタンはズレたのか？

今回、ページ送りのボタン装飾はspanに指定されていた為、ボタン装飾cssが二重で効いていました。
その指定を全てリセットすればボタンもズレる事なく表示されます。

ページ送りのカスタマイズ

この数字が表示されているボタンだけだと、なんのボタンや数字か分かってもらえない場合もあるので
頭に「ページ：」を付け足して、複数のページに分かれている事を訪問者へ分かりやすくしてみます。

.page-links:before{
	content: 'ページ：';
}

これでページ送りの頭に「ページ：」が追加されてました。
問題無く表示・動作するか必ず確認してください。