リンク集ページを作成しました(￣ー￣)

相互リンクサイトさまはページ下部に移動しております。

特徴はリンク先のサイトのイメージ画像を見ることができます。
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>

こんな感じですがわかりますかね(；´∀｀)

Name:
Mail:
URL:
Comment:
Pass:
Secret:	管理者にだけ表示を許可する