2ch Web収入カテゴリからアフィリエイトに関係するねたをチョイス
こちらで新ブログ立ち上げました⇒猫も杓子もアフィリエイト
| Home |
2005.10.08 Sat
特徴はリンク先のサイトのイメージ画像を見ることができます。
TOPページを画像ファイルにして使用させていただいておりますが
勝手に作成したので、リンク先の管理人さまでもし画像使用に問題がある場合はご連絡くださいm(__)m
あと、この画像上にマウスを持っていくと拡大表示してちょっと見やすくなります。
一度お試しください。
↓こんな感じです。
一応作成方法を書いときますね~..._〆(゚▽゚)
①画像を通常表示と拡大表示用で大きさの違うものを2種類用意します。
②スタイルシートの編集・・・以下を追加(コメント部を環境に合わせて変更してください)
.photo a {
width: 180px; #通常表示用画像の幅に変更してください
height: 118px; #通常表示用画像の高さに変更してください
overflow: hidden;
display: block;
}
.photo a:hover img {
border : 1px;
}
.photo a:hover {
width: 320px; #拡大表示用画像の幅に変更してください
height: 210px; #拡大表示用画像の高さに変更してください
}
.photo a:hover img.small { #通常時のクラス名(small)
visibility: hidden;
}
.photo a:hover img.medium { #拡大時のクラス名(medium)
position: relative;
top: -118px; #通常表示用画像の高さのマイナス値に変更してください
left: 0;
right: 0;
}
.photo img {
border : 1px;
}
③HTMLの編集・・・画像を表示したい場所に以下を追加
<div class="photo">←上記で設定したクラスを指定
<a href="http://yochiyochi.blog15.fc2.com/" target="_blank">←リンク先
<img src="http://blog-imgs-29.fc2.com/y/o/c/yochiyochi/knowledge180.png" width="180" height="118" alt="サムネール画像" title="サムネール" / class="small">←通常イメージリンク(smallクラスを指定)リンクを表示したい画像の保管場所に変更してください。
<img src="http://blog-imgs-29.fc2.com/y/o/c/yochiyochi/knowledge320.png" width="320" height="210" alt="拡大画像" title="拡大画像" class="medium" />←拡大イメージ(mediumクラスを指定)リンクを表示したい画像の保管場所に変更してください。
</a></div>
こんな感じですがわかりますかね(;´∀`)
TOPページを画像ファイルにして使用させていただいておりますが
勝手に作成したので、リンク先の管理人さまでもし画像使用に問題がある場合はご連絡くださいm(__)m
あと、この画像上にマウスを持っていくと拡大表示してちょっと見やすくなります。
一度お試しください。
↓こんな感じです。
一応作成方法を書いときますね~..._〆(゚▽゚)
①画像を通常表示と拡大表示用で大きさの違うものを2種類用意します。
②スタイルシートの編集・・・以下を追加(コメント部を環境に合わせて変更してください)
.photo a {
width: 180px; #通常表示用画像の幅に変更してください
height: 118px; #通常表示用画像の高さに変更してください
overflow: hidden;
display: block;
}
.photo a:hover img {
border : 1px;
}
.photo a:hover {
width: 320px; #拡大表示用画像の幅に変更してください
height: 210px; #拡大表示用画像の高さに変更してください
}
.photo a:hover img.small { #通常時のクラス名(small)
visibility: hidden;
}
.photo a:hover img.medium { #拡大時のクラス名(medium)
position: relative;
top: -118px; #通常表示用画像の高さのマイナス値に変更してください
left: 0;
right: 0;
}
.photo img {
border : 1px;
}
③HTMLの編集・・・画像を表示したい場所に以下を追加
<div class="photo">←上記で設定したクラスを指定
<a href="http://yochiyochi.blog15.fc2.com/" target="_blank">←リンク先
<img src="http://blog-imgs-29.fc2.com/y/o/c/yochiyochi/knowledge180.png" width="180" height="118" alt="サムネール画像" title="サムネール" / class="small">←通常イメージリンク(smallクラスを指定)リンクを表示したい画像の保管場所に変更してください。
<img src="http://blog-imgs-29.fc2.com/y/o/c/yochiyochi/knowledge320.png" width="320" height="210" alt="拡大画像" title="拡大画像" class="medium" />←拡大イメージ(mediumクラスを指定)リンクを表示したい画像の保管場所に変更してください。
</a></div>
こんな感じですがわかりますかね(;´∀`)
スポンサーサイト
| Home |
☆相互リンクありがとうございます☆⇒ 金の卵と銀の卵!ネットで稼ぐお小遣い : どらかんさん
⇒ パソコン1台で数千万稼ぐノウハウを公開中! : スマイルさん
⇒ 0円から始めるアフィリエイト~元手なしで始めるビジネス日記! : zero_yen_afさん
⇒ @情報商材館 : まぁパパだぁーさん
→ http://yochiyochi.blog15.fc2.com/tb.php/116-b89bffef