リンクに「画像による下線」を付けてみた
ブログ本文中のリンクテキスト部分に、画像による下線を付けてみたよ。
これまではデザイン的な面を考慮して「下線無し」でやってたんだけど、やっぱりリンク表示が判別しにくいなーと思ってたんだよね。
そんな中、「しらさかブログ」を読んでたら、リンクテキストに「鉛筆っぽい下線」が引いてある。
オレが欲しいのはこれだ！と思って、やり方をパクって見ました。パクってスイマセン！
リンクに画像の下線を引く方法
上記ブログのソースを見たり、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 を使った任意長の下線が引かれます。やったね！
真似したかったら画像ファイルも持ってって良いので、ドンドン真似すると良いと思うよ！