ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
アメブロをカスタマイズしていくと、
細部にまで色の統一感を出したいものですよね。
今回は、ページ送りボタンの カスタムをしてみましょう。
ページ送りボタンとは、記事の上部にある
次のようなボタンのことです。
上記のボタンの色をブログの他の色に合わせるために
次のようにカスタムしてみたいと思います。
【１】通常時
【２】ボタンにマウスポインタをのせた時
上記のようにカスタムするためには、
次のCSSを追加する必要があります。
/* ■ページ送りボタン■ */
.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{/* ページ送りボタン*/
border:1px solid #afffb0;
background:#f0ffff;
color:#06c !important;
}
.skinSimpleBtn:hover,.skinSimpleBtn:focus{/* ボタンにマウスオーバー */
background:#6bb83e;
border:1px solid #6bb83e;
color:#fff !important;
}
.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{/* ページ送りボタン*/
border:1px solid #afffb0;
background:#f0ffff;
color:#06c !important;
}
.skinSimpleBtn:hover,.skinSimpleBtn:focus{/* ボタンにマウスオーバー */
background:#6bb83e;
border:1px solid #6bb83e;
color:#fff !important;
}
これで、色が統一されて
いい感じになりましたね。
私のブログで確認してくださいね。
↓↓↓
kiyoのテスト用ブログ
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
クリックして戴けると、
とても励みになります。