ヤプログ・サイドバーの文字とリンク文字の大きさ&色を変える 長靴猫...★ 旧オロルンのヤプログ講座





↓--------

スポンサーサイト

 スポンサー広告



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


↓2005-12-13

ヤプログ・サイドバーの文字とリンク文字の大きさ&色を変える

 ヤプログ講座



サイドバーの本文の文字やリンクの色をかえたり、文字の大きさを変えます。

スタイルシートをいじります
いまからカスタマイズに入るので、バックアップを取って、メモ帳に移した状態にしてください
参考→カスタマイズの基礎

★文字色

スタイルシートの真ん中よりちょっと上あたりにある

.side_text
{
width:100%;
PADDING-RIGHT: 10px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
PADDING-BOTTOM: 3px;
OVERFLOW: hidden;
COLOR: #???;
WORD-BREAK: break-all;
LINE-HEIGHT: 150%;
PADDING-TOP: 5px
}


で変更します。
緑色の10pxの数字を変えることで文字の大きさを、紫色の#???を好きなカラーコード・カラーネームに変えることで文字の色を変更できます

例:
.side_text
{
width:100%;
PADDING-RIGHT: 10px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
PADDING-BOTTOM: 3px;
OVERFLOW: hidden;
COLOR: red;
WORD-BREAK: break-all;
LINE-HEIGHT: 150%;
PADDING-TOP: 5px
}

★未訪問のリンク色

スタイルシートの真ん中よりちょっと上あたりにある

.side_text A:link
{
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #???;
LINE-HEIGHT: 150%;
TEXT-DECORATION: none
}


で変更します。
緑色の10pxの数字を変えることで文字の大きさを、紫色の#???を好きなカラーコード・カラーネームに変えることで文字の色を変更できます

★訪問済みのリンク色

スタイルシートの真ん中よりちょっと上あたりにある

.side_text A:visited
{
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #???;
LINE-HEIGHT: 150%;
TEXT-DECORATION: none
}

で変更します。
緑色の10pxの数字を変えることで文字の大きさを、紫色の#???を好きなカラーコード・カラーネームに変えることで文字の色を変更できます

★クリックした時のリンク色

スタイルシートの真ん中よりちょっと上あたりにある

.side_text A:hover
{
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #???;
LINE-HEIGHT: 150%;
TEXT-DECORATION: underline
}

で変更します。
緑色の10pxの数字を変えることで文字の大きさを、紫色の#???を好きなカラーコード・カラーネームに変えることで文字の色を変更できます
また、青色のunderlineをnoneに変えることで文字の下線をなくせます。

★触れた時のリンク色

スタイルシートの真ん中よりちょっと上あたりにある

.side_text A:active
{
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #???;
LINE-HEIGHT: 150%
}

で変更します。
緑色の10pxの数字を変えることで文字の大きさを、紫色の#???を好きなカラーコード・カラーネームに変えることで文字の色を変更できます



講座の目次


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。