おしえて

多数の画像で商品説明する方法

締切済

質問者：yabu
質問日時：2016/04/13 11:55
回答数：6件

ホームページなどで商品を説明する方法として、大きな画像の脇や下に小さな画像を置いてクリックすると大きな画像の所に入れ替わり表示されるというのがありますが、その設置の方法を教えてください。
《例えば》http://kakaku.com/kuruma/used/item/12370101/
製作ソフトなどは持っていません。
画像の数は5枚ぐらいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.1

回答者： gugutto3
回答日時：2016/04/13 12:50

HP作成ソフトを買うかダウンロードして使いましょう。

windowsに付属するメモ帳でも知識があれば、作る事は可能ですが、これらのhtml文を理解する必要がありますので

どこでＨＰを作られますか？サイトによっては写真をアップロードするだけで、サムネイル（小さな画像）が設置されてクリックすると大きな画像が表示されるようになるように自動的に設定してくれるサイトもありますから

<!doctype html>


<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml">
<head>


<meta charset="shift_jis">
<title>価格.com - イプシロン(クライスラー) プラチナ神奈川県 128.0万円平成26年(2014年) [12370101] - 中古車</title>
<meta name="description" content="神奈川県のクライスラー／ジープ相模原が販売するイプシロン(クライスラー)プラチナの詳細情報。【年式】平成26年(2014年) 【走行】3.1万km 【車検】2017-03 【ミッション】AT 【色】パール【PR】クライスラー　イプシロン　プラチナ当社ユーザー様ワンオーナー　ＥＴＣ　レザーシート　ＨＩＤヘッドライト　純正アルミホイール [12370101]">
<meta name="keywords" content="プラチナ,イプシロン,クライスラー,神奈川県,平成26年(2014年),パール,中古車,中古">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=1055">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="http://css1.kakaku.k-img.com/css/common.css" media="all">
<link rel="stylesheet" type="text/css" href="http://css1.kakaku.k-img.com/css/kuruma/used/com … media="all">
<link rel="stylesheet" type="text/css" href="http://css1.kakaku.k-img.com/css/kuruma/used/ite … media="all">
<script type="text/javascript" src="http://script1.kakaku.k-img.com/script/libs/jque …
<script type="text/javascript" src="http://script1.kakaku.k-img.com/script/kuruma/us …
<script type="text/javascript" src="http://script1.kakaku.k-img.com/script/kuruma/us …
<script type="text/javascript" src="http://script1.kakaku.k-img.com/script/kuruma/us …
<script type="text/javascript" src="http://script1.kakaku.k-img.com/script/kuruma/us …
<script type="text/javascript" src="http://script1.kakaku.k-img.com/script/kuruma/us …
<link rel="SHORTCUT ICON" href="http://img1.kakaku.k-img.com/images/kakaku_logo. …
<link rel="canonical" href="http://kakaku.com/kuruma/used/item/12370101/">

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://s.kakaku.com/kuruma/used/item/12370101/">
<link href="http://m.kakaku.com/kuruma/used/itemview.asp?UCM … rel="alternate" media="handheld" type="text/html">

<meta property="og:title" content="価格.com - イプシロン(クライスラー) プラチナ神奈川県 128.0万円平成26年(2014年) [12370101] - 中古車">
<meta property="og:type" content="article">
<meta property="og:url" content="http://kakaku.com/kuruma/used/item/12370101/">
<meta property="og:image" content="http://www.carsensor.net/CSphoto/bkkn/759/944/U0 …
<meta property="og:site_name" content="kakaku.com">
<meta property="fb:page_id" content="182274318466028">
<meta property="fb:admins" content="100001677628430">
<script src="http://script1.kakaku.k-img.com/script/itemview/ …
<script src="http://script1.kakaku.k-img.com/script/snsbutton …


以下略

- 0
- 件

通報する

この回答へのお礼

ご丁寧にありがとうございます。
確かに無料でHPを作れるサイトでも簡単にできるところもありますね。
そちらを利用したいところなのですが、とあるシステムを購入してかなりHPを作りこんでしまったので、変えることもままならず、今のシステムの中に組み込みたいと思いました。Quick Homepage Maker v5.3というもので、そこのhaikというものを使っています。
その詳しいシステムは素人に近いのでよくわかりません。
やっぱり、新しく作り直した方がいいのかもしれませんね。

通報する

お礼日時：2016/04/13 21:09

No.2

回答者： yyak1
回答日時：2016/04/14 12:00

ど素人のやり方です。

ホームページビルダーを使ってます。
最新版は、画像のいろいろな表示ができます。
クラシックというのは、htmlも簡単に使えるので、勉強するのにはいいかも。

テンプレートを使っての作成は、そこまでかも。
htmlで編集できるのならいいかな。

で私は、人のホームページのソースを見て考えます。
NO1さんの回答もそうですね。
ソースをコピーして、（URLを入れることもできます）ホームページビルダーのhtmlのページに貼り付け、編集ページで、要らないものを消して考えます。

マウスを持っていけば、画像が変わります。JavaScript　を使ってかな。

<SCRIPT language="JavaScript"></SCRIPT>

これは、タイトルの下に貼り付けると思います。

下のhtmlは、表の中に表を入れたりして作ってるので・・・。
重要なのは、
<TD align="center" class="table_o10px"><IMG src="●●●●●1.jpg" name="myBigImage" width="480" height="360"></TD>
これが大きく表示させます。
<TD a onmouseover="myChgPic('●●●●●1.jpg')" href="javascript:void(0)" class="table_o10px"><IMG src="●●●●●1.jpg" width="48" height="36"></TD>
これが、小さな画像でマウスを持っていけば大きな画像が変わります。

<TR>
<TD align="center" class="table_o10px"><IMG src="●●●●●1.jpg" name="myBigImage" width="480" height="360"></TD>
</TR>
<TR>
<TD>
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD a onmouseover="myChgPic('●●●●●1.jpg')" href="javascript:void(0)" class="table_o10px"><IMG src="●●●●●1.jpg" width="48" height="36"></TD>
<TD a onmouseover="myChgPic('●●●●●2.jpg')" href="javascript:void(0)" class="table_o10px"><IMG src="●●●●●2.jpg" width="48" height="36"></TD>
<TD a onmouseover="myChgPic('●●●●●3.jpg')" href="javascript:void(0)" class="table_o10px"><IMG src="●●●●●3.jpg" width="48" height="36"></TD>
<TD a onmouseover="myChgPic('●●●●●4.jpg')" href="javascript:void(0)" class="table_o10px"><IMG src="●●●●●4.jpg" width="48" height="36"></TD>
<TD a onmouseover="myChgPic('●●●●●5.jpg')" href="javascript:void(0)" class="table_o10px"><IMG src="●●●●●5.jpg" width="48" height="36"></TD>
<TD a onmouseover="myChgPic('●●●●●6.jpg')" href="javascript:void(0)" class="table_o10px"><IMG src="●●●●●6.jpg" width="48" height="36"></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</TD>
</TR>

これも、他人のサイトから引用しました。
JavaScript　を勉強すればいいのですが、こっちの方が早いからね。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2016/04/17 09:48

現在、そして今後の製作方法は、従来(15年より前)とは全く異なります。

　16年前、HTML4.0が勧告されたとき
　　2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

HTMLには率直に、文書構造しか書きません。javascriptも原則使いません。例でいうと
<section>
　<ul>
　　<li><a href="#viewAll">前景</a><img src="" width="" height="" alt="" id="viewAll"></li>
　　<li><a href="#viewfront">前から</a><img src="" width="" height="" alt="" id="viewfront"></li>
　　<li><a href="#viewBack">後から</a><img src="" width="" height="" alt="" id="viewBack"></li>
・・・・
だけでよい。不必要なこと（特にプレゼンテーションに関わること）書いてないので、先でどのようにでもプレゼンテーションは変更できる。

ごく簡単なサンプルを後で作っておきます。画像が増えようがいくらでも追加できるし、デザインを全く変更することも可能になります。

　それまでの間、
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　でも見ておいてください。代替スタイルシートに対応したIEやFirefoxで、ブラウザの[表示]メニューから[スタイル(シート)]へ進み、色々なスタイルシートを選択してみてください。
　合わせてページのソースをご覧になると、極めてシンプルなこともわかると思いますし、印刷プレビューで印刷を確認されると・・驚かれるかと。
　もうずいぶん前に作られページですから最新のHTML5でもCSS3でもありません。

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2016/04/17 14:20

もっと一般的な形にしてみました。

★タブは＿に置換してあるので戻してください。
★HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=utf-8">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css" media="screen">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿＿<h1 id="title">Your title</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="#Top">トップ</a></li>
＿＿＿＿<li><a href="#MyCar">私の車</a></li>
＿＿＿＿<li><a href="#DocInfo">文書情報</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>カタログ</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section" id="myCar">
＿＿＿<h3>私の車</h3>
＿＿＿<ul>
＿＿＿＿<li><a href="#viewAll">全体</a></li>
＿＿＿＿<li><a href="#viewfront">前から</a></li>
＿＿＿＿<li><a href="#viewBack">後から</a></li>
＿＿＿＿<li><a href="#viewRSide">前から</a></li>
＿＿＿＿<li><a href="#viewLSide">後から</a></li>
＿＿＿</ul>
＿＿＿<p class="figure" id="viewAll"><img src="./images/1.jpg" width="640" height="480" alt=""></p>
＿＿＿<p class="figure" id="viewfront"><img src="./images/2.jpg" width="640" height="480" alt=""></p>
＿＿＿<p class="figure" id="viewBack"><img src="./images/3.jpg" width="640" height="480" alt=""></p>
＿＿＿<p class="figure" id="viewRSide"><img src="./images/4.jpg" width="640" height="480" alt=""></p>
＿＿＿<p class="figure" id="viewLSide"><img src="./images/5.jpg" width="640" height="480" alt=""></p>
＿＿</div>
＿＿
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

★HTML5
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#Top">トップ</a></li>
＿＿＿＿<li><a href="#MyCar">私の車</a></li>
＿＿＿＿<li><a href="#DocInfo">文書情報</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>カタログ</h2>
＿＿<p>本文はsection</p>
＿＿<section id="myCar">
＿＿＿<h3>私の車</h3>
＿＿＿<ul>
＿＿＿＿<li><a href="#viewAll">全体</a></li>
＿＿＿＿<li><a href="#viewfront">前から</a></li>
＿＿＿＿<li><a href="#viewBack">後から</a></li>
＿＿＿＿<li><a href="#viewRSide">前から</a></li>
＿＿＿＿<li><a href="#viewLSide">後から</a></li>
＿＿＿</ul>
＿＿＿<figure id="viewAll"><img src="./images/1.jpg" width="640" height="480" alt=""></figure>
＿＿＿<figure id="viewfront"><img src="./images/2.jpg" width="640" height="480" alt=""></figure>
＿＿＿<figure id="viewBack"><img src="./images/3.jpg" width="640" height="480" alt=""></figure>
＿＿＿<figure id="viewRSide"><img src="./images/4.jpg" width="640" height="480" alt=""></figure>
＿＿＿<figure id="viewLSide"><img src="./images/5.jpg" width="640" height="480" alt=""></figure>
＿＿</section>
＿＿
＿</section>
＿<footer>
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</footer>
</body>
</html>

- 0
- 件

通報する

No.5

回答者： ORUKA1951
回答日時：2016/04/17 14:26

いったんこのように率直にHTMLを書きます。

大昔に使われていたね<center>とかalign=center のようなプレゼンテーションに関わる一切はHTML4.01strict以降はありません。そのために、製作するのはとても簡単で、しかも検索延伸もスクリーンリーダーも問題がなくなった。

ではスタイルシートです。
[HTML4.01用]
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

/* 写真集 */
div.section div.section{
＿width:400px;
＿height:360px;
＿margin:0 auto;
＿position:relative;
＿border:ridge 2px gray;
＿padding:0;
＿min-width:0;
＿background-color:black;
}
div.section div.section ul{
＿width:100%;
＿height:60px;
＿margin:0;padding:0;
＿position:absolute;
＿bottom:0;
＿text-align:center;
}
div.section div.section ul li{
＿display:inline-block;
＿width:72px;height:54px;
}
div.section div.section ul li a{
＿display:block;
＿width:100%;height:100%;
＿color:transparent;
＿background-size:cover;
}
div.section div.section p.figure{
＿position:absolute;
＿top:0;left:0;
＿text-indent:0;
＿width:100%;
}
div.section div.section p+p.figure{
＿display:none;
}
div.section div.section p.figure:target{
＿display:block;
}
div.section div.section p.figure img{
＿display:block;
＿width:100%;
＿height:auto;
}

[HTML5用]
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
header,section,footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

/* 写真集 */
section section{
＿width:400px;
＿height:360px;
＿margin:0 auto;
＿position:relative;
＿border:ridge 2px gray;
＿padding:0;
＿min-width:0;
＿background-color:black;
}
section section ul{
＿width:100%;
＿height:60px;
＿margin:0;padding:0;
＿position:absolute;
＿bottom:0;
＿text-align:center;
}
section section ul li{
＿display:inline-block;
＿width:72px;height:54px;
}
section section ul li a{
＿display:block;
＿width:100%;height:100%;
＿color:transparent;
＿background-size:cover;
}
section section figure{
＿position:absolute;
＿top:0;left:0;
＿text-indent:0;
＿width:100%;
＿margin:0;
}
section section figure+figure{
＿display:none;
}
section section figure:target{
＿display:block;
}
section section figure img{
＿display:block;
＿width:100%;
＿height:auto;
}
/* 目次の背景 */
section section ul li a[href="#viewAll"]{background-image:url(./images/1.jpg);}
section section ul li a[href="#viewfront"]{background-image:url(./images/2.jpg);}
section section ul li a[href="#viewBack"]{background-image:url(./images/3.jpg);}
section section ul li a[href="#viewRSide"]{background-image:url(./images/4.jpg);}
section section ul li a[href="#viewLSide"]{background-image:url(./images/5.jpg);}