写真のギャラリーのHPを作っているのですが、どうやって写真を表示すれば良いのか悩んでいます。
サムネイルを作るか、最初から画像を一覧表示するか、タイトルだけ出してクリックすると画像が出るようにするか、など・・・。
なるべく重くならないように、見やすいページにしたいのですが、どんな方法が一番ベストなのか教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

1ページに表示する写真のサイズと枚数にもよりますね。


表示が軽い順でいえばもちろん
タイトルだけ出す<サムネイル<画像を一覧表示
ですが、320*240ピクセル程度の写真を10枚程度並べるだけなら、最初から画像を表示してしまっても全然問題ないでしょう。
表示する画像が800*600くらい以上だと、一覧表示はかなりつらくなります。
サムネイルか、テキストページからのリンクにした方が無難です。

オモシロ写真系だと、タイトルだけ出してクリックすると画像が…という形式が個人的にはかなり好きなのですが(タイトルから想像した内容が実際に見て裏切られる楽しみがあるので(^^))、これも写真の内容次第ですよねえ…。

写真から自動的にサムネイル画像とその一覧HTMLを生成してくれるソフトもいろいろ出てますので、そういうのを活用されるとラクかもしれません。
(参考URL)

参考URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=72089
    • good
    • 0
この回答へのお礼

sesameさん、再び回答ありがとうございます。
私としてはそれほど大きい写真じゃなくてもいいと思っているので、
300~400ピクセルで一覧表示でもいいかな、と考えてます。
参考URLも見てきました。
こういう便利なソフトがあるなら、サムネイルでもいいなーと迷ってます。
とりあえずDLしときました。
ありがとうございました。

お礼日時:2001/05/17 22:38

う~ん、結果としていえばあなたがどう見せたいのか


ということにつきます。

複数枚の写真をひとつながりの連作として見せたいのか、
一枚一枚の写真を単独で見せたいのかということがまずひとつ。

みせたい写真の量がどの程度あるのか、そしてそれは増えていくのか
ということがひとつ。

このあたりを絞ることによっておのずと見せ方は変わってくると思います。
僕も写真のサイトをやっていますが、経験上小さい画像を先に見せるやりかただと、
大きい画像を見ないで帰ってしまう人もいることも頭に入れておいた方がいいと思います。

なお、僕はどう見せたいかによって僕にできるレベルで複数のやり方を使っています。

PS.
僕のつたないサイトがもし参考になるようでしたらということで、
アドレスを入れておきます。

参考URL:http://www11.big.or.jp/~octacore/
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
確かにサムネイルだけ見て帰ってしまう事ってありますよねー。
実は私もたまーにやってます。(^^;)
写真によって見せる方法を変える、というのもおもしろいですね。
oniさんのHPも見させてもらいました。
「女々しい奴」を読んで、私はあんまり「日々の記録」的な写真は撮らない方
だし、日記も全然付けたことがないので、もしかして男っぽいのかしらん?と
思ってしまいました(笑)
あとモノクロ写真が気に入りました。
それとアラーキー、私も好きです。
ありがとうございました。

お礼日時:2001/05/17 23:05

何かの本で読んだのですが、8秒間全く表示がないと(6秒だったかな?)人は他のページへ移ってしまうそうです。


どの方法を使うにしてもこれまず守る必要があると思います。

私が作るとしたら、(写真の枚数にも拠りますが)テキストとアイコン(GIFです。)になる写真を同時に表示し、クリックで拡大する方法を使うと思います。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
私もその話、聞いた事があります。
「たった8秒間?」と思ってしまいそうですが、待ってるとものすごく長く
感じるんですよねー。
とにかく「短時間表示」を心がけたいと思ってます。
ありがとうございました。

お礼日時:2001/05/17 22:43

見る方からしたらサムネイルがある方が見やすいです。


見せる方はどうしても「こう見て欲しい」という思い入れがあるのですが、めんどくさいと思われて途中でさようならされるのは最悪ですからね。
文字をクリックしてというのは見る気がしません。
方法としてはこんな感じが基本でしょうね。
1 文字でいくつかのカテゴリーを作り、クリックでジャンプ。
2 ジャンプした先は、サムネイルが画面をスクロールしなくても見れるぐらいの数が表示。
3 サムネイルをクリックすると大きな写真が。
付録として大きな写真から、次の写真へいくことが出来るとか、写真は別画面に表示するとか工夫は様々です。
ぜひ他の人のHPをみて参考にすることをお勧めします。自分で見て、見やすいと思うものがあなたに合ったHPです。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
やっぱりサムネイルですかー。確かに使ってるHPは多いですよねー。
また他のHPも見て回って勉強してきます。
ありがとうございました。

お礼日時:2001/05/17 22:29

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q縮小する写真のサイズはどれがベスト?

掲示板に写真を掲載することになり、縮小専用のフリーソフトをダウンロードしました。

元の写真は 『567KB』、掲示板の写真の制限は15,000バイトです。

縮小するサイズは様々あり、
『1280×1280、1024×1024、800、640、400、320、160・・・』
とありますが、この場合、どのサイズを選ぶのが一番妥当でしょうか?

教えてください。

Aベストアンサー

ビットマップ画像であれば画素数(画像サイズ)と色数からファイルサイズを計算できます。

たとえば、横640pixel×縦480pixelで8ビットカラー(256色)の場合、
640×480×1=307200バイト(307kバイト)になります。
フルカラー(24ビットカラー)の場合3倍の921kバイトになります。

実際に使用している色数によって変動しますのであくまで概算ですが。


こんな感じでファイルサイズから画像サイズを逆算しては如何でしょう…

Qサムネイル画像の表示途中でそのサムネイル画像をクリックすると後から表示されるサムネイルが表示されない。

winXP PRO IE6.0SP1です。

とあるHPを作成していますが、サムネイル画像(約100画像)をクリックすると別ウィンドウが出る様にしています。

サムネイルが全部表示される前にクリックすると小窓が出て画像は表示されますが、そこから後に出るサムネイルが表示されずフリーズしてしまいます。


<a href="javascript:void(0);" onclick="window.open('./******/***.jpg','win1','width=400,height=400');" menubar=no toolbar=no locaction=no status=no><img src="./small/***.jpg" height=50 border=0></a>


他のPCで確認しても同じ状態です。

サムネイル画像が出ている途中でその画像をクリックしてもフリーズしない方法の解除方法はありますでしょうか?

宜しくお願い致します。

Aベストアンサー

再び、です。
<HEAD>タグ内にjavascriptを埋め込む方法は以下の通りです。

<HEAD>
<script language="javascript">
<!--
function subWin(n,wn){
window.open(n,wn,"width=400,height=400,scrollbars=no,location=no,menubar=no,status=no");}
//-->
</script>
</HEAD>
-----------
<a href="javascript:void(0);" onclick="subWin('./******/***.jpg','win1')"><img src="./small/***.jpg" height="50" border="0"></a>

開きたい画像のパスと、ウィンドウ名を、onclickの所で指定する形です。
こういう形であれば、ウィンドウのサイズやメニューバーの非表示などは、個別でひとつひとつ設定しなくてもよくなるので、ソースがぐっと軽くなります。

つまり、その次の画像では、

<a href="javascript:void(0);" onclick="subWin('./******/***2.jpg','win2')"><img src="./small/***2.jpg" height="50" border="0"></a>

という形で指定してやれば良いのです。

ちなみに、以下のサイトの『JavaScript例文辞典』で、サブウィンドウ展開の色々な形がサンプルであるので、ご参考にしてみてください。

参考URL:http://www.shiojiri.ne.jp/~openspc/

再び、です。
<HEAD>タグ内にjavascriptを埋め込む方法は以下の通りです。

<HEAD>
<script language="javascript">
<!--
function subWin(n,wn){
window.open(n,wn,"width=400,height=400,scrollbars=no,location=no,menubar=no,status=no");}
//-->
</script>
</HEAD>
-----------
<a href="javascript:void(0);" onclick="subWin('./******/***.jpg','win1')"><img src="./small/***.jpg" height="50" border="0"></a>

開きたい画像のパスと、ウィンドウ名を、onclickの所で指定する形です。
...続きを読む

Q縮小した写真を元のサイズに戻す。

質問します。
1、写真を縮小したのですが、元のサイズに戻すこと出来ますか?
  方法を教えてください。

2、原画を残したまま縮小することできないのですか?
  出来るのでしたら教えてください。

  よろしく。

Aベストアンサー

1 無理と思います。(元の画像にはならない)
ファイルは上書き保存すると元のファイルは消えます。
2 コピーして、それをリサイズします。

Qポイントしたサムネイルの画像がメイン画像に表示されるようにしたい。

よろしくお願いいたします。
よく写真を紹介するページで目にするのですが、メインの画像があってその隅に小さな画像が並んでいてそれらをポイントするとメインの画像がポイントされた画像に変わる仕掛けを目にします。
同じようなものを作りたいのですが、どのような方法があるかご教示いただけますと幸いです。
因みに当方の環境はDreamweaver4、Fireworks4でホームページを作っています。

Aベストアンサー

スワップイメージのことかと思います。

参考
ミスティーネット・JavaScript講座
http://java.misty.ne.jp/swap.html

スワップイメージ
http://wakabano.cool.ne.jp/dream/higher/behavior/beh_07.html

Q普通サイズの写真を縮小したいです

初心者です。
ある入れ物に普通サイズの写真が入らないので、縮小したいのですが、どのようにすればいいのか分かりません。
・スキャナーを購入する予定ですが、どのスキャナーでも良いのでしょうか?
・スキャナーを購入時に、写真のサイズ変更するためのソフトも購入を考えていますが、どのソフトがいいのか分かりません。(出来るだけ安く考えています)(フリーソフトは使いたくありません)
・注意点があれば教えて下さい。
宜しくお願いします。

Aベストアンサー

私は、3年前のキヤノンのスキャナーを使用していますが写真の焼き増しやサイズ変更(私は引き伸ばしばかりですが)非常に便利です

現在は2400dpi(スキャンの解像度です)が主流のようですが、原寸で焼き増しする場合で360dpi、2倍に引き伸ばす場合でも720dpiの設定が最適だと思います

スキャナーはどの機種でも良いと思いますがエプソンかキヤノンが良く売れているようです。
キヤノンでお勧めなのはCanoScan Lideという機種
これは非常に薄型で電源をつなぐ必要もありません。使うときだけ付属のケースから取り出してUSBをつなぐだけで使用できます。もちろん欠点もあります、奥行きのあるもののスキャンが苦手です。例えば腕時計や本を開いた時の中央の部分など。
エプソンはわかりません

サイズ変更のソフトは特に必要ないでしょう
スキャナーに付属のソフト何でもできるはずです

メーカーのページです
http://cweb.canon.jp/canoscan/lineup/index.html

「お勧めスキャナ選び」や「スキャナ活用ガイド」が面白いと思います

私は、3年前のキヤノンのスキャナーを使用していますが写真の焼き増しやサイズ変更(私は引き伸ばしばかりですが)非常に便利です

現在は2400dpi(スキャンの解像度です)が主流のようですが、原寸で焼き増しする場合で360dpi、2倍に引き伸ばす場合でも720dpiの設定が最適だと思います

スキャナーはどの機種でも良いと思いますがエプソンかキヤノンが良く売れているようです。
キヤノンでお勧めなのはCanoScan Lideという機種
これは非常に薄型で電源をつなぐ必要もありません。使うときだけ付属のケース...続きを読む

Qhtml,cssでサムネイルにマウスオーバーすると、離れた位置に拡大画像を表示する仕組みを作りたい。

初めまして、ホームページ制作勉強中の初心者です。

■サムネイルにマウスオーバーすると、離れた位置に拡大画像を表示する
■サムネイルからのマウスアウトで、最初の拡大画像に戻す。

http://bitd.webcrow.jp/rollover/DW/rollover.html
といった上記のようなトップイメージを作ったのですが
拡大画像はカチッと切り替わるのではなく、ふわっと切り替えたいです。
しかし、思うようにhtml,cssが組めず悩んでおります。

(切り替わりの感じとしては↓下記サイト↓のようなイメージです。)
http://blog.net-king.com/downloads/imagenavigation/

最下位が提案したhtml,cssですが、どこをどのように、触ればいいのか
ご教授いただければ幸いです。

(あるいはjsを使って
http://blog.net-king.com/2010/10/06/%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%99%e3%82%8b%e3%81%a8%e3%83%a1%e3%82%a4%e3%83%b3%e7%94%bb%e5%83%8f%e3%81%8c%e5%88%87/

http://tenderfeel.xsrv.jp/javascript/271/
の下のほうにある「複数設置+クロスフェード」
を改変して同じようなものを作る。でもOKです。)

どうか、よろしくお願い致します。


■html

<head>
<title>サムネイルにマウスオーバーしたら画像を切り替える</title>
<link rel="stylesheet" href="css/rollover.css" type="text/css" media="all" />
</head>
<body>
<div id="container">
<ul>
<li><img src="images/B2.jpg" width="316" height="45" alt="01"
onMouseOver="document.mainImg.src='images/B1.jpg'"
onMouseOut="document.mainImg.src='images/A1.jpg'"></li>

<li><img src="images/C2.jpg" width="316" height="45" alt="02"
onMouseOver="document.mainImg.src='images/C1.jpg'"
onMouseOut="document.mainImg.src='images/A1.jpg'"></li>

<li><img src="images/D2.jpg" width="316" height="45" alt="03"
onMouseOver="document.mainImg.src='images/D1.jpg'"
onMouseOut="document.mainImg.src='images/A1.jpg'"></li>

</ul>

<p class="main"><img src="images/A1.jpg" width="950" height="auto" alt="01" name="mainImg"></p>
</div>
</body>
</html>




■css

@charset "UTF-8";
/* CSS Document */

body, div, ul, li, img, a {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
#container {
width: 950px;
margin: 0 auto;
}
p.main {
width: 950px;
height: auto;
padding: 0;
}
ul {
width: 950px;
margin: 0;
}
ul li {
float: left;
width: 316px;
height: 45px;
margin-left: 0;
}
img {
cursor: pointer;
border: none;
vertical-align: bottom;
}

初めまして、ホームページ制作勉強中の初心者です。

■サムネイルにマウスオーバーすると、離れた位置に拡大画像を表示する
■サムネイルからのマウスアウトで、最初の拡大画像に戻す。

http://bitd.webcrow.jp/rollover/DW/rollover.html
といった上記のようなトップイメージを作ったのですが
拡大画像はカチッと切り替わるのではなく、ふわっと切り替えたいです。
しかし、思うようにhtml,cssが組めず悩んでおります。

(切り替わりの感じとしては↓下記サイト↓のようなイメージです。)
http://blog...続きを読む

Aベストアンサー

一応確認した手前、サンプルだけあげておきます

<style>
#mainImg img{position:absolute;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
var org_src="1.jpg";
var list=['2.jpg','3.jpg','4.jpg'];
var speed=1000;
$('ul.menu li').on('mouseover mouseout',function(e){
var num=$('ul.menu li').index(this);
var img_src=(e.type=="mouseover")?list[num]:org_src;

$('#mainImg img').first().css('z-index',1);
$.when(
$('<img src="'+img_src+'">').insertBefore($('#mainImg img').first()).css('z-index',2).hide().fadeIn(speed)
).done(function(){
$('#mainImg img').each(function(){
if($('#mainImg img').index(this)!=0) $(this).remove()
})
});
});
});
</script>
<ul class="menu">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p id="mainImg">
<img src="1.jpg">
</p>

※liに対応するlistを設定しておきます
考え方はリストのmouseoverしたときに所定のimgの前に画像を差し込み深度を調整。
一度けして徐々に表示し、表示が終わった時点で元の画像を削除します
mouseoutの際にはorg画像を表示します

一応確認した手前、サンプルだけあげておきます

<style>
#mainImg img{position:absolute;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
var org_src="1.jpg";
var list=['2.jpg','3.jpg','4.jpg'];
var speed=1000;
$('ul.menu li').on('mouseover mouseout',function(e){
var num=$('ul.menu li').index(this);
var img_src=(e.type=="mouseover")?list[num]:org_src;

$('#mainImg img').first().css('z-index',1);
$.when(
$('<img src="'+img_src+'...続きを読む

Q保存されている写真サイズの縮小方法

まったくのPC素人です。よろしくお願いします。
証明写真を撮り、写真屋さんでフロッピーに入れてもらいました。それをPCで開いて印刷したところ、写真1枚がハガキほどの大きさです。3cm×4cmに印刷したいのですが、どうしたら縮小できるのでしょうか。
ページ設定もサイズ変更はできないし、途方にくれています。。。

Aベストアンサー

もしWordがあれば簡単にできます。

「挿入」→ 「図」 → 「ファイルから」

で写真を読み込んで、写真の上で右クリック
プロパティーを開いて大きさを調整すれば
簡単にできると思います。

もし、証明写真だけに限るのであれば
参考URLのソフトがお勧めです。

参考URL:http://www.vector.co.jp/soft/win95/art/se331013.html

Qサムネイル画像の画像サイズについて。

【htmlで使用する画像ファイル】
1.png(800*800)
2.png(800*800)

と二つの画像ファイルがあります。

これを以下手順でサムネイル画像を作成しました。
・PNGGauntlet で画像圧縮
・photoshopCS4で 画像サイズを半分(400*400)にして、サムネイル画像として保存(頭にtを付ける。)

【できたサムネイル画像】
t1.png(400*400)
t2.png(400*400)

【質問】
元の画像(tなし)より、サムネイル画像(tari)のほうがサイズが大きくなるのです。
 元の画像サイズ < サムネイル画像サイズ

1.png(800*800) 100k
t1.png(400*400) 200k

2.png(800*800) 100k
t2.png(400*400) 200k

PNGCauntletで圧縮したものを、サムネイル化しているのにサイズが大きくなっています。
なぜこのようなことが起こるのでしょうか。photoshopのせいなのでしょうか。

このサイズの大きくなった画像を、htmlのimgタグのサムネイル画像として使用するべきなのでしょうか?

ご教授よろしくお願いします。

【htmlで使用する画像ファイル】
1.png(800*800)
2.png(800*800)

と二つの画像ファイルがあります。

これを以下手順でサムネイル画像を作成しました。
・PNGGauntlet で画像圧縮
・photoshopCS4で 画像サイズを半分(400*400)にして、サムネイル画像として保存(頭にtを付ける。)

【できたサムネイル画像】
t1.png(400*400)
t2.png(400*400)

【質問】
元の画像(tなし)より、サムネイル画像(tari)のほうがサイズが大きくなるのです。
 元の画像サイズ < サムネイル画像サイズ

1.png(800*800) 100k
t1.png(...続きを読む

Aベストアンサー

 サムネイルの目的は、データ転送量を少なくして、ネット負荷を軽減させたりページ表示を早めるためです。圧縮率を調整してデータ量を少なくしたほうが良いでしょう。ソフトの能力でそれができないなら、単に表示画像を小さくするほうが良いです。特に印刷やスマートホンでの利用が考えられるページでしたら、それらの解像度はパソコンのディスプレイより高いため画像が荒れて表示されます。
 <img src="./images/png/1.png" width="400" height="400" alt="何たらが何とかしている"><!-- 画像実サイズは800×800 -->
 とか。スタイルシートで画像を合わせているときなど
img{display:block;width="100%" height="auto";}
 とかでは、大きくなってもきれいに見えますし・・

Qデジカメ写真のファイルサイズを縮小したい

どなたか教えて頂ければと思います。
デジカメで撮影した写真サイズを
縮小したいと思っています。
目的はオークションに写真をアップロードする為です。昔はProjmkerというソフトを使っていましたが、
使いにくいので他に良いフリーソフトウェアをご存知でしたら、教えて頂ければと思います。

以上よろしくお願い致します。

Aベストアンサー

縮小専用ではどうでしょうか
ドラッグ&ドロップするだけで、簡単に縮小されたファイルを作ることが出来ます。

参考URL:http://www.vector.co.jp/soft/win95/art/se153674.html

QCSSで菱形の画像サムネイルを表示し、クリックで元画像を表示させたい

タイトル通りです。
ギャラリーホームページを作っています。
菱形のサムネイルを並べ、クリックしたら元の画像が表示されるようにしたいと思っています。
jQuery?を使えるのが一番なのですが、うまく適用せず、よく分かりませんでした。
CSSでタイトルのような事をするためには、どのようにすればいいでしょうか?

Aベストアンサー

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
</ul>

css
li{
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
transform: rotate(45deg);
margin: 40px;
float: left;
}
li img{
position: absolute;
width: 250px;
height: 250px;
transform: rotate(-45deg) translate(0%, -120%);
left: 100%;
top: 100%;
}

親で正方形を45度傾けたマスクを作り
imgで傾いちゃった画像を元に戻し、
rotate(-45deg)
適当な位置に調整しています。
translate(0%, -120%);
left: 100%;
top: 100%;
クリックすれば、リンクに張られたURLが開きます。

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a><...続きを読む


人気Q&Aランキング

おすすめ情報