人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: hate_na_com
●カテゴリ:インターネット ウェブ制作
✍キーワード:テキスト リンク 背景色 角丸
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● killingofthedead
●27ポイント

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

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

<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>
◎質問者からの返答

ありがとうございます!

下のリンク先のページで「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」とあるのですが、そのようなイメージで、テキストリンクの背景を角丸にするのはやはり難しいでしょうか。

http://phpspot.org/blog/archives/2006/03/javascripthtml.html


2 ● tawazou
●27ポイント

Nifty Corners初めて知りました。

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


<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 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>
◎質問者からの返答

勉強になります。ありがとうございます。


3 ● dungeon-master
●26ポイント

ちょっと実験。

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

画像や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>
◎質問者からの返答

凄い!ありがとうございます!

2番の方の回答もそうでしたが、実は Mac の Safari だと表示がズレてしまいます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ