【アフィンガー】ページ数リンク（ページャー）のカラーカスタマイズ【CSSコピペ】

2020年1月14日

こんにちは、NOJIです。

今回はページ数リンクカラーを変更するカスタマイズをしていきます。

デフォルト状態ですと、ページ数リンクの色の違いがあまりない（色が薄い）ため、今何ページ目にいるのかが若干わかりにくくなっています。

今回紹介するカスタマイズではページ数のカラーを濃くして、ページ数リンクをより見やすくしていきます。

カスタマイズはCSSのコピペのみでOKです。簡単ですので安心してください！

カスタマイズ目的

今回のカスタマイズをすると以下のようになります。

※タブで切り替えできます。

BeforeAfter

アフィンガー　ページ数リンク　カラー（色）

こんな感じで現在表示しているページ数以外の色を濃くしていきます。

こうすることで今見てるページ数が何ページ目なのかがわかりやすくなりますね。

上記の場合、一目で今1ページ目にいるのが分かると思います、

見ているユーザーが迷わなくなるので、良いと思ったら導入してみてください。

CSSをいじるので念のためバックアップを取ることをおすすめします。

「外観」→「カスタマイズ」→「追加CSS」に以下のコードを貼り付けます。

/*ページ数リンクカラー*/
.st-pagelink .page-numbers {
border-color: rgb(68, 68, 68);/*ページ数周りのボーダーカラー*/
color: rgb(68, 68, 68);/*ページ数カラー*/
}

上記のCSSをコピペすれば、見本のようにページ数リンクカラーが変わります。

カラーは上記の値を変更すれば変えられるので、適宜お好みのカラーにしてみてください。

以上、ページ数リンクカラーのカスタマイズでした。

ページ数リンクカラーを見やすくすることで、ユーザーが今見ているページ数が何ページ目なのかがはっきり分かるのでおすすめです。

良いと思ったら導入してみましょう！

NOJI

俺のブログまだまだページ数少ないな....