HPのファーストビューのスライド画像のリンクが思うように動作しません

実現したいこと

ここに実現したいことを箇条書きで書いてください。

[ HPのファーストビューのスライドショーにリンクを貼りたいです ]

前提

独学でHP制作をしております。
現在、wordpressのテンプレートを編集し、お客さまに納品するHPを制作している最中です。

こちらについて、HPのファーストビューの画像をスライドショーにしたく、現在使用しているwordpressテンプレート通りにCSSとHTMLのみで、スライドショーを構築しております。

各スライド画像に別々のリンクを貼ったのですが、
なぜか全ての画像のリンク先が、最後のスライド画像に貼り付けたリンク先になってしまいます。
数時間いろいろ調べたり試したりしておりますが解決せず、お力をお借りできたら幸いです。

発生している問題・エラーメッセージ

エラーメッセージは特にございません。
表示されるスライド画像の、全てのリンク先を別々のページにしたいです。

該当のソースコード

■HTML■

<aside id="mainimg">
<img src="<?php echo get_template_directory_uri(); ?>/images/gazou1.jpg" alt="" id="slide0">
<img src="<?php echo get_template_directory_uri(); ?>/images/gazou1.jpg" alt="" id="slide1">
<a href="https://〇〇.com/page1“><img src="<?php echo get_template_directory_uri(); ?>/images/gazou2.jpg" alt="" id="slide2"></a>
<a href="https://〇〇.com/page2”><img src="<?php echo get_template_directory_uri(); ?>/images/gazou3.jpg” alt="" id="slide3"></a>
<a href="https://〇〇.com/page3”><img src="<?php echo get_template_directory_uri(); ?>/images/gazou4.jpg” alt="" id="slide4"></a>
<a href="https://〇〇.com/page4”><img src="<?php echo get_template_directory_uri(); ?>/images/gazou5.jpg" alt="" id="slide5"></a>
</aside>



■CSS■

/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
0% {opacity: 0;}
10% {opacity: 1;}
15% {opacity: 1;}
20% {opacity: 0;}
100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
0% {opacity: 0;}
15% {opacity: 0;}
20% {opacity: 1;}
35% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}
/*3枚目*/
@keyframes slide3 {
0% {opacity: 0;}
35% {opacity: 0;}
40% {opacity: 1;}
55% {opacity: 1;}
60% {opacity: 0;}
100% {opacity: 0;}
}
/*4枚目*/
@keyframes slide4 {
0% {opacity: 0;}
55% {opacity: 0;}
60% {opacity: 1;}
75% {opacity: 1;}
80% {opacity: 0;}
100% {opacity: 0;}
}
/*5枚目*/
@keyframes slide5 {
0% {opacity: 0;}
75% {opacity: 0;}
80% {opacity: 1;}
95% {opacity: 1;}
99% {opacity: 0;}
100% {opacity: 0;}
}

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	clear: left;
	z-index: 100;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
/*３枚画像の共通設定*/
#slide1,#slide2,#slide3,#slide4,#slide5 {
	-webkit-animation-duration: 45s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 45s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
/*土台画像*/
#slide0 {
	position: relative;width: 100%;height: auto;
}
/*１枚目*/
#slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
}
/*２枚目*/
#slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
}
/*３枚目*/
#slide3 {
	-webkit-animation-name: slide3;
	animation-name: slide3;
}
/*４枚目*/
#slide4 {
	-webkit-animation-name: slide4;
	animation-name: slide4;
}
/*５枚目*/
#slide5 {
	-webkit-animation-name: slide5;
	animation-name: slide5;
}

試したこと

ネット検索でヒットした別のスライドショーのコードを試したり、
上記のコードと混ぜるなど試みましたが、最終的にやはり今の状態のまま、
リンクを正確に貼れればと思っております。

補足情報（FW/ツールのバージョンなど）

何卒よろしくお願い申し上げます。

kei344

2023/03/13 05:04

質問が「受付中」になっているので、「解決済み」にしておいてください。

回答1件

ベストアンサー

opacityは表示しないだけで要素はそこにあるので、重ね順を変えるかクリックできないようにするかどちらかで対処できそうです。

CSS
1@keyframes slide1 {
20% {opacity: 0;pointer-events: none;}
310% {opacity: 1;pointer-events: auto;}
415% {opacity: 1;pointer-events: auto;}
520% {opacity: 0;pointer-events: none;}
6100% {opacity: 0;pointer-events: none;}
7}