AFFINGER

【アフィンガー】ページ数リンクのカラー(色)変更カスタマイズ【CSSコピペ】

2019年8月12日

AFFINGER(アフィンガー)カスタマイズ CSS

 

こんにちは、NOJIです。

 

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

 

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

 

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

 

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

 

カスタマイズ目的

 

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

 

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

アフィンガー ページ数リンク カラー(色)

アフィンガー ページ数リンク カラー(色)

 

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

 

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

 

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

 

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

 

カスタマイズ方法

 

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

 

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

 

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

 

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

 

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

 

まとめ:アフィンガー5「JET」の記事一覧カード余白のカスタマイズ方法

 

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

 

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

 

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

 

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

 

AFFINGER(アフィンガー)カスタマイズ CSS
【アフィンガーカスタマイズ】見た目をさらにおしゃれにするCSSまとめ集

続きを見る

【特典付き】有料テーマならAFFINGER5(アフィンガー5)がおすすめ!【魅力を徹底解説】
【特典付き】有料テーマならAFFINGER5(アフィンガー5)がおすすめ!【魅力を徹底解説】

続きを見る

 

-AFFINGER
-

Copyright© NOJI BLOG , 2019 All Rights Reserved.