掲示板が新しくなりました
閲覧のみなら登録は不要です。書き込みをする際に登録が必要になります。
旧掲示板をご利用のユーザー様も、書き込みをする際は、お手数ですが新規登録からお願い致します。
旧掲示板をご利用のユーザー様も、書き込みをする際は、お手数ですが新規登録からお願い致します。
受付中
個々のスライダーに別々のリンクを張りたい
カテゴリ：htmlテンプレ用
テンプレート「tp_kids6_pink02」の色違いを使用しています。
個々のスライダーに別々のリンクを張りたいのですが、現状以下のようにソースを記載しても
<aside id="mainimg">
<a href="index.html"><img src="images/1.jpg" alt="" class="slide1"></a>
<a href="https://bbbb.com"><img src="images/2.jpg" alt="" class="slide2"></a>
<a href="https://aaaa.com"><img src="images/3.jpg" alt="" class="slide3"></a>
<img src="images/kazari1.png" alt="" class="kazari1">
<img src="images/kazari2.png" alt="" class="kazari2">
</aside>
※「https://aaaa.com」、「https://bbbb.com」は例として記載しています。
のように実装しているのですが
スライダー１をうリックしても２をうリックしても
３で設定しているアドレスに移動してしまいます。
それぞれ個々のサイトに遷移させるためにはどうすればよろしいですか？
回答（2件）
ご連絡ありがとうございます。
対応検討いたします。
kids6はcssスライドショーなので、各画像ごとへのリンクには対応していません。
各画像にリンクを貼りたい場合は、以下カスタマイズを行って下さい。
（※htmlは、記載されたaタグつきの状態でOK）
css/animation.cssの、
@keyframes slide1 {
から
@keyframes slide3 {
までのブロックを丸ごと以下に入れ替え。
@keyframes slide1 {
0% {opacity: 1;visibility: visible;pointer-events: auto;}
25%{opacity: 1;visibility: visible;pointer-events: auto;}
35%{opacity: 0;visibility: hidden;pointer-events: none;}
90% {opacity: 0;visibility: hidden;pointer-events: none;}
100% {opacity: 1;visibility: visible;pointer-events: auto;}
}
@keyframes slide2 {
0% {opacity: 0;visibility: hidden;pointer-events: none;}
25% {opacity: 0;visibility: hidden;pointer-events: none;}
35% {opacity: 1;visibility: visible;pointer-events: auto;}
60% {opacity: 1;visibility: visible;pointer-events: auto;}
70% {opacity: 0;visibility: hidden;pointer-events: none;}
100% {opacity: 0;visibility: hidden;pointer-events: none;}
}
@keyframes slide3 {
0% {opacity: 0;visibility: hidden;pointer-events: none;}
60% {opacity: 0;visibility: hidden;pointer-events: none;}
70% {opacity: 1;visibility: visible;pointer-events: auto;}
90% {opacity: 1;visibility: visible;pointer-events: auto;}
100% {opacity: 0;visibility: hidden;pointer-events: none;}
}
次に、
.slide1,.slide2,.slide3,.kazari1,.kazari2 {
のブロックの下にでも、以下を追加。
/*スライド写真内のimg共通設定（aで囲ったので追加）*/
.slide1 img,.slide2 img,.slide3 img {
width: 100%;height: auto;
display: block;
}
次に、
.slide1,.slide2,.slide3 {
のブロックを、以下に入れ替え。
.slide1,.slide2,.slide3 {
display: block;
overflow: hidden;
text-decoration: none;
line-height: 0;
box-shadow: 4px 4px 10px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%出た状態。*/
transform: scale(0.9); /*実寸に対して90%のサイズで表示させる指定。原寸大がいいならこの１行を削除。*/
z-index: 2; /*下の飾りより前面に表示させる指定*/
}
実際に編集済みのサンプルは、以下になります。
https://template-party.com/bbs_sample/2026/bbs10/