タイプのフォトギャラリーを、既に2つほど紹介したが、ここでは、画面のサイズに応じて表示写真の大きさが、最大サイズ以下の範囲で変化するものになっている。フルHDの写真を使いたい場合や、小さな解像度のデバイス向けを考慮したい場合などを配慮したものである。ここで紹介するサンプルは、サムネイルクリックでフェイド・インする、あるいは、送りボタンでフェイド・インする大きなサイズの写真が、画面横幅の62%幅で表示されるようにしている。極端な場合は、幅1920pxの写真を用意すれば、100%表示も可能となる。させるため、サムネイルとそのスライドを表示させるための送りボタンに関連付けている。それぞれ閉じるボタンと遮蔽スクリーンに関連付けられていて、このクリックで初期画面に戻る。それぞれ、写真とキャプションと閉じるボタンを含んだdivで、この全体を切り替える方式になっている。・ボタン領域とは、各写真の上層に配置した、左40%の領域を覆う矩形(cover_left)と、右40%の領域を覆う矩形(cover_right)で、各領域のマウスオーバーで左右の矢印が表示され、そのクリックで左右のスライドに表示が切り替わるもの。Worfpressやテンプレートの中で使う場合には、この設定がないと決められたdiv内の表示なってしまう。max-width:1200px;width:62%;left:19%;は、用意した写真の幅1200pxがフルサイズHD解像度1920pxの62%であることから、画面の水平方向の中央に62%幅で表示されるように設定している。して、画面サイズに応じて縮小するようにしている。同様全画面に広がるようにしている。cover_right)の最上層(#photo5)のものを非表示にするため。これをしないと、アクティブなクリッカブル領域が生じてしまうため。設定、各ラジオボタンクリックでの記述については、これまでの稿を参照のこと。HTML、CSS初心者です。こちらのサイトはすごくわかりやすく、また非常に使いやすく参考にさせていただいております。写真の枚数を増やしたい場合、具体的にどのコードを変更すれば良いのかご教示いただけますと助かります。増やすだけでは上手くいきませんでした。:moonさん、はじめまして。当サイトをご活用くださいましてありがとうございます。r6は閉じるボタン、r7は写真周りの背景に対応しています。for="r8">に代えてください。・r6は#photo6に対応させます。・htmlの#photo5#をphoto4にならって、#photo6を#photo5にならって記述します。・cssでは、#photo6の記述を、#photo5の記述の後ろに加えてください。これでうまくいきますよ。:オーナー様ご返信をありがとうございました!返信が早くてびっくりです。仰るとおりに試してみたところ、うまく1枚追加できました。(きちんと書いてあるにもかかわらず)ボタンの機能を私が把握していなかったのが原因ですね。枚数を追加したいと思っているので引き続きトライしてみたいと思います。仕組みをご理解いただけているようなので、枚数追加はうまくいくと思います。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。