Wordpressで画像の前面に画像を置いて、クリックすると別ページに飛ばせるようにしたい

###前提・実現したいこと
Wordpressのトップページに、背景画像と画像を複数置いて、画像を押すと記事へ飛ぶページを作りたいです。イメージはこちらです。もっともっと単純なものですが・・。
http://romasaga.jp/

調べた結果、以下の3パターンで実現出来そうでした。
・tableの背景に画像を設定して、各セルに画像を入れて、marqueeで動かす
・イメージマップを使う（動かすことはできない）
・position:relativeとposition:absolute（複数画像を設定できない）

現在、一つ目で進めているのですが、以下の問題が発生していてうまくいきません。
VBAマクロ・バッチファイルの簡単なものが作れるレベルで、ググりながら作るとしたら、どの方法がお勧めでしょうか。また、他にも実現する方法はございますでしょうか。

###発生している問題・エラーメッセージ
Wordpressの固定ページにtableを作って、styleを使ってtableの背景に画像は設定できたのですが、table内に横線が表示されて困っています。

###該当のソースコード

HTML
1<style type="text/css">
2table{border-style:none;
3background-image: url(http://***.png);
4border=none;
5}
6</style>
7
8<table>
9<tr>
10<td><marquee><a href=""><img src="http://***.png"></a><marquee></td>
11</tr>
12</table>

###試したこと
td{border-style:none;
border=none;
}
tr{border-style:none;
border=none;
}
など、線が消える要素を試しました。

###補足情報(言語/FW/ツール等のバージョンなど)
初めてで不手際があれば申し訳ございません。アドバイス頂ければ幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

提示の参考サイトhttp://romasaga.jp/のキャラクターの部分のようなことを実装したいということでしょうか？

こちらのサイトではキャラクターの画像にアニメーションGIFを使っているようです。
配置はdivやul、liに対してposition:relativeやposition:absolute、left、topなどのCSSで指定しています。（質問文の提案に合った3番目のものですね）

「複数画像を設定できない」わけではなく、それぞれの画像にきちんと指定すれば問題ないと思います。
http://romasaga.jp/のソースを元にしたサンプル→[https://codepen.io/dit4410/pen/EoLRQm](https://codepen.io/dit4410/pen/EoLRQm)
※pxで位置を指定しているのでレスポンシブ対応ではありません。

tableをレイアウト目的で使うことは推奨されていませんし、marqueeもHTML5で廃止になっています。
質問者さんが最終的に表現したい状態がわかりませんが、「動く画像であること」「WordPressであること」を一度捨て、思った場所に配置できるようCSSを組んでみてはいかがでしょうか。

投稿2018/01/12 01:21

dit.

総合スコア3235

die_vba

2018/01/12 13:34

ご回答ありがとうございます。説明不足で申し訳ございません。はい、キャラクターの部分を実装したいです。動いているキャラクターを押すと、Wordpressの記事へ飛ぶ仕組みを考えています。動きはGIFにして、配置はulなどを応用されているのですね。箇条書きだけのイメージでしたが、確かにtableと同じように使えますね。初めて知りました！大変分かりやすいサンプルもありがとうございます（わざわざ作って頂いたのでしょうか、、ありがとうございます！）非推奨などから謎の横線などが残るのでしょうか。。お陰様でtableに固執しなくて良くなったので、tableは使わずにいこうと思います。ただ、Wordpressはどうしても使って欲しいと言われています。。トップページだけ別でHTMLで作って、リンク先をWordpressの記事にしようかなども考えています。ひとまず、教えて頂いた方法で３で進めてみようと思います。本当にありがとうございました！

dit.

2018/01/12 15:56

あ、ちょっとわかりづらかったですかね。最終的にワードプレスにすることは問題ないですが、一度純粋なHTMLとCSSで思った通りのレイアウトを組んでみましょうということです。その形をワードプレスに持ってきてphpに組み込んだ方がわかりやすいのでは？と思ってのことでした。

行動規範の内容に同意します

cssアニメーションはいかがですか。
ざっくりした例ですが、こんな感じです。

html
1<div>
2<p><a href=""><img src="http://***.jpg"></a></p>
3</div>

css
1div{
2  position: relative;
3  width: 100%;
4  height: 100%;
5  background-image:  url(http://***.png);
6}
7p{
8  position: absolute;
9  left: 100%;
10  top: 0;
11  width: 100px;
12  animation: slide 10s linear infinite;
13}
14@keyframes slide {
150% {
16  left: 100%;
17}
18100% {
19  left: -100px;
20}