Webサイト制作者のボヤッキー
元プログラマーという理由だけでWeb制作の仕事をする羽目になったトンズラーです。
独学で猛勉強中の素人Web制作者が一人前に育つ奮闘記！･･･になればいいなぁ（´・ω・｀）
PictBear加工講座はこちらでやってます。
フリー素材はこちらで提供してます。
ブログランキングに参加しています。人気blogランキング ブログランキング ranQ
独学で猛勉強中の素人Web制作者が一人前に育つ奮闘記！･･･になればいいなぁ（´・ω・｀）
PictBear加工講座はこちらでやってます。
フリー素材はこちらで提供してます。
ブログランキングに参加しています。人気blogランキング ブログランキング ranQ
 |
 |
Webサイト制作者のボヤッキー > HTML奮闘中 > ボタンのような動きをするリンク
ボタンのような引っ込む動作をするリンクがあります。（探してみてね！）
こうすることによって訪問者にリンク場所をより分かりやすく教えることができます。
また、リンクがこのような動作をすることで訪問者に対して
注意を引くことができクリックしてくれる確立が高くなります。
これは、多用するよりもポイントを絞ることでより注意を引く効果が高くなりますよ。
ここぞ！といった場面で使うのがおすすめです。
まずはサンプルを
サンプルに【私に喜びを与える。】シリーズばかり使用していると飽きてしまうので
今回は、私がお世話になっているレンタルサーバーのバナーを使用してみました。
【BEFORE】
まぁ、よく見る普通のリンクですね。
【AFTER】
おや？！これはなんだろう？
と、こんな感じになります。
では、カスタマイズ方法です。
スタイルシートを使っている人
を追加すれば、リンクすべてがこの効果になります。
【top】や【left】などの属性の数値を変更すれば、
移動する距離が変わってくるので自分の好みで調整してください。
ピンポイントでこの効果を使用したい人
のように【class】属性でクラス分けをして、
それぞれをHTMLファイルとスタイルシートに挿入してください。
難しいことは分からないけど、とにかく使いたい人
HTMLファイルの<head>〜</head>のどこかに上記を挿入してください。
これで、ランキングがちょっとだけ上がるかも？
★ランキングに参加しています。応援よろしくお願いします（*・ェ･*）ノ
- 2005/07/06|
- HTML奮闘中
- | トラックバック：0
- | コメント：7
コメント、アドバイス大歓迎です！
みなさんの一言でトンズラーを喜ばせたり、落ち込ませたりすることができます（笑）
（宣伝や誘導行為および中傷コメントは削除させていただく場合があります。）
なるほど
どうぞ。
みなさんの一言でトンズラーを喜ばせたり、落ち込ませたりすることができます（笑）
（宣伝や誘導行為および中傷コメントは削除させていただく場合があります。）
効果があると良いですね。
【私に喜びを与える。】シリーズを使うと
もっと効果があるという噂が･･･あるとかないとか（笑）
おおお〜
【私に喜びを与える。】シリーズを使うと
もっと効果があるという噂が･･･あるとかないとか（笑）
- 2005/07/06（水） 17:41:16 |
- URL |
- トンズラー（管理人） #-
- [ 編集]
トンズラー様、リンクの件ブログにて返信しておきました。ペコ
それはさておき、またまた私のツボに入るテクニック記事、感謝ですっ。参考にして今夜にでも早速カスタマイズしてみようと思います。ヽ(´ー｀)ノ
お礼の気持ちを込めて今回もランキングクリックして帰りますっ。では〜
yasuさんありがとうございます。
それはさておき、またまた私のツボに入るテクニック記事、感謝ですっ。参考にして今夜にでも早速カスタマイズしてみようと思います。ヽ(´ー｀)ノ
お礼の気持ちを込めて今回もランキングクリックして帰りますっ。では〜
ちょっとした小ネタですが【私に喜びを与える。】と併用すると効果絶大！
と、ドロンジョ様が言ったとか言わないとか（笑）
質問よいでしょうか
と、ドロンジョ様が言ったとか言わないとか（笑）
- 2005/07/06（水） 20:22:35 |
- URL |
- トンズラー（管理人） #-
- [ 編集]
おかげで、ランクングバナーは無事ボタン効果処理ができました。
しかし、お気に入りのほうなのですが画像の枠がにじんだ様になってしまいます。
こんな経験はないでしょうか。
※もう少しhtmlを確認してみようと思ってます。
解決しました
しかし、お気に入りのほうなのですが画像の枠がにじんだ様になってしまいます。
こんな経験はないでしょうか。
※もう少しhtmlを確認してみようと思ってます。
書き込んでスグに解決してしまいました。（泣
お気に入りバナー画像の場所指定の後ろにborder="0"を入れる事で解決しました。
こちらのサイトのソースを拝見したところ入っていないようなので、うちが変なのかもしれません。（汗
お騒がせしてしまい申し訳ございませんでした。
お気に入りバナー画像の場所指定の後ろにborder="0"を入れる事で解決しました。
こちらのサイトのソースを拝見したところ入っていないようなので、うちが変なのかもしれません。（汗
お騒がせしてしまい申し訳ございませんでした。
私の場合は画像にリンクの枠をつけるのが好きではないので、スタイルシートに
img {
border:0;
}
を入れています。
これでHTMLで指定しなくてもすべてのリンク画像に枠が入らなくなります。
img {
border:0;
}
を入れています。
これでHTMLで指定しなくてもすべてのリンク画像に枠が入らなくなります。
- 2005/07/07（木） 08:14:05 |
- URL |
- トンズラー（管理人） #-
- [ 編集]
【Webサイト制作者のボヤッキー】では記事の内容と繋がりのないもの
および宣伝や誘導を目的としたトラックバックは拒否させていただいています。
トンズラーの判断により削除させていただく場合がありますので、
上記事項に該当しないことを各自判断した上でトラックバックを行って下さい。
有意義なトラックバックは大歓迎です。
この記事へのトラックバックURLはこちら
および宣伝や誘導を目的としたトラックバックは拒否させていただいています。
トンズラーの判断により削除させていただく場合がありますので、
上記事項に該当しないことを各自判断した上でトラックバックを行って下さい。
有意義なトラックバックは大歓迎です。
この記事へのトラックバックURLはこちら
