ホーム > フォーラム > 開発 > デザイン開発 > リンクボタンもどき

リンクボタンもどき
投稿者: mekao | 投稿日時: 2006/12/14 12:16 | 閲覧: 13211回
mekao
メインメニューみたいにテキストが書き換えられるボタンがほしくてこんなんしてみました。
ブロック要素なので配置場所に自由度が少ないのですが。。。


GIF背景とテキスト文字を重ねてボタンもどき作ってみました。

1、空ボタンイメージを以下の場所に
テーマ/images/btn.gif


2、テーマCSSに以下のような記述を。。。
ボタンイメージによって大きさや余白は調整ください
/* ボタン表示の設定 */
td#btn a {
width: 114px;
height: 24px;
font-size:13px;
color: #CCCCCC;
display: block;
margin: 0;
background-image: url(images/btn.gif);
background-repeat: no-repeat;
background-position: left top;
padding: 1px;
text-indent: 25px;
text-decoration: none;
}
td#btn a:hover { color: #ffCCCC; }

3、本文中に以下のようにタグを書くとボタンのように見えます


WIKIにサンプル載せました
http://xoops.sourceforge.jp/wiki/xoops2/index.php?TECH%2F%A5%EA%A5%F3%A5%AF%A5%DC%A5%BF%A5%F3%A4%E2%A4%C9%A4%AD

コメント(7)

新しいものから | 古いものから | ネスト表示 | RSS feed
Re: リンクボタンもどき 
投稿者: chatnoir | 投稿日時: 2006/12/14 15:54
chatnoir
mekao さん、こんちわ。

画像を背景に突っ込んで上がテキストだと都度ボタンを作り変えなくていいので便利ですよね♪
# ちなみに2.1の管理画面ではフォームボタンがこのようなつくりになってます。

で、そういう特定の位置にではなくてリンクボタンということでしたらわざわざ DIV で囲ってさらにそこに TABLE 突っ込んで。。。というのはきっと面倒だと思うので。。。(なんか意味不明になっちゃいそーですし。笑)
・・・でしたら a(アンカー)でやっちゃうなんていうのはどうかしら?

参考
1.CSS
a.btn {
	background: url(bt1.gif) repeat-x;
	font-size: 12px;
	text-decoration: none;
	width: 114px;
	height: 15px;
	margin: 2px 0;
	padding: 2px;
	border: solid 1px #666666;
	display: block;
}
a.btn:hover {
	color: #ff0000;
	background: url(bt2.gif) repeat-x;
}


2.HTML
<a href="" class="btn">ABC</a>
<a href="" class="btn">XYZ</a>


3.SAMPLE
http://petitoops.com/modules/docs/index.php?id=13
Re: リンクボタンもどき 
Re: リンクボタンもどき 
投稿者: chatnoir | 投稿日時: 2006/12/14 17:13
chatnoir
小技の知恵の足しにでもなれば幸いです。
拡張してみてくださいね。
# あえてWikiるほどのネタでもないのでご参考までということで。笑
Re: リンクボタンもどき 
投稿者: mekao | 投稿日時: 2006/12/14 21:53
mekao
実験してみたのですがインライン要素にはなっていないみたいです。
前後に改行が入ります。。。
うまく出きるといいのですが。
Re: リンクボタンもどき 
投稿者: chatnoir | 投稿日時: 2006/12/14 21:57
chatnoir
引用:

mekaoさんは書きました:
前後に改行が入ります。。。

ん?
はい。最初にmekaoさんが書いているのもdisplay:blockしてましたし
これもブロック要素ですからねー。

追記:
もしかして、横にいっぱい並べたいのかしら?
Re: リンクボタンもどき 
投稿者: mekao | 投稿日時: 2006/12/14 22:52
mekao
ありがとうございます。
なるほど。
引用:
display:block

がブロック要素なんですね。

多分これはずすと文字の上しかリンクにならなくなりますよね。
横に並べるときはテーブルに入れます。
イメージとしては、「お問い合わせ」と「申込み」とか。。。

いろいろありがとうございました。
Re: リンクボタンもどき 
投稿者: Marijuana | 投稿日時: 2006/12/14 23:15
Marijuana
引用:
がブロック要素なんですね。

最初からブロック指定してたじゃん。解ってなかったの?
最初のはどっかからのコピペ?

引用:
横に並べるときはテーブルに入れます。

ブロック要素を横に並べたいからテーブルって・・・(確かに手軽だけど)

float: left;とかとかdisplay: block;辞めるとかやり方は色々chatnoirさんも最初のcssに合わせただけかと#XOOPS以前に少しはhtmlとcssの勉強した方がいいですよ

    投票(0)

    新しいものから | 古いものから | RSS feed
     
    To Top