Blog
2006/06/22のBlog
[ 04:21 ]
[ Make up Doblog ]
記事タイトルのリンク色を指定する方法は既にご紹介されているブログさんがあるようなので
今回はその記事タイトルの行頭にアイコンを置き、カーソルを乗せたときにそのアイコンも変化する・・・の方法をご紹介します。 ( あ、ウチの↑はカーソル乗せても何も変わりませんよ?・笑 )
今回はその記事タイトルの行頭にアイコンを置き、カーソルを乗せたときにそのアイコンも変化する・・・の方法をご紹介します。 ( あ、ウチの↑はカーソル乗せても何も変わりませんよ?・笑 )
ではこの二つの画像を使って、記事タイトルの行頭にアイコンを置いてみましょう。
以下をホントはどこでもいいのですが、わかりやすいように 「 .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 ;
}
/* ----------------- ここまで -----------------*/
すると・・・ホラ♪ と、できれば完成したときの画像を用意したかったのですが
そこまで作る元気は残ってませんでした。(笑)
プレビューするだけなら実際には反映されませんので
ぜひご自身のブログでお試しくださいネ♪
(あ、そうそう。ウチのポータルバーの部分みたいな感じにアイコンが変わります)
次回はこの方法を実際に使ったテンプレートをご紹介・・・する「予定」です。
以下をホントはどこでもいいのですが、わかりやすいように 「 .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 ;
}
/* ----------------- ここまで -----------------*/
すると・・・ホラ♪ と、できれば完成したときの画像を用意したかったのですが
そこまで作る元気は残ってませんでした。(笑)
プレビューするだけなら実際には反映されませんので
ぜひご自身のブログでお試しくださいネ♪
(あ、そうそう。ウチのポータルバーの部分みたいな感じにアイコンが変わります)
次回はこの方法を実際に使ったテンプレートをご紹介・・・する「予定」です。