素材配布サイトからお借りしているリンクボタンについて

質問

そのボタン素材はボタンをクリックすると引っ込むようになっております。
サンプルでも押してみると引っ込んだ感じになっていました。
各いろいろなリンク先（TOP/MENU等）の文字の載ったものではなく自分で文字を入れるタイプをお借りしました
文字入れはペイントで出来るのですがその画像をソースに記述しても借りてきた状態のままで「クリックで引っ込む」にはなりませんよね・・・
そういう特殊なボタンにはコピペできるソースが用意されているのかな？？とも思うのですがそこのサイト様にはありませんでした。
凄く親切丁寧な素材屋サンなので用意されていないと言う事は
画像の上で右クリックの保存方法で使用可能だと思うのですが
どのようにするとよいのでしょうか？

又お借りした文字無しのボタンですがつなげて長く使えるようにもなっています
文字をペイント等で入れて１つの画像とするのではなく
よくテンプレートにあらかじめリンクボタンが横に長く繋がっていて
ＨＴＭＬで好きな文字を記載するとそのボタン１つ１つに文字が入るというのはＣＳＳも一緒に記述し直さければできませんか？

バナー・ボタン作成方法の中に引っ込むボタンの解説をお気に入りに保存していたのですが見当たらなくて・・・・
宜しくお願い致します

回答No.2

hetare560 · ベストアンサー

ANo.1です。

2つめ参考URLが全く違うものになっていました。申し訳ないです。
http://www.aboutworks.com/shokodei/diary/doc/over/

こちらも参考になると思います
http://www.dynamicdrive.com/style/csslibrary/item/css_indent_menu/

>繋げたボタン～～～テンプレのソースを見てまねてみたりしてみますっ！
画像を指定したいタグにbackgroundで任意の画像を指定し、repeat-xで繰り返せば
どんなに長い文字を入れても文字数に応じて画像も繰り返されます。

指定方法としては「h3」や「p」など決まったタグに全てに指定する方法や
id・classを使ってある特定の場所のタグにのみ適用する方法があります。

前者だとcssに

h3 {
　background:url(画像指定) repeat-x 位置指定
}

後者だと

#sample h3 {
　background:url(画像指定) repeat-x 位置指定
}

とcssに記述します。

お礼

御丁寧に有難うございます
URL・・・チョット不思議だったのですがやっぱり違っていたのですね
＞repeat-x
この意味が実は良く理解できずわからなかったのですが勉強になりました！

＞どんなに長い文字を入れても文字数に応じて画像も繰り返されます。
そうです！そうです！画像が文字数に合わせて伸縮するのがrepeat-x
と関連しているのがやっとハッキリわかって嬉しいです！

なるべくＨＰ作成講座みたいなサイトや他のテンプレのタグを引用して「これを記述するとこう変わるかな？」「あれ～～レイアウトくずれたーーー！」とか毎日少しずつ前進しています（笑）

只、テンプレのマネしてタグを記述してもcssの組み方によって（teble.box.frame等）全く違うようになるので難しいけれど奥が深いですね

必死で成功しても出来たハジから忘れて次に同じことしようとしても又調べ直したりｗｗｗｗ(ＴＴ▽ＴＴ）

でも頑張ります

又どうしても行き詰ったらここを頼ってきます（笑）
最後までお世話をお掛けしました
有難うございました～～～

回答No.1

hetare560

こんにちは。

＞そのボタン素材はボタンをクリックすると引っ込むようになっております。
これはボタンが引っ込むのではなく、
引っ込むように見せているだけですね。

二つの画像を使ってマウスオーバー時に画像を切り替えたり、
背景画像をずらしたりでできます。

この辺を参考
http://www.tagindex.com/javascript/link/change3.html
http://oshiete1.goo.ne.jp/qa3941582.html

＞又お借りした文字無しのボタンですがつなげて～～
ＣＳＳも一緒に記述し直さければできませんか？

たぶんCSSを記述しないとできないと思います。

CSSでタグにあらかじめ背景画像を指定しておく
必要あります。

お礼

有難うございます
先程まで何とか挑戦していましたが判らなくてＯＮマウスで色が変わるのをやってみてましたｗｗｗ
只画像は１つのスペースでは文字が入らない為２つ繋げて更に端に丸みを付ける画像を使用し、４つの画像で１つのボタンの色違いを２つ作成したのですが・・・・・
画像処理のスキルが追いつかず（汗）２つの画像を同サイズで余白無しに綺麗に切り取る事が出来ない為（ペイントとJTrimなもので）
ブラウザで見ると微妙なズレが気に入らず
恐らく画像を重ねる所は同じ原理でタグが違うのでしょうから
結果は不出来なものになりそうです(ヘ；＿ ＿)ヘ・

参考サイトも活用して画像処理に苦戦しながらくじけないで挑戦します！（笑）

繋げたボタン～～～
の方ですがCSSにあらかじめ画像を指定し「vulue="***"」等をＨＴＭＬに記述するのでしょうか？
それともCSSに指定するだけで文字は書き込めますか？
背景画像の上に自由に文字を入れられるのと同じ原理ということですかねぇ・・・・
参考になるテンプレのソースを見てまねてみたりしてみますっ！

苦戦した後に出来ると嬉しくてスキルも無いのに欲張ってしまいます（笑）
取るに足らない質問に即答感謝致します
有難うございましたっ！！