WordPressプラグイン WP Pagenaviで見栄えを調整する

bangou-10
このエントリーをはてなブックマークに追加
PR

WP Pagenavi はCSSファイルを持っているのでそのCSSファイルを調整すると

番号付きのナビゲーションの見た目を調整出来ます

プラグインのCSSファイルを開きます

 

中身はこのようになっています

.wp-pagenavi {
    clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 3px 5px;
    margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #000;
}

.wp-pagenavi span.current {
    font-weight: bold;
}

 

この中で.wp-pagenavi a, .wp-pagenavi spanの中身を調整すれば
番号付きのリンクの大きさ等を調整する事が出来ます

ちなみにこのサイトにも使用しています
このように調整しました

.wp-pagenavi {
    clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 3px 10px;
    margin: 2px;
    color: green;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: green;
}

.wp-pagenavi span.current {
    font-weight: bold;
}

paddingで横幅を広げて、ページナビゲーションの番号付きのものを正方形に近づけました
あとは、サイトメインカラーに合わせて、一部の色をgreenに変更しました

背景の指定などもすればグラデーションを使ったボタン風なども出来ます

さらに自作テーマを使っているので、このCSSを自作テーマの方に移して
プラグインの管理画面からCSSの指定を外しました

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)