ニックネーム:   パスワード:
| MyDoblogトップ | Doblogポータル | DoblogMusic | Doblogガイド | ユーザ登録 | 使い方 | よくある質問 | ツールバー | サポート |
Onefineday
Blog
[ 総Blog数:894件 ] [ このMyDoblogをブックマークする ] [ RSS0.91   RSS1.0   RSS2.0 ] [ ATOM ]
2006/06/22のBlog
記事タイトルのリンク色を指定する方法は既にご紹介されているブログさんがあるようなので
今回はその記事タイトルの行頭にアイコンを置き、カーソルを乗せたときにそのアイコンも変化する・・・の方法をご紹介します。 ( あ、ウチの↑はカーソル乗せても何も変わりませんよ?・笑 )
まず、画像を2枚用意します。
できれば2枚とも同じ大きさのものがキレイかもしれませんね。
コレは通常の状態のアイコンとして使用します。
そんでもってコッチはカーソルを乗せたとき用の画像。
変化がわかるように同じ画像を使ってアニメーションにしてみましたが
ココで使う画像によって いろんな楽しみ方ができると思います。
ではこの二つの画像を使って、記事タイトルの行頭にアイコンを置いてみましょう。
以下をホントはどこでもいいのですが、わかりやすいように 「 .blog-title-title 」 のすぐ下にでも入れてみてください。

/* ----------------- ここから -----------------*/

.blog-title-title a:link {
color : #666666 ;
/* 記事タイトルのリンク色はココで指定 */
text-decoration: none; /* 下線を消したくないときはこの部分を削除 */
padding-left : 30px ; /* ←が通常アイコンと文字行頭とのスペースです */
padding-bottom : 3px ;
/* アイコンが切れちゃうときは↑ココにスペースを入れて調整します */
background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_2E.gif") ;
/* ↑が通常アイコンのURLです */
background-repeat : no-repeat ;
}


.blog-title-title a:visited {
 color : #666666 ; /* 記事タイトルのリンク色はココで指定 */
 text-decoration: none; /* 下線を消したくないときはこの部分を削除 */
 padding-left : 30px ; /* ←が通常アイコンと文字行頭とのスペースです */
 padding-bottom : 3px ;
/* アイコンが切れちゃうときは↑ココにスペースを入れて調整します */
 background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_2E.gif") ;
/* ↑が通常アイコンのURLです */
 background-repeat : no-repeat ;
}


.blog-title-title a:active {
 color : #666666 ; /* 記事タイトルのリンク色はココで指定 */
 text-decoration: none; /* 下線を消したくないときはこの部分を削除 */
 padding-left : 30px ; /* ←が通常アイコンと文字行頭とのスペースです */
 padding-bottom : 3px ;
/* アイコンが切れちゃうときは↑ココにスペースを入れて調整します */
 background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_2E.gif") ;
/* ↑が通常アイコンのURLです */
 background-repeat : no-repeat ;
}


.blog-title-title a:hover {
 color : #000000 ; /* 記事タイトルのリンク色はココで指定 */
 text-decoration: none; /* 下線を消したくないときはこの部分を削除 */
 padding-left : 30px ; /* ←が通常アイコンと文字行頭とのスペースです */
 padding-bottom : 3px ;
/* アイコンが切れちゃうときは↑ココにスペースを入れて調整します */
 background-image : url("http://img.doblog.com/72000/u71664/1000/FI3_3E.gif") ;
/* ↑がカーソルを乗せたときに表示されるアイコンのURLです */
 background-repeat : no-repeat ;
}


/* ----------------- ここまで -----------------*/


すると・・・ホラ♪ と、できれば完成したときの画像を用意したかったのですが
そこまで作る元気は残ってませんでした。(笑)
プレビューするだけなら実際には反映されませんので
ぜひご自身のブログでお試しくださいネ♪
(あ、そうそう。ウチのポータルバーの部分みたいな感じにアイコンが変わります)

次回はこの方法を実際に使ったテンプレートをご紹介・・・する「予定」です。