TOTAL YESTERDAY TODAY
名刺交換ブログトップ
2005年 09月 27日
タイトル: 記事内のリンク部分の装飾。
今回は、記事内のリンクの装飾をしてみたいと思います。まず、HTML編集画面の「本文」で<$postcont$>を探してください。

それをこのように編集してください。
<$postcont$>


次にCSSの編集に移ります。
下のようなのが無いスキンもあるみたいなのでもし無い場合は追加してください。

/*----------記事内のリンク----------*/
DIV.POST_BODY_SUB A:LINK
{
COLOR: #2A7E86;
TEXT-DECORATION : UNDERLINE;
}

/*----------記事内のリンクのアクセス済み----------*/
DIV.POST_BODY_SUB A:VISITED
{
COLOR: #2A7E86;
TEXT-DECORATION : UNDERLINE;
}

/*----------記事内のリンクをクリックした時----------*/
DIV.POST_BODY_SUB A:ACTIVE
{
COLOR: #2A7E86;
TEXT-DECORATION : UNDERLINE;
}

/*----------記事内のリンクをポイントした時----------*/
DIV.POST_BODY_SUB A:HOVER
{
COLOR: #8FC0BD;
TEXT-DECORATION : UNDERLINE;
}


今回した装飾は、
一度訪れたリンクの文字色を変更。
リンクの上にマウスポインタが来たら、文字の拡大、太字、文字色変更。
リンクの文字のアンダーラインを点線に変更。

変更後のソースは↓です。

/*----------記事内のリンク----------*/
DIV.POST_BODY_SUB A:LINK
{
COLOR: #2A7E86;
TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}

/*----------記事内のリンクのアクセス済み----------*/
DIV.POST_BODY_SUB A:VISITED
{
COLOR: #C875FF;
TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}

/*----------記事内のリンクをクリックした時----------*/
DIV.POST_BODY_SUB A:ACTIVE
{
COLOR: #2A7E86;
TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}

/*----------記事内のリンクをポイントした時----------*/
DIV.POST_BODY_SUB A:HOVER
{
COLOR: #F25B00;
FONT-SIZE : 11pt;
FONT-WEIGHT : BOLD;

TEXT-DECORATION : NONE;
BORDER-BOTTOM : 1PX DOTTED ;
}


青色が変更、桃色が追加になります。

するとこんな感じになります。>>クリック♪
[PR]
by butyo_1280 | 2005-09-27 15:37 | 記事関係
<< メモ帳、もう一ついかがですか? 無理矢理、アクセス解析設置。 >>


S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
        
Banner
チカさん作
↓画像提供↓
HEAVEN'S GARDENさん         
by butyo_1280