mydebt.co.zaサイトは、ブルーとグリーンの配色を用いたシンプルなテンプレートを使っています。
このサイトの「続きを読む」(read more)がキレイだったので、どのようにスタイルシートが記述されているかチェックしたいと思います。
 
read more ...（日本語表示では、「続きを読む」）には、readonというクラスが適用されます。
上のように、マウスオーバー時に背景画像と配色が変わるようにするには、そのためのCSSも記述しなければなりません。以下がそのコードです。
/* まずはフォントサイズを92%に縮小 */
small, .small, .smalldark, .createby, .createdate, .modifydate, .img_caption,
p.site-slogan, a.readon, #ja-pathway, #ja-headlinewrap, #ja-col1, #ja-col2, #ja-botsl, #ja-footer {
font-size: 92%;
}
/* 通常のリンクの設定 */
a.readon {
display: block;
float: left;
text-align: center;
clear: both;
padding: 0 5px;
background: url(../images/grad2-2.gif) repeat-x center #8BAB32;
color: #FFFFFF;
margin-top: 5px;
text-transform: lowercase;
}
/* マウスオーバー時の設定。背景画像と配色を変更します */
a.readon:hover, a.readon:active, a.readon:focus {
background: url(../images/grad2-1.gif) repeat-x center #2C79B3;
color: #FFFFFF;
text-decoration: none;
}
|
