不定形画像の背景画像設定

解決済

質問者：chiaki_m
質問日時：2009/12/27 18:48
回答数：2件

webページ作成の初心者です。
dreamweaverCS4で個人のサイトを作っています。
ブログ風のページで、複数の画像とそのキャプションを
一枚一枚背景画像におさめたいです。
イメージとしては、ポラロイドカメラのように
一つの枠の中に画像が一枚と短いコメントが一言ずつ入って、
それを複数枚並べていく感じです。

掲載しなければいけない写真がすでに数百点に及ぶのですが、
問題はその写真一枚一枚の縦横のサイズがすべて不定形なのです。
そのような写真の背景にさらに不定形の背景画像を設定するにはどうしたらよいでしょうか？

4隅と、その中間の繰り返し画像が必要なのはイメージ出来ますが、
肝心のタグをどうしたらいいのか分かりません。
それをCSSを使って定義するには具体的にどのようにしたらよいか、
教えてください！

宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2009/12/28 08:47

＞縦横サイズが非常にまちまちです。

≫一つの枠の中に画像が一枚と短いコメントが一言ずつ入って、それを複数枚並べていく感じです。
＞このような無理難題で申し訳ないですが、対処法はあるのでしょうか？

可能です。
　写真枠(ul#photoList li)を縦横サイズを固定したブロック(display:block)にすること。
　画像とコメントを話したくない場合は
<li>
　　<div>
　　　　<p>
　　　　　　<a href="./photo/001.jpg"><img src="./thumbnail/001.jpg" width="200" height="150" alt="富士山">
　　　　</p>
　　　　<p class="comment">芦ノ湖から見た富士山</p>
　　</div>
</li>
　とdivで囲んで配置を指定してもよいでしょう。

★素の画像を大量に読み込ませるのは負荷が大きすぎるので、サムネイルを用意してそれから素の画像にリンクさせるか、javscriptで小窓を表示させるかがよいとは思います。CSSで拡大画像を表示させてもよい。
　
　

この回答への補足

divで個別に縦の幅を指定したらできました！
有り難うございます。

あと、度々ですみませんが、
サムネイルというのは小さめの画像を一つのページにまとめて表示しておいて、
見たい画像をユーザーがクリックすることで拡大画像が表示されるということでしょうか？
今作っている写真のページは、素のサイズの写真を一覧表示したかったので
わざわざクリックをして拡大表示ということはしない予定です。
それとも、見え方は一緒でもこうした方が負荷がかからない、という意味でしょうか。

今まで<img>だけで配置していましたが、前述の<a href>はなんの意味があるのでしょうか。
（</a>で区切ってないのを他のサイトでも見つけて不思議に思っていました。）

補足日時：2009/12/29 10:13

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2009/12/27 20:23

HTML自体は、文書構造どおり書けばよいです。

[サンプル}
<ul id="photoList">
　<li>
　　<p><a href="./photo/001.jpg"><img src="./thumbnail/001.jpg" width="200" height="150" alt="富士山"></p>
　　<p class="comment">芦ノ湖から見た富士山</p>
</li>
・・・以下同様
</ul>
サイズデータ、およびサムネイルの作成はimagemagickを使って一挙に可能です。サーバーにimagemagick/perlMagickがあれば、動的に可能ですが、ここはローカルでの方法
1)　imageMagickを使って、サムネイルを作成。
2)　imgemagickを使って画像名とそのサイズを取得しテキストファイルに書き出す。--perlで処理するのが楽ですが、コマンドプロンプトからも可能
3) テキストエディタのの置換処理を使って、画像ファイル名とサイズリストからHTMLを作成。

CSS)
ul#photoList{
display:block;
position:relative;
width:80%;
margin:0op;
psdding:0px;
}
ul#photoList li{
display:block;
list-style:none;
margin:5px;
padding:10px;
background-color:white;
border-top:black 1px solid;
border-left:black 1px solid;
border-right:rgb(60,60,60) 1px solid;
border-top:rgb(60,60,60) 1px solid;
text-align:center;
float:left;
}
ul#photoList li p.comment{
text-align:left;
text-indent:1em;
}
とか・・・・
　floatで、ディスプレイ/ウィンドウ幅に合わせて一列に並ぶコマ数は変わります。

　　　　

この回答への補足

回答ありがとうございます。
その通りにやってみたのですが、また問題が一つ。
float:leftにするとウインドウ幅に合わせて2つずつ並んだのですが、
左側にくる写真の縦のサイズが右側の写真より大きいと
次の行にくる一枚目の写真が1枚分のスペースを空けて右側に表示されます。
ならば全ての写真の縦サイズだけでも合わせてやるといいのかとも思ったのですが、
写真に入るキャプションも1行だったり2行だったり3行だったりときています。

今回、サイトのリニューアルなるので、文字・写真の素材はすでにあって、
さらにあまり知識のない人が写真を好き勝手トリミングしたことにより
縦横サイズが非常にまちまちです。（横サイズは比較的そろっていますが…）
このような無理難題で申し訳ないですが、対処法はあるのでしょうか？

補足日時：2009/12/28 05:19

通報する