tyosbb先に公開した同型のギャラリーは、枚数が増えるとその数だけラジオボタンを設置する必要があるなど、CSSの記述が煩雑になるので、このたびは、target疑似クラスを使ってその点を改良したのと、いくつかの記述上の工夫を加えた。レスポンシブ対応型である。JqueryのプラグインFancyBoxを意識して作ってみたが、まあまあ、それらしいものができたと思う。サンプル実装サンプルは、こちらの別ページにあります。・あらかじめ、送りボタン(next.gif)、戻りボタン(prev.gif)、閉じるボタン(end.gif)の各画像を作成し、サーバーにアップロードしておく・サンプルではimagesフォルダに格納していますが、HTMLで設定フォルダにパスを通してください。リンクを貼る必要がある。・targetを認識する要素div(.photo)それぞれには、画面を覆う半透明の黒色スクリーンdiv(.dark)、スライド写真、ボタン類を配置している。・.darkに#P11(何も中身がないので初期画面に戻る)をリンクさせている。・スライド、ボタン類を配置しているdiv(.frame)は、cssでtransitionを使って、FadeIN/Outさせる。・スライド送りは、以前にも実装したように、写真の右側(40%)部にカーソルがのったら右送りボタンが表示され、矩形平面部のクリックでスライドが送られるようにしている。・サムネイルはlist形式で記述し、max-width:800pxのdiv(.contnr)に並べる。・.photoおよび.darkは、画面全域。・.frameは、横幅を画面幅の80%に指定し、画面中央に配置する。中央配置は、positionをabsoluteにし、top:50%、left:50%に指定、transform:translate(-50%,-50%)で、写真縦横サイズの半分を補正して配置している。・ボタン類は、スライド写真のコーナーや左右の端に配置しているが、画面サイズの変化によって、多少ずれる。:こちらのプログラムを拝借させていただき、ホームページに設置してみたのですが画像拡大時に表示される「×印」が機能しません。src="images/end.gif"&gt;&lt;/a&gt;&lt;/span&gt;とありますが、#p11のところを、画像枚数の範囲外にしてください。:ありがとうございます!お陰さまで解決することができました。これからも、利用させていただくことがありましたら、宜しくお願いします。:解決おめでとうございます。これからも、弊サイトを楽しんでください。:初めまして、ページに活用しようとしているのですが、サムネイル部分と拡大した時の画像を分けるのはどうすればよいでしょうか?サムネイル部分をバナーみたいにして、それをクリックするとメインの画像が表示される感じのイメージです。:タケシさんはじめまして。すみません、ご質問のイメージがわかなくて、戸惑っています。:初めましてmasamiともうします。初心者なりに活用させていただこうと思って挑戦していますがクリック時の写真がモニターいっぱいになり矢印やバッテンマークがでないのです。写真データのサイズを小さくしてみたのですがダメでした。上にかぶった状態でボタン類見えないのでしょうか、どこを触ればいいのか教えていただけますか。:masamiさんはじめまして。説明が不親切でしたね。ネクストボタン画像(next.gif)、プリービアスボタン画像(prev.gif)、閉じるボタン画像(end.gif)をアップロードしておかなければなりません。src="images/next.gif"となっていますが、imagesは、格納したフォルダを指定してください。画像を作るのが面倒なら、このサンプル表示画面で、右クリックでダウンロードしてください。:masamiです、お世話になります。できました、ありがとうございました。我が家の旧タイプのモニターと最近のワイドモニターでは上下がカットされるのは仕方ないですね。なにはともあれありがとうございました。:とりあえず、出来上がってよかったですね。上下がカットされる?レスポンシブになっているので、画面内に画像が収まるはずですが。:masamiです、お世話になります。『画面内に画像が収まるはずです』ですが、我が家のモニターでは右上にバッテンマークが出るのですが、職場のワイド画面ではバッテンがでないのです。それから矢印マークが家ではOKなのですが職場では写真外に出てちょっとブサイクな状態であり我慢しようかと迷っているところです。どこか触る部分があれば教えていただけますか。それから画面表示の大きさを調整する場合、データサイズを触ればいいのかCSSのどこかかなと思ったりするのですが・・・。ここも教えていただけますか。:masamiさんの用意している写真のサイズですが、小さいのではないでしょうか。このサンプルは、フルサイズ(1920*1080)の写真用に設定しています。写真サイズが画面サイズよりも小さい場合には右側に表示されるボタンが写真からはみ出てしまいます。数値をうまく設定してください。:masamiです、お世話になります。わかったような気がします。今わかってないことは1フルサイズ(1920*1080)にするとネットの動きが遅くならないのですか、データーの画素数とまた別ですか。2100%を小さくすると表示は小さくなるのですが、だんだん左に寄ってしまうので中央に表示させたいのです、どこをさわればよろしいですか。:1フルサイズにすると、解像度を下げてもPCの性能によっては遅くなります。画像のサイズを小さくして、表示位置を調節すれば同様のLightboxタイプが作成できます。中の、left及びtopの値を%指定で調整します。位置も、適正な表示位置になるよう調整します。1と同様に位置調整してください。できました、ボタンの位置も体裁よくなりました。ありがとうございます。:おめでとうございます。引き続き、本サイトをご活用ください。急なメッセージ失礼します。html、css初心者なのですが、独学で今HP作成をしています。このサイトを拝見させていただき、とても助かっています。やっていたところ順調だったのですが、以前のコメントにも似たような質問があったのですが、バツ印が機能しません。rel="nofollow"></a>も変えたのですが機能しません。初歩的で申し訳ないのですが、教えていただけないでしょうか?よろしく御願い致します。:koniさんはじめまして。バツ印は範囲外であれば連番でなくてもいいです。href="#p11"のところの11を決めた番号に変えてください。:早速の返信ありがとうございます。rel="nofollow"></a>のrel=nofollow記述ですが、ありません。href="#p11"を変えるところは1つの項目で2箇所ですよね?本当に初歩的で誠に申し訳ありません。:一つの項目(スライド)に対して、背景とバツ印の2カ所ですね。rel=nofollowと言う記述は、あっても影響はないのですが、ページで示した記述にないものが、なぜ質問に登場するかが知りたいのですが。言うのは、以前にも質問受けたことがありますので。:その2箇所を範囲外の数値をいれてもできなかった場合は他に何が考えられますでしょうか?rel=nofollowに関しては、質問にのせていないのですが、もしかしたらhtmlのコードをコピペして投稿したら投稿した途端に、そのコピペの部分がコメントから消えてしまいました。そこの部分がrel=nofollowの記述になっているのかもしれません。最初のコメントでのせていたコードはサンプルの#p11の所を#p50に変えただけのコードで2箇所のコードをのせました。:nofollowについては了解です。このコメント記述欄では、&lt;は&ltにセミコロン、&gt;は&gtにセミコロンをつけないと表示されません。しないとhtmlの記述として認識されてしまうのです。wordpressの方で、nofollowの記述を自動的に加えたのだと思います。koniさんの責任ではありません。バツ印が効かない件は、わかりません。以前質問された方は、これで解決しました。それ以外と言われても、koniさんがどのように作られているかがわからなければ、特定できません。koniさんがサーバーに上げたものが閲覧できれば、判断できると思いますが。:丁寧な回答ありがとうございました。今まだ作っている段階でサーバーにあげられていないので、その段階までいきましたら、閲覧してもらってもよろしいでしょうか?お忙しいところ誠に申し訳ありませんでした。仮に置くことができれば、その時点でご連絡ください。:3月にお世話なったmasamiともうします、お世話になります。サイトに使わせていただきたいのですが、11枚の画像ですが最終ページのみクリックすると本文の裏に表示されて画像の右バツ印部分がかろうじて表示されてします。本文とCSSを眺めるのですがわかりません、ご教授いただければ幸いです。(1~10枚目は正常動作をし、バツ印時のジャンプ先は#12としています。