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

このQ&Aのポイント
  • webページ作成初心者のための不定形画像の背景画像設定方法とは?
  • 複数の画像とキャプションを背景画像におさめるブログ風のページ作成方法を解説
  • 写真のサイズが不定形な場合にも背景画像を設定する方法とその具体的な手順について
回答を見る
  • ベストアンサー

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

webページ作成の初心者です。 dreamweaverCS4で個人のサイトを作っています。 ブログ風のページで、複数の画像とそのキャプションを 一枚一枚背景画像におさめたいです。 イメージとしては、ポラロイドカメラのように 一つの枠の中に画像が一枚と短いコメントが一言ずつ入って、 それを複数枚並べていく感じです。 掲載しなければいけない写真がすでに数百点に及ぶのですが、 問題はその写真一枚一枚の縦横のサイズがすべて不定形なのです。 そのような写真の背景にさらに不定形の背景画像を設定するにはどうしたらよいでしょうか? 4隅と、その中間の繰り返し画像が必要なのはイメージ出来ますが、 肝心のタグをどうしたらいいのか分かりません。 それをCSSを使って定義するには具体的にどのようにしたらよいか、 教えてください! 宜しくお願いします。

  • CSS
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>縦横サイズが非常にまちまちです。 ≫一つの枠の中に画像が一枚と短いコメントが一言ずつ入って、それを複数枚並べていく感じです。 >このような無理難題で申し訳ないですが、対処法はあるのでしょうか? 可能です。  写真枠(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で拡大画像を表示させてもよい。    

chiaki_m
質問者

補足

divで個別に縦の幅を指定したらできました! 有り難うございます。 あと、度々ですみませんが、 サムネイルというのは小さめの画像を一つのページにまとめて表示しておいて、 見たい画像をユーザーがクリックすることで拡大画像が表示されるということでしょうか? 今作っている写真のページは、素のサイズの写真を一覧表示したかったので わざわざクリックをして拡大表示ということはしない予定です。 それとも、見え方は一緒でもこうした方が負荷がかからない、という意味でしょうか。 今まで<img>だけで配置していましたが、前述の<a href>はなんの意味があるのでしょうか。 (</a>で区切ってないのを他のサイトでも見つけて不思議に思っていました。)

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

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で、ディスプレイ/ウィンドウ幅に合わせて一列に並ぶコマ数は変わります。     

chiaki_m
質問者

補足

回答ありがとうございます。 その通りにやってみたのですが、また問題が一つ。 float:leftにするとウインドウ幅に合わせて2つずつ並んだのですが、 左側にくる写真の縦のサイズが右側の写真より大きいと 次の行にくる一枚目の写真が1枚分のスペースを空けて右側に表示されます。 ならば全ての写真の縦サイズだけでも合わせてやるといいのかとも思ったのですが、 写真に入るキャプションも1行だったり2行だったり3行だったりときています。 今回、サイトのリニューアルなるので、文字・写真の素材はすでにあって、 さらにあまり知識のない人が写真を好き勝手トリミングしたことにより 縦横サイズが非常にまちまちです。(横サイズは比較的そろっていますが…) このような無理難題で申し訳ないですが、対処法はあるのでしょうか?

関連するQ&A

  • 背景画像を2枚使いうまく繰り返す方法

    htmlとcssでホームページを作っています。 背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。 で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。 最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。 ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。 なので、htmlとbodyにそれぞれ背景をつけたんですが、 今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか?

    • ベストアンサー
    • HTML
  • タイトルのところへ背景画像を入れたい

    ブログのデザインはカストマイズ出来るとありますね。(goo ブログ) お恥ずかしい話、CSSについて知識がありません。ブログのタイトル のところへ、背景画像を挿入したいのです。 「GOOブログでCSS編集」を見ると、ページ全体の背景色、背景画像の設定とあり、どうもそこから背景画像を挿入したらいいようなのだが、素人の悲しさ、どこをどうしたらいいのやら、さっぱり分かりません。タイトルのところへ画像を入れるやり方、教えてください。

  • CSSで背景画像を設定する

    <html> <head> <title>--------</title> <style type="text/css"> body{background-image:url(image/-----.jpg)} </style> </head> ~~~ 画像を設定しましたが別のファイルではこの設定で表示できましたがこのファイルでは背景画像が設定できません。

    • ベストアンサー
    • HTML
  • ページと背景画像との境界線の影の付け方

    同じような質問なのですが少し違うのでご質問させていただきました。 ページと背景画像との境界線に影をつけたいのですが 背景の画像はどんなモニターのサイズでも画像の中心やデザインを変えたくなかったので http://webdesignrecipes.com/full-page-background-image-sample-01.html こちらのサイトを参考にcssで背景画像を配置しています。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像の回り込みと、見出しの背景画像について

    Wordpressで見出しの背景に画像を設定していて、メディアを追加でイメージを設置し、設置したイメージを左寄せにした場合、見出しと段落は回り込むのですが、見出しに設定してある背景が画像の裏に残ってしまうのを回避するCSSの指定はどうすれば良いでしょうか?

    • 締切済み
    • CSS
  • 背景画像を下まで見せたい

    写真・イラストのギャラリーページを作ってるんですが、背景として設定した画像をスクロールして下まで見れる設定にするにはどうしたらよいのでしょうか? 画面設定は1024×768、画像自体は1000×600pixの大きさです。 現在は以下の方法で設定してます。 <STYLE type="text/css"> <!-- BODY{ background-image : url(○○○○○○); background-attachment : scroll; background-repeat : no-repeat; } アドバイスの程、宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 2つ画像を背景にするスタイルシートってある?

    1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!--    BODY {       background-image:素材のURL;       background-position:0% 100%;       background-repeat:no-repeat;       background-attachment:fixed;     } --> </STYLE>

    • 締切済み
    • CSS
  • 背景設定をするとグローバルナビ・テキストが消えてしまいます

    CSSで背景を設定しますと グローバルナビ・テキストが 消えてしまいます。 背景でなく、前面に画像が貼られているような イメージです。 どのように設定したらよいのでしょうか。 宜しくお願いします。

  • cssで背景画像が貼れない

    background-image: url(××.gif) cssで背景画像を表示させたいのですがこのタグだとどうしても 表示されません。 画像は同じフォルダにあります。 どなたかご教授願えませんでしょうか お願いします。

  • DreamweaverCS4で表の背景画像

    DreamweaverCS4を使用しています。 以前は、Dreamweaver8を使用していました。 8では、表の背景に画像を表示するときに、プロパティーに 「表の背景」のところにイメージを表示できるようにフォルダ参照ボタンがあったのですが、CS4には背景にはカラー設定しかありません。 なぜでしょうか?直接HTMLのコードに下記のように書き込まなければいけなくなってしまったのでしょうか? background="画像.gif" それとも、何か設定があるのでしょうか? どなたかわかる方よろしくお願いします。

    • ベストアンサー
    • HTML