スポンサーサイト

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

[ --/-- ] スポンサー広告 | トラックバック(-) | コメント(-)

Q.カレンダーを色々変更(文字とか背景画像)したいんだけど…[3]

A.
文字の色や全体の背景を変えるのは簡単にできます。
記事を書いた日だけの文字色を変えるのも簡単にできるますが、その部分の背景を変えるのは簡単画像サイズとの関係で、調整が個別対応になるため説明は省略します。
スタイルシートを変更するとできます。
以下、変更方法


1.
記事を書いていない日付の数字・曜日・月を前後(≪前の月など)の、文字色・文字サイズを変えるには、
スタイルシートの336~346行目付近に
.calendar
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-SIZE: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 20px;
COLOR: #333333;
LINE-HEIGHT: 150%;
PADDING-TOP: 0px
}

と、いうのがあるので、その中の、FONT-SIZE: 10px;(=文字サイズ)とCOLOR: #333333;(=文字色)を変更します。

実際に文字サイズを少し大きく、文字色を灰色にするには、
..calendar
{
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-SIZE: 11px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 20px;
COLOR: #808080;
LINE-HEIGHT: 150%;
PADDING-TOP: 0px;
}

このように変更します。

2.
記事を書いた日付の数字の、文字色・文字サイズを変えるには、
スタイルシートの347~378行目付近に
.calendar A
{
FONT-SIZE: 10px;
COLOR: #333;
TEXT-DECORATION: underline
}
.calendar A:link
{
FONT-SIZE: 10px;
COLOR: #f99;
TEXT-DECORATION: underline
}
.calendar A:visited
{
FONT-SIZE: 10px;
COLOR: #f99;
TEXT-DECORATION: underline
}
.calendar A:active
{
FONT-SIZE: 10px;
COLOR: #333;
BACKGROUND-COLOR: #f99;
TEXT-DECORATION: underline
}
.calendar A:hover
{
FONT-SIZE: 10px;
COLOR: #333;
BACKGROUND-COLOR: #f99;
TEXT-DECORATION: underline
}

と、いうのがあるので、その中の、FONT-SIZE: 10px;(=文字サイズ)とCOLOR: #333;(=文字色)を変更します。

ただし、リンクの色は、
a /*リンクされた文字*/
a:link 未訪問のリンク
a:visited 訪問済みのリンク
a:activ クリック中のリンク
a:hover マウスをのせた時のリンク
と、分けることができます。
ヤプログのフリースキンもそれぞれ指定されているようにできているので指定します

実際に文字サイズを少し大きく、未訪問と訪問済みの文字色を灰色、クリック中とマウスをのせた時の文字色をピンク、背景色は無しにするには、
.calendar A
{
FONT-SIZE: 11px;
COLOR: #808080;

TEXT-DECORATION: underline
}
.calendar A:link
{

FONT-SIZE: 11px;
COLOR: #808080;
TEXT-DECORATION: underline
}
.calendar A:visited
{
FONT-SIZE: 11px;
COLOR: #808080;

TEXT-DECORATION: underline
}
.calendar A:active
{
FONT-SIZE: 11px;
COLOR: #f99;

TEXT-DECORATION: underline
}
.calendar A:hover
{
FONT-SIZE: 11px;
COLOR: #f99;

TEXT-DECORATION: underline
}

このように変更します。
スポンサーサイト
[ 05/19 ] [サイドバー]3カラムpink | トラックバック(-) | コメント(-)

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