実現したいこと
ここに実現したいことを箇条書きで書いてください。
- [ 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スライドショー設定 ---------------------------------------------------------------------------*/ /*1枚目*/ @keyframes slide1 { 0% {opacity: 0;} 10% {opacity: 1;} 15% {opacity: 1;} 20% {opacity: 0;} 100% {opacity: 0;} } /*2枚目*/ @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; } /*3枚画像の共通設定*/ #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; } /*1枚目*/ #slide1 { -webkit-animation-name: slide1; /*上で設定しているキーフレーム(keyframes)の名前*/ animation-name: slide1; /*同上*/ } /*2枚目*/ #slide2 { -webkit-animation-name: slide2; /*上で設定しているキーフレーム(keyframes)の名前*/ animation-name: slide2; /*同上*/ } /*3枚目*/ #slide3 { -webkit-animation-name: slide3; animation-name: slide3; } /*4枚目*/ #slide4 { -webkit-animation-name: slide4; animation-name: slide4; } /*5枚目*/ #slide5 { -webkit-animation-name: slide5; animation-name: slide5; }
試したこと
ネット検索でヒットした別のスライドショーのコードを試したり、
上記のコードと混ぜるなど試みましたが、最終的にやはり今の状態のまま、
リンクを正確に貼れればと思っております。
補足情報(FW/ツールのバージョンなど)
何卒よろしくお願い申し上げます。

回答1件
あなたの回答
tips
プレビュー