skipprにリンクを貼る方法

Question

初心者なんですが、skipprというフリーのスライドが素敵だったので、これのhtmlから順番に見て、試しにデータをいじってみています。

このスライドですが、htmlでスライドをさせる既述を書いているみたいですが、この各写真に他のページを開くurlを書き込みたいんですが、htmlに書くのかcssに書くのかわかりません。しかも、cssに書くにしても、スライドさせている絵の特定はhtmlで行っているので、このような場合はどのようにするのがベストなのでしょうか。
一般的なスライドショーはcssでimgの指定も動作も指定しているのが普通のようですので、ちょっと困惑しています。

skipprのhtml

<div id="container">
            <div id="theTarget">
                <div style="background-image: url(img/image1.jpg)"></div>
                <div style="background-image: url(img/image2.jpg)"></div>
                <div style="background-image: url(img/image3.jpg)"></div>
                <div style="background-image: url(img/image4.jpg)"></div>
                <div style="background-image: url(img/image5.jpg)"></div>
            </div>    
        </div>

例えば、このhtmlのスライド1枚目のimage1.jpgのリンク先がimage1.htmlだった場合に、そのページに飛ぶようにしたいと考えています。通常だと、
<a href="image1.htmlなどのリンク先url">image1</a>

となりますが、これをhtml上に配置しようとするにもdivの中に入れられない？ようですし、divの外に書いてしまうとスライドが成り立たなくなってしまいます。<div></div>の間に既述する必要があるとは思いますが、

<div style="background-image: url(img/image1.jpg);"><a href="#">image1</a></div>

にすると、画面の上にimage1というリンクが貼られた文字が表示されるだけで絵全体にリンクは貼れませんし、
<a href="#"><div style="background-image: url(img/image1.jpg);"></div></a>

と、<a>で囲ってみると、image1だけ白紙になってしまいます。

<div style="background-image: url(img/image1.jpg);" href="#"> なども試してみましたが違うようです。

深く考えすぎなのか、難しいのか簡単なのかさっぱりわかりません。
お分かりになる方がいらっしゃれば是非教えて下さい。

skippr
http://on-ze.com/archives/1797

Comments

[m.ts10806]

現在組まれているソースコードをご提示ください。

[退会済みユーザー]

まだ特に組んでいるという状態ではありませんので、提供されているskipprのhtmlに書かれている部分を追記依頼しました。言葉足らずで申し訳ございません。どうぞよろしくお願い致します。

[m.ts10806]

うーんそれだと推奨されていない質問の丸投げと変わらないので自分なりにやってみてから分からないことを質問された方が良いかと・・

[退会済みユーザー]

ちょっと書き足してみます。自分なりにいじってはみたんですが・・・それと、質問文に追記したのですが反映されないのは時間がかかっているのでしょうか。もう２～３日経つのですが。

[m.ts10806]

そういったケースは見たことないですが。。。更新（保存）し忘れてませんか？

[m.ts10806]

正常に更新されていれば投稿日時の横に最終更新日時が出ます。

[退会済みユーザー]

何度も更新してみたのですが出来ませんでした。ただ、今やってみたら更新できました。理由はわかりません。＞＜

[m.ts10806]

できてますね。よかったです。・・・お手数ですがコード部分は```で囲っていただけると助かります（分からなければコード部分を選択して<code>ボタンを押してください）

[退会済みユーザー]

何度もすみません。私のような初心者が利用するようなサイトではないですよね。申し訳ありません。この件までは質問してしまったので、このままお願いできればと思います。

[m.ts10806]

利用するのは初心者かどうかは関係ないと思いますよ。むしろ初心者こそどんどん使って課題を解決していき技術を身につけていくべきと思います。「初心者アイコン」も用意されていますし。色々な使い方があって良いと思います。

Answer 1

少し回答までお時間いただいてしまいましたが、
以下の方法をお試しください。

• スライドにリンクを挿入

<div style="background-image: url(img/image1.jpg)"><a href="image1.html">&nbsp;</a></div>

※ は「半角スペース」で、本来はなくてもいいかもしれませんが、ひとまず

• リンクに対して下記を設定

#theTarget div a{
display:block;
width:XXXpx;
height:YYYpx;
}

※height,widthのXXX,YYYはスライド画像の大きさにあわせてください。
範囲が分かりづらい場合はbackground-colorなどを設定して調整してみてください。

解説：
<a>タグをブロック化することでdivの範囲内で文字を入れなくてもクリック可能しています。

蛇足：
これを応用してpositionも併用すると、例えば「背景画像の中の任意の箇所をクリックする」といったことが可能となります。

Comments

[退会済みユーザー]

やはりhtml上だけではリンクは貼ることができないようですね。
CSSも早く勉強しなければ。<a>はやはりdivの中に入れるという考え方で間違いはなかったようですが、文字を入れてしまっていたので特にわからなくなっていたようです。
CSSのpositionというのは調べていた時にヒットして見てはいたのですが、何分まだCSSもわからない状況ですのでスルーしていました。
ちょっと試してみます。
このような質問にご回答下さりありがとうございました。

[m.ts10806]

今回の要件だけだとpositionは必要なさそうなので完全に蛇足です。
例えば日本地図のような背景画像を1つ用意して各都道府県のリンクをつけたいようなときはaタグをブロック化してpositionとtop,leftとかを駆使してaタグを置きたいエリアに置くような形をします。
まあ、htmlとcss、ついでにjavascriptは家族みたいなもので駆使することでWebページが形になっていくので、簡単なものから覚えていくと良いと思いますよ。
例えば今回の場合、javascriptのクリックイベントを上手いこと利用すればaタグ置かずに画面遷移も可能になると思います。
結果は同じでも実に様々なやり方が出来るのでその中で自分に合ったやり方とかより良いやり方を身につけていくといいですね。

[退会済みユーザー]

かなり甘く見ていました・・・簡単に「絵にリンクを貼れば飛ぶでしょ」位に思っていたのですが、書いてみると全然・・・
確かにひとつの動作をさせるのに、いくつもの方法があるということも分かってきました。やってみないと分からないですね。分からないので調べてみると、いろんな説明があったりするので、益々分からなくなってきたり（苦）
一応は簡単なhtmlから入ったのですが、次にskipprという見た目から入ってしまったので失敗しました。

ちなみに、今試してみているところですが、リンクが貼れていないようで・・・ビルダーを使っていますが、ページ編集をみると、半角スペースを取った部分に小さなアンダーラインは入っているものの、絵全体にリンクが貼れていないようです。

.hero{
width: 100%;
height: 100%;
min-height: 500px;
position: relative;
}
#theTarget div a{
display: block;
width: 100%;
height: 100%;
}
とcssに書いてみましたが、多分htmlのほうの不具合でしょうか。

気になってしまったので、これにリンクが貼れるまで頑張ってみようと思います。その後で仕切り直して簡単なものを作ってみようと思います。

本当にすみませんでした。ありがとうございました。

[m.ts10806]

背景画像にすると実態は目に見える場所にはないですからね・・・。以前、私も苦労しました。
width、heightは100％にするより表示されているスライドのサイズ（画像のサイズ）に合わせた方がいいと思います。
<a>タグ内（ひいては<div>タグ内）には実際は何もない状態なので％表示にすると空の状態なのでブロックは広がりません。#theTarget divにheight,widthを指定したらきくかもしれません。