質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

270閲覧

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

MaH67

総合スコア1

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/03/11 12:48

実現したいこと

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

  • [ 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/ツールのバージョンなど)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2023/03/13 05:04

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

回答1

0

ベストアンサー

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}

動くサンプル:https://jsfiddle.net/dy1wxm4n/

投稿2023/03/11 16:23

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MaH67

2023/03/13 02:13

kei344さま 早速のご回答ありがとうございます。 また、コメントが遅くなり申し訳ありません。 おかげさまで解決しました。 無知な私にご教示いただき、大変ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問