スティンガー3を使い始めて、真っ先に思ったのは「続きを見る」の背景色が目立たなくて、デザインに埋もれているなって事でした。しかもデフォルト色が微妙なグレーで押してる状態がぼんやりしたピンク色。。。まあ配色自体の組み合わせはいいんですけど、サイトのイメージ色とかけ離れちゃうと、ちょっと変えたくなりますよね。
ってなわけで、カスタマイズです。
いじるファイルは「style.css」です。
※作業を始める前に、バックアップは取りましょう。
実践！カスタマイズ
.motto
で検索すると
/*記事を読む*/
.motto a {
color: #FFF;
text-decoration: none;
background-color: #f3f3f3;
width: 90px;
color: #666666;
text-align: center;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
font-weight: normal;
}
.motto a:hover {
color: #FFF;
text-decoration: none;
background-color: #FFAAAA;
color: #FFF;
text-align: center;
display: block;
}
っていう部分があるかと思いますが、ここをいじる事でカスタマイズが可能です。
.motto a:hover以後はオンカーソル状態です。
background-color: 「続きを見る」の背景色
width: 「続きを見る」の背景枠の幅
color: 「続きを見る」の文字色
text-align: 「続きを見る」の文字寄せ (left / center / right)
です。cssやhtmlのコーディングに慣れている方はさほどつまづくところではないと思います。全くはじめての方は、バックアップをとってトライ＆エラーを繰り返してみてください。
