リンクに「画像による下線」を付けてみた

ブログ本文中のリンクテキスト部分に、画像による下線を付けてみたよ。

これまではデザイン的な面を考慮して「下線無し」でやってたんだけど、やっぱりリンク表示が判別しにくいなーと思ってたんだよね。

そんな中、「しらさかブログ」を読んでたら、リンクテキストに「鉛筆っぽい下線」が引いてある。

オレが欲しいのはこれだ！と思って、やり方をパクって見ました。パクってスイマセン！

上記ブログのソースを見たり、Googleさんに尋ねてみた結果、リンクに「鉛筆っぽい下線」を引くには、画像で下線を引けば「ソレっぽい」と言うことが分かりました。

まずは「鉛筆っぽい線の画像」を用意します。

とは言っても、さすがに画像までパクって来るのは罪の意識があったので、「ペイント」を使って自分で鉛筆っぽい下線画像を作ってみました。

ウマイやり方が分からなかったので、完全我流の作り方だけど、200×10のキャンパスを作って、フリーハンドで太めの横線を引いて、ソレを200×3に縮小して「鉛筆っぽい下線」を演出してみました。なんか一応ソレっぽくない？

出来た画像は「underline.gif」みたいな名前で保存して、サーバの見えるところにアップしてください。

作成した画像を使って、リンクテキストに下線を付与します。

ウチのブログでは下記のようなCSS定義を行いました。

.textBody a{
	background-image:url(https://www.hide10.com/images/underline.gif);
	background-position:bottom;
    background-repeat:repeat-x;
}

これでtextBody中のaタグに、underline.gif を使った任意長の下線が引かれます。やったね！

真似したかったら画像ファイルも持ってって良いので、ドンドン真似すると良いと思うよ！