アマゾンの広告で年間数千円ほどもらえるのですが、それでも本代が助かっています。orz
私自身もこれ欲しいと思うものをメモ的に使っております。
人生は買物でございます。 リンクをクリックしてもらうのに説明が入るというのはとてもいいと思うんですよ。
アマゾンの広告はご存知 iframeですが、iframeにhover したときに上に何かノッチス入れたりはできませんね。 意外に人気のCSSの初心者向け記事も参考にしてください。
たためる
ベットが欲しいの
ベットが欲しいの
放射能が
測定できる！
測定できる！
絶対ポジションで入れる方法はここにもありますがこのくらいしかできませんなぁ。 残念だ。 無理やり上にのせた透明画像にリンクをはり、それに下に紹介するjavascriptで書いてもいいけど…。ちょっと手間ですわ。
.left{float:left;margin-right:5px;position: relative;}
.left:hover{border:2px solid #FF0000;}
.osusume{width:120px;height:100px;position:absolute; top:-15px; left:20px; background:url(http://saiki.heteml.jp/osusume.png);
background-repeat:no-repeat;background-position:top center;text-align:center;font-weight:bold;padding-top:3px;}
上の広告の入れ方は
<div class="left">
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=yumisiki-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B0012ON6S6" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><div class="osusume">
たためる
ベットが欲しいの</div>
</div>
となります。
最初にposition: relative;で囲んで、中に入れ子でposition:absolute;top:-15px;left:20px;がミソです。
topをマイナスにすることでアマゾンの広告より上に配置することができます。
これを応用して、例えば写真の上にコメントを載せて使用前とか使用後とか説明を入れて統一感を見せるようにすることもできると思います。
リンクでtitle要素をカッコよく見せるのは nice titleというのが有名ですね。
ただ、これだと全部が強調されてしまうのですな～。
ちなみにブロガーじゃ動きませんでした。外部のjsだからかもしれませんが。
ここに紹介されているマウスオーバーでノティスを見せるjava scriptも、絶対ポジション position:absolute; をrelativeで囲むことでより自由度が高く実現することができると思います。
↑これ結構優秀ですよ。ホバーで画像を表示させてより詳しい内容とかも見せることができるので…。まずホームページに来てもらって、リンクをクリックしてもらうのに苦労するわけで、こういう工夫はいいですね。記事の中にJavaScriptを書きます
こっちの記事でもできるけどCSS工夫したら同じことになると思う後からまたやる。
上記のようなことシンプルなjqueryだとこれを見るとclassで設定したらできそうですね。ふむふむ。 またやってみましょう。 nice titleを加工もこれでできるな。
ホバープラグインもあります。今いち解説がわからん。
画像マウスオーバーでキャプションが見れるとか…。カッコはいいがあまり使わないよね。
しつこく研究が続く。
ブログシステム内でお客さんが簡単に編集できるようにすることを考えているものですから、ついつい…。
偶然見つけたアニメするテキストリンクhover 小技でかわいいけど、そこまでせんでもという気持ちも…
結構ランダムに写真を載せているページに統一感持たせるためにこれもいいかもしれん。
このサイトすごいわ。よ～ここまで集めたなぁ。
同じポジションで上に重ねていく技術で z-indexというものあります。
0 コメント :
コメントを投稿
コメントありがとうございます。