![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
そのボタン素材はボタンをクリックすると引っ込むようになっております。
サンプルでも押してみると引っ込んだ感じになっていました。
各いろいろなリンク先(TOP/MENU等)の文字の載ったものではなく自分で文字を入れるタイプをお借りしました
文字入れはペイントで出来るのですがその画像をソースに記述しても借りてきた状態のままで「クリックで引っ込む」にはなりませんよね・・・
そういう特殊なボタンにはコピペできるソースが用意されているのかな??とも思うのですがそこのサイト様にはありませんでした。
凄く親切丁寧な素材屋サンなので用意されていないと言う事は
画像の上で右クリックの保存方法で使用可能だと思うのですが
どのようにするとよいのでしょうか?
又お借りした文字無しのボタンですがつなげて長く使えるようにもなっています
文字をペイント等で入れて1つの画像とするのではなく
よくテンプレートにあらかじめリンクボタンが横に長く繋がっていて
HTMLで好きな文字を記載するとそのボタン1つ1つに文字が入るというのはCSSも一緒に記述し直さければできませんか?
バナー・ボタン作成方法の中に引っ込むボタンの解説をお気に入りに保存していたのですが見当たらなくて・・・・
宜しくお願い致します
No.2ベストアンサー
- 回答日時:
ANo.1です。
2つめ参考URLが全く違うものになっていました。申し訳ないです。
http://www.aboutworks.com/shokodei/diary/doc/over/
こちらも参考になると思います
http://www.dynamicdrive.com/style/csslibrary/ite …
>繋げたボタン~~~テンプレのソースを見てまねてみたりしてみますっ!
画像を指定したいタグに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
と関連しているのがやっとハッキリわかって嬉しいです!
なるべくHP作成講座みたいなサイトや他のテンプレのタグを引用して「これを記述するとこう変わるかな?」「あれ~~レイアウトくずれたーーー!」とか毎日少しずつ前進しています(笑)
只、テンプレのマネしてタグを記述してもcssの組み方によって(teble.box.frame等)全く違うようになるので難しいけれど奥が深いですね
必死で成功しても出来たハジから忘れて次に同じことしようとしても又調べ直したりwwww(TT▽TT)
でも頑張ります
又どうしても行き詰ったらここを頼ってきます(笑)
最後までお世話をお掛けしました
有難うございました~~~
No.1
- 回答日時:
こんにちは。
>そのボタン素材はボタンをクリックすると引っ込むようになっております。
これはボタンが引っ込むのではなく、
引っ込むように見せているだけですね。
二つの画像を使ってマウスオーバー時に画像を切り替えたり、
背景画像をずらしたりでできます。
この辺を参考
http://www.tagindex.com/javascript/link/change3. …
http://oshiete1.goo.ne.jp/qa3941582.html
>又お借りした文字無しのボタンですがつなげて~~
CSSも一緒に記述し直さければできませんか?
たぶんCSSを記述しないとできないと思います。
CSSでタグにあらかじめ背景画像を指定しておく
必要あります。
有難うございます
先程まで何とか挑戦していましたが判らなくてONマウスで色が変わるのをやってみてましたwww
只画像は1つのスペースでは文字が入らない為2つ繋げて更に端に丸みを付ける画像を使用し、4つの画像で1つのボタンの色違いを2つ作成したのですが・・・・・
画像処理のスキルが追いつかず(汗)2つの画像を同サイズで余白無しに綺麗に切り取る事が出来ない為(ペイントとJTrimなもので)
ブラウザで見ると微妙なズレが気に入らず
恐らく画像を重ねる所は同じ原理でタグが違うのでしょうから
結果は不出来なものになりそうです(ヘ;_ _)ヘ・
参考サイトも活用して画像処理に苦戦しながらくじけないで挑戦します!(笑)
繋げたボタン~~~
の方ですがCSSにあらかじめ画像を指定し「vulue="***"」等をHTMLに記述するのでしょうか?
それともCSSに指定するだけで文字は書き込めますか?
背景画像の上に自由に文字を入れられるのと同じ原理ということですかねぇ・・・・
参考になるテンプレのソースを見てまねてみたりしてみますっ!
苦戦した後に出来ると嬉しくてスキルも無いのに欲張ってしまいます(笑)
取るに足らない質問に即答感謝致します
有難うございましたっ!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Excel2007でOfficeボタンがない
-
Excel用ボタン天国200・アンイ...
-
印刷ボタンを作成して簡単に印...
-
auのW63CAをお使いの方に質問...
-
Wordの文字削除ができない
-
【テプラの使い方で】複数行の...
-
texでアクセント記号
-
エクセルのグラフ データテー...
-
テプラで2行目の文字を大きく...
-
ホームページビルダー22でリン...
-
ワード ヘッダ下部とフッタ上...
-
macとwinで色の見え方が違う、...
-
ホームページビルダー リンク...
-
ホームページに使うテンプレー...
-
EXCELのコンボボックス 配置の...
-
ホームページビルダー プレビ...
-
ハイパーリンクの設定ができない
-
wordのもじの大きさ
-
ホームページの画像が重なる場...
-
HPビルダー7で左右に余白を空...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Wordで目次へ戻る方法
-
エクセル 行
-
VBAのFaceIdでメニューボタンに...
-
BenQのRL2450Hというモニターの...
-
Excel2007でOfficeボタンがない
-
Word のヘッダーフッターに,定...
-
Excelの グラフウィザードにあ...
-
PIXUS iP2700 Macでの長形封筒...
-
Wordの文字削除ができない
-
【テプラの使い方で】複数行の...
-
エクセルのグラフ データテー...
-
ワード ヘッダ下部とフッタ上...
-
WinMergeの色設定
-
PhotoShopで任意の色数に減色し...
-
テプラで2行目の文字を大きく...
-
EXCELのコンボボックス 配置の...
-
macとwinで色の見え方が違う、...
-
Excel 行列番号のハイライト色...
-
Becky! で2行目以降に色がつく...
-
Excelのヘッダー表示を変数で指...
おすすめ情報