テキストリンクの背景色を角丸にする方法を教えてください。

Question

hate_na_com

15

15もっと見る

80pt

インターネットウェブ制作

テキストリンクの背景色を角丸にする方法を教えてください。

回答の条件

1人2回まで

登録：2008/01/31 11:47:46
終了：2008/02/07 11:50:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

hate_na_com 2008/02/07 11:54:17

自然に終わってしまいました。ごめんなさい。
皆様ありがとうございました。

人力検索はてなテキストリンクの背景色を角丸にする方法を.. 2008-01-31 16:04:40

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

killingofthedead · Answer 1 · 2008-01-31T12:15:55+09:00

角丸は画像じゃないとダメだと思います。

画像を使った場合は次の通りです。

<script style="text/javascript">
<!--
bgimages = new Array();
function swapAncBGImage(obj, path) {
	if (bgimages[path] == null) {
		bgimages[path] = new Image();
		bgimages[path].src = path;
	}
	
	if (path == null) {
		obj.style.backgroundImage = "none";
	}
	else {
		obj.style.height = bgimages[path].height;
		obj.style.width = bgimages[path].width;
		obj.style.backgroundImage = "url(" + path + ")";
	}
}
//-->
</script>
<a href="リンク先" onmouseover="swapAncBGImage(this, '画像ファイルパス')" onmouseout="swapAncBGImage(this)">リンク</a>

tawazou · Answer 2 · 2008-01-31T15:58:08+09:00

Nifty Corners初めて知りました。

勉強がてら作成してみました。

CSSのみで実現

<html>
<head>
<style type="text/css">
a#nifty {
	text-align: center;
	width: 80px;
	background: lightblue;
}
b.rtop, b.rbottom {
	display:block;
	background: white;
}
b.rtop b, b.rbottom b {
	display:block;
	height: 1px;
	overflow: hidden;
	background: lightblue;
}
b.r1 {
	margin: 0 5px;
}
b.r2 {
	margin: 0 3px;
}
b.r3 {
	margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4 {
	margin: 0 1px;
	height: 2px;
}
</style>
</head>
<body>
<a href="http://q.hatena.ne.jp/1201747665" id="nifty">
	<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
	リンク
	<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</a>
</body>
</html>

nifty.js, niftyCorners.cssを利用

※Nifty Cornersよりダウンロードして下さい。

<html>
<head>
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload = function() {
	if (!NiftyCheck()) return;
	Rounded("a#nifty", "white", "lightblue");
}
</script>
<style type="text/css">
a#nifty {
	text-align: center;
	width: 80px;
	background: lightblue;
}
</style>
</head>
<body>
<a id="nifty" href="http://q.hatena.ne.jp/1201747665">リンク</a>
</body>
</html>

dungeon-master · Answer 3 · 2008-02-01T19:52:03+09:00

ちょっと実験。

「マウスポインタを乗せると色が変わる角丸背景」です。

画像やJavascriptは使わずに、cssで実装しています。

・回答2の例では必要だったWidthの指定が不要。

・文字サイズを変更しても一応は角丸。

・リンクが複数行にわたった場合も、前と後に角丸。

WindowsXPのIE6SP2で確認したところでは、うまく表示できています。

ブラウザの種類、バージョンによってはだめかもしれません。

<html>
<head>
<style type="text/css">

a#rrlink:link { background-color:#ff8888; text-decoration:none; } 
a#rrlink:visited { background-color:#ff8888; text-decoration:none; } 
a#rrlink:hover { background-color:#ffff88; text-decoration:none; }
/* hoverの設定は最後link,visitedより後 */

/* 幅1pxの重ね合わせ要素 */
b.f {
	width:1px;
	display:inline;
}

b.j {
	width:1px;
	display:block;
}

b.k {
	width:1px;
	display:block;
	margin-top:-1em;
}

/* 角パーツ */
b.g4 {
	vertical-align:bottom;
	height:4px;
	width:1px;
	overflow:hidden;
}
b.e4 {
	vertical-align:top;
	height:4px;
	width:1px;
	overflow:hidden;
}
b.g2 {
	vertical-align:bottom;
	height:2px;
	width:1px;
	overflow:hidden;
}
b.e2 {
	vertical-align:top;
	height:2px;
	width:1px;
	overflow:hidden;
}
b.g1 {
	vertical-align:bottom;
	height:1px;
	width:2px;
	overflow:hidden;
}
b.e1 {
	vertical-align:top;
	height:1px;
	width:2px;
	overflow:hidden;
}

b.k b ,b.j b {
	background:white;	/* 角パーツ色は、ここで調整 */
}

</style>

</head>
<body>

<font size=5>こちらの<a href="http://q.hatena.ne.jp/1201747665" id="rrlink"
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
>リンクに設定された角丸背景<b
    class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
></a>は、<BR>
マウスポインタを乗せると色が変わります。
</font>
<BR>
<font size=3>こちらの<a href="http://q.hatena.ne.jp/1201747665" id="rrlink"
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
>リンクに設定された角丸背景<b
    class="f"><b class="j"><b class="e1"></b></b><b class="k"><b class="g1"></b></b></b
><b class="f"><b class="j"><b class="e2"></b></b><b class="k"><b class="g2"></b></b></b
><b class="f"><b class="j"><b class="e4"></b></b><b class="k"><b class="g4"></b></b></b
></a>は、<BR>
マウスポインタを乗せると色が変わります。
</font>

</body>
</html>

テキストリンクの背景色を角丸にする方法を教えてください。

回答（3件）

killingofthedead1842008/01/31 12:15:55

tawazou3372008/01/31 15:58:08

dungeon-master571402008/02/01 19:52:03

コメント（1件)

この質問への反応（ブックマークコメント）

トラックバック