記事ページのブログトップという文字の設定を変える

【記事ページのブログトップの設定を変える】
今回は、記事ページの記事タイトルの上と
トラックバックエリアの下にある
ブログトップ文字の設定の変更を説明します。

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

.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
}

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


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

.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:★；
white-space:nowrap;
}


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


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

.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
font-weight:★；
}

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


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

.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
font-family:"★"；
}

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


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

.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
color:★；
}

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


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

.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
font-style:italic；
}

と、記述して下さい。


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

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


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

.archive-links{
float:right;
padding-left:12px;
background:★;
font-size:x-small;
white-space:nowrap;
}

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


＜ブログトップの前の画像を変更する＞
前の10件/前の記事の前の画像(上向き▲二つ）を変更するには

.archive-links{
float:right;
padding-left:12px;
background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center;
font-size:x-small;
white-space:nowrap;
}

の赤字部分を削除し、アップロード済みのファイルを
選択しクリックするだけです。
すると

ブログトップ

右のようになります。
文字と画像が重なる時は
padding-left：★により
文字の位置をずらして下さい。

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