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
メモ帳
管理人にメールする
スキン編集用MENU
リクエストコーナー。
エキサイトブログの自作スキンを配布します。
ポチっと♪
blog Rankingにご協力してくださる方はポチッとよろしくお願いします
カテゴリ
全体
記事関係
コメント関係
メニュー関係
画像関係
カレンダー関係
スキン配布
その他
雑談
以前の記事
2006年 08月
2006年 07月
2006年 06月
2006年 05月
2006年 03月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
最新のトラックバック
テンプレカスタ
from Vitamin[N]
CSS&HTML / T..
from 日刊エキブロ新聞
スキン変更
from YOJIGERUGE
エキサイトブログメンテナ..
from yozoの気が向いたと記
やったぁ☆
from ♪as usual♪
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
        
Banner
チカさん作
↓画像提供↓
HEAVEN'S GARDENさん         
by butyo_1280