tyosbbこれまで、サムネイルの数が5つの場合についてサンプルを作成してきた。スライドの数が増えた場合(この例では10枚)の対処として、サムネイルが左右に移動して全部が現れるようにし、サムネイルのマウスオーバー時に、サムネイルの移動が止まるようにしたタイプのフォトギャラリーである。サムネイルのサイズを落としたり、サムネイルを2段に表示したりすれば解決するのだが、場合によっては、このようなスタイルもありうるのではないかと思い作成した。・表示用の写真にid(photo1,photo2,,,)を付け、サムネイル画像からリンクを貼っている。・写真を表示させる枠の下に、サムネイルを水平に一列に並べる(#thumbs)。・#thumbsをanimationで、左右に往復移動させる。・#thumbsのマウスオーバーで、動きを止める(animation-play-state:paused;)。・クリックされたサムネイルに相当する写真(.photo:target)のopacityを1にして、その写真を表示させる。・写真の表示は、transitionの設定で、フェイドイン効果が付与される。rel="nofollow"></a>では機能しませんでした。:このFadeIN/OUT型では、全てのスライドをopacity:0にして重ねて配置し、クリックされたされたサムネイルに該当するスライドをopacity:1にして表示させています。したがって、このままですと、一番上にあるスライド(10.jpg)だけがクリックに反応することになります。次のように、cssを書き換え、HTMLでリンクを貼ります。0;z-index:10;}HTML:以下のようにリンクを貼る。:自己紹介ホームページ作成やサークル紹介ホームページ作成のために本ホームページのソースコードを参考にさせていただいてます。お世話になっております。:まっちゃん、こんにちは。当サイトを参考にしていただいてありがとうございます。いいホームページの作成にお役に立てれば幸いです。:ソースを今回初めて使わせていただきました。:anationさん、初めまして。サムネイルは、移動していて、マウスがのると止まりますか?いずれにしろ、どこか記述に間違いがあるとしか申し上げようがありません。一度、記述を見直してください。すれば、画像サイズを一定にできます。それよりも、あらかじめ画像サイズを同一にできないのでしょうか。:イラストなどもあるのでなるべく画像は生のまま画像変更せずに保存したいのです。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。