【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.11593　サムネイル

[すずきみのり] [ブラウザ]　 11/06/27 (月) 10:41

初めまして。植物園のボランティアです。
初心者講習を受けただけで、見よう見まねで、植物園のホームページを作っております。今年、パソコンを変えてから、サムネールが正しく並ばなくなりました。140x92というサイズで5列の画像を並べていて、順次増やしていってます。Windows7・IE9にしたころからサムネイルに空白が出来るようになりました。画面表示を４０％まで下げると整列しますが、それ以上にすると空きができます。
１００％で整列させるにはどうしたらいいのでしょうか。
ご指導よろしくお願い申し上げます。

▼

▼

▼

　 No.11594　Re:サムネイル

[atom] [ブラウザ]　 11/06/27 (月) 12:08

これは、画像の左右に余白が開いてる事を言ってますかねぇ？

もしそうなら、CSSの設定に問題があります。

UL.thumbnail LI {
MARGIN: 0px 10px 10px 0px; WIDTH: 140px; FLOAT: left; HEIGHT: 200px
}

と記述されてるところを

UL.thumbnail LI {
MARGIN: 0px 0px 10px 0px; WIDTH: 140px; FLOAT: left; HEIGHT: 200px
}

と記述すれば左右ピッタリにくっつきます。

違った場合はもう少し詳しく説明してください。

▼

▼

▼

　 No.11599　Re:サムネイル

[すずきみのり] [ブラウザ]　 11/06/28 (火) 11:18

ご指導、ありがとうございます。
私の、説明不足で申し訳ありません。
左右の余白をなくすのではなく。一列の中に、五枚を指定してあるにもかかわらず、二枚であったり3枚であったり、と、穴あき状態が起きることで困っています。
画面表示を50％まで縮小すると、五枚が並びますが、これでは画像が小さすぎて、よくわかりません。

基本的に、何も分かっておらず、ほかの方のページのいいとこどりをしながら作っているページなので、大きな欠陥も考えられます。もしかしたら、私のパソコンの画面上だけの問題で、ほかの方のパソコンでは正常に見えてるという可能性もあるかもしれませんが・・・
50％で並んだ画面と、穴あき画面の画像を添付してみます。
フォトショップ・エレメンツ９のフォトマージュの使い方がまだ習得できず、片方縮小になってしまって不揃い画像ですが、右が100%のものです。ばらばらと空いています。
ややこしい質問で、申し訳ございません。

▼

▼

▼

　 No.11600　Re^2:サムネイル

[atom] [ブラウザ]　 11/06/28 (火) 11:55

私はIE8.0で確認しましたが、特に指摘されてるような崩れは発生しません。
でも、そちらもIE8.0のような気がしますが。

念のため、そちらのブラウザでページ表示後、「更新」ボタンを押してみてください。
それで正しく表示されるなら最新情報でなかったということになります。


CSSを確認しますと、
UL.thumbnail LI {
MARGIN: 0px 10px 10px 0px; WIDTH: 140px; FLOAT: left; HEIGHT: 200px
}

と指定されてるので横幅が「140px」、高さが「200PX」のボックス内に画像と文字が収まってなければなりません。

私のIEでは崩れもなく正常に表示されますが、そちらの添付画像では高さが若干足りないような気がします。
その為画像の配置崩れが起きるのです。


私では正常なのにそちらではなぜ崩れるのかの原因がはっきりわかりませんが、もし、どうしても．．というなら、この高さ「HEIGHT: 200px」を「HEIGHT: 300px」にしてテストしてみるといいでしょう。

▼

▼

▼

　 No.11601　Re^3:サムネイル

[すずき] [ブラウザ]　 11/06/28 (火) 14:01

たびたびの、幼稚な質問にお答えくださいましてありがとうございます。
IEのバージョンについては、9を使ってみて不都合があったため、8に戻したことを忘れていました。

ほかの方の画面では、ちゃんと表示されているとのこと、安心しました。平均日に5000のアクセスがあるので、あの乱れた画面は不快だろうな・・と気になっておりました。
そして、今、お教えいただいた通り、
>「HEIGHT: 200px」を「HEIGHT: 300px」にして、を試しましたら、1列3枚になってしまい、スクロールが煩わしい画面になりましたので、数字をいろいろ入れ替えてみました。
結果、どういう訳か、もともとの数字で、1列4枚ですが、私のパソコンでは、きれいに並びました。5枚並べたいところですから、これから、もう少し、数字の入れ替えを試してみたいと思います。

素人からは、ソース画面しか見えないのに、先生は、どうして、ソースの更に裏側までお分かりになるのか・・すごいです。

おかげさまで納得できました。心から感謝します。

▼

▼

▼

　 No.11602　Re^4:サムネイル

[atom] [ブラウザ]　 11/06/28 (火) 17:39

> 素人からは、ソース画面しか見えないのに、先生は、どうして、ソースの更に裏側までお分かりになるのか・・すごいです。

それはほとんどのページを手動で作成してるからです。
（ソフトに頼って、自動で作成してしまうと、知識は付きません。）

まだまだなところもありますが、基本的な部分をしっかり押さえてるからではないでしょうか？


余談はさておき、
ひとつ思いついたことがあります。

UL.thumbnail LI {
MARGIN: 0px 10px 10px 0px; WIDTH: 140px; FLOAT: left; HEIGHT: 200px
}


と記述されてるところに、次のように、「display:block;」を追記してみてください。

UL.thumbnail LI {
display:block; MARGIN: 0px 10px 10px 0px; WIDTH: 140px; FLOAT: left; HEIGHT: 200px
}

ひょっとしたら改善できるかもしれません。

▼

▼

▼

　 No.11603　Re^5:サムネイル

[すずき] [ブラウザ]　 11/06/28 (火) 21:11

素人の質問に、根気よくおつきあいくださいまして、本当に頭が下がります<m(__)m>
お教えいただいた通り、「display:block;」を付け加えてみました。1列5枚に戻りましたが・・・やはりもとのように、空白が出てしまいます。

関係があることかどうか・・・。
私は、視力が弱く、個人設定から、ディスプレイを大（L）150に設定してパソコンを使っています。
このことが、影響して、私の画面のみ、そろわないサムネイルになるということが、考えられるでしょうか。

もしそのことが原因であり、ほかの人の画面には正常な指定位置に並んでいるのであれば、気にせず、このまま続けていきたいと思っています。

追記

今、一度ログオフして、文字を小サイズにしてみたのですが、サムネイルには、影響はありませんでした。

▼

▼

▼

　 No.11604　Re^6:サムネイル

[atom] [ブラウザ]　 11/06/28 (火) 23:39

なるほど、
それは関係するでしょうね。

文字が大きくなる分、縦幅（高さ）が大きくなり、指定したボックスの高さ「height:200px」を超えるのかもしれません。

> 今、一度ログオフして、文字を小サイズにしてみたのですが、サムネイルには、影響はありませんでした。

これって逆ですよね。
文字を小サイズにした後、ログオフ、
その後ログオンして確認．．

と言う手順が一番で、

ログオフ後文字サイズを小さくしても確認にはなりません。


また、その状態で、「height:300px;」などにして確認してみるという手もあります。


なんとかうまく表示できればいいのですが．．

▼

▼

▼

　 No.11605　Re^7:サムネイル

[すずき] [ブラウザ]　 11/06/29 (水) 22:08

お礼が遅くなり申し訳ございませんでした。
今日は、ボランティアの日で、仕事先は片道二時間の距離にあるのです。と、まずは言い訳をしてしまいましたが・・。

先生、うまくいきました！
前回の書き込みは、私の書き方がまずくて、前後逆になってしまいましたが、もちろん、先生のおっしゃるとおりにしておりました。
そして、先ほど，まず小のサイズで1列5枚を確認し、更にheightを300にしてから大に戻したところ、無事1列5枚が私の画面でも表示されるようになり、ほっとしました。
　
display:block; の追加と、今回のご指導で、無事、自分の希望がかないました。
おかげさまで、今日撮ってきた画像を、また心置きなく追加することができます。

月謝も払わず、こんなに丁寧にお教えいただいて、よろしいのでしょうか。本当にありがとうございました。

また、よろしくお願い申し上げます。感謝<m(__)m>

▼

▼

▼

　 No.11606　Re^8:サムネイル

[atom] [ブラウザ]　 11/06/29 (水) 23:50

> 月謝も払わず、こんなに丁寧にお教えいただいて、よろしいのでしょうか。


全然問題ありません。
私は手間もかけず答えられるようなことしかしてませんから。

込み入った質問や環境違いによってどうしても解決できないこともあります。

今回は今までの経験から思いついたことを提示するだけで解決できただけです。

結果的によかったと思います。

▼

▼

▼

　一覧 / 詳細