前の10件（トップページ）/前の記事（記事ページ）の設定を変える

【前の10件/前の記事の設定を変える】
今回は
前の記事　ブログトップ【記事ページ】
前の10件　　　　　　　　 【トップページ】
という部分の設定を変更します。

設定を変えるには
/*-----Content-----*/内の
/* Links */にある

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
}

この部分を追加・変更します。

＜文字の大きさを変える＞
文字の大きさを変えるには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
font-size:★；
}

と、記述して下さい。
★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」
内の『文字の大きさを変える』を
ご覧ください。（クリックすると移動します）


＜文字の太さを変える＞
文字の太さを変えるには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
font-weight:★；
}

と、記述して下さい。
★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」
内の『文字の太さを変える』を
ご覧ください。（クリックすると移動します）


＜フォントの種類を変える＞
フォントの種類を変えるには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
font-family:"★"；
}

と、記述して下さい。
★につきましては、記事「ブログ(body要素)の背景・文字の設定を変える」
内の『フォントの種類変える』を
ご覧ください。（クリックすると移動します）


＜文字の色を変える＞
文字の大きさを変えるには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
color:★；
}

と、記述して下さい。
★につきましては、記事「色の設定について」をご覧ください。


＜文字を斜体に変える＞
文字の大きさを変えるには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
font-style:italic；
}

と、記述して下さい。


＜アーカイブ記事へのリンクにロールオーバーを適用する＞
ロールオーバとはマウスが乗った時に
変化をもたらすことです。
アーカイブ記事へのリンクにロールオーバーを適用するには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
}
の外部分に
previousLink a:link{text-decoration:none;color:メインの色;}
previousLink a:visited{text-decoration:none;color:メインの色;}
previousLink a:active{text-decoration:none;color:メインの色;}
previousLink a:hover{text-decorarion:none;color:ロールオーバーさせたい色;}
と書き加えます。
※a:hover内のtext-decoration:noneはロールオーバーの際の下線です。
初期設定ではunderline(下線)で設定されています。


＜アーカイブ記事へのリンクに背景色を入れる＞
アーカイブ記事へのリンクに背景色を入れるには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center;
background:★;
}

と、記述して下さい。
★につきまして、記事「色の設定について」を
ご覧下さい。


＜前の10件/前の記事の前の画像を変更する＞
前の10件/前の記事の前の画像(左向き▲二つ）を変更するには

.previousLink{
padding-left:12px;
background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; 
}

の赤字部分を削除し、アップロード済みのファイルを
選択しクリックするだけです。
すると
前の記事｜次の記事のようになります。

タグ：CSS ブログ カスタマイズ so-net