妙高市や上越市に縁のある新潟県民がホームページ制作に関してつぶやくサイト

MENU [+]閉じる [×]
自動整列プラグイン【jQuery masonry】を導入してページ表示時にブロックどうしが重なる!と困った時の対処法4種類

数年前に担当させていただいた案件で「可変グリッドレイアウト」というレイアウトのWebサイトを制作させていただきました。

「可変グリッドレイアウト」とは、ウィンドウの幅が変化したら、それに合わせて横並びのブロック数が変化して、コンテンツが再配置されるレイアウトです。

例えば新着一覧に画像を表示させるなどの理由で、1つ1つのブロックの高さが定まらない場合などに、

「じゃあ、なるべく一覧のブロックにすき間ができないように配置しよう!」

という場合に用いられます(^^)

ただ、その制作の過程で1個1個のブロックの画像が重なってしまって、少しだけ困ったことになってしまったのです(^^;)

今回は「可変グリッドレイアウトのWebサイトでjQuery masonryを使ったとき、画像が重なってしまう現象の解消方法」について、できる限りの情報をご紹介します(*^▽^*)

この記事の目次

自動整列プラグイン【jQuery masonry】とは!?

「jQuery Masonry」は、可変グリッドレイアウトのプラグインとしてとても有名なものです。

私は「jQueryメイソンリー」って呼んでいます(^^)

ダウンロードは、下記のリンク先のページで可能です。

リンク先のページ内の説明にある通り、HTML・JavaScript・CSSを設定して、可変グリッドレイアウトが実現できるようにしてみてください。

ページの先頭へ戻る

画像入りのブロックが重なっている!?

「jQuery masonryを設定したぞ、さて、ページを表示させてみよう」

となったところに、思わぬ現象が発生します。

なんと、可変グリッドレイアウトの、画像を含む1つ1つのブロックが重なってしまっているのです。

特にGoogle ChromeやSafariで発生する現象のようですね(@_@;)

原因について調べてみたところ、【jQuery masonry】での高さの計算が、Webページが完全に読み込まれる前のタイミングで行われているのだそうです。

そこで、【jQuery masonry】の読み込み位置をHTMLファイル内で変更してみたのですが、特に改善は見られませんでした。

ネットで検索して調べてみると、同様の「壁」にぶち当たっている方が多かったようですね…。

今後【jQuery masonry】を使用される方の問題解消のお役に立てればと思い、ここに対処法を4つまとめてみました(^^)w

ページの先頭へ戻る

対処法1:<img>タグに直接widthとheightを指定する

「高さの取得がプラグインの処理に間に合わないなら、最初から<img>タグにwidth・heightの属性を指定しよう!」

というものです。

ブロックの数が多いほど手間がかかる作業ですが、個人的にはこの方法が一番無難だと感じました。

WordPressやMovable Typeなどの「新着一覧」で1個1個のブロックを動的に生成する場合は工夫が必要ですね(^^;)

また、最近はレスポンシブWebデザインで構成されているWebサイトも多く見かけます。

レスポンシブWebデザインだと端末の画面の幅に応じて、それの何%という形でサイズを決定することもあるので、緻密な設定が必要になる場合もあります。

「jQueryの設定のために別のjQueryのコードを追記して…、あー難しい!!」

みたいにならないように気をつけたいものですが、状況によっては、どうしてもできないものもあるので、念のため(^^;)

width属性とheight属性の直接指定の方法については、下記のリンク先のサイトがとても詳細に説明してくださっています(^^)

ページの先頭へ戻る

対処法2:jQueryの読み込み方を変えてみる

【jQuery Masonry】の読み込み方を変えてしまう、という発想です。

デフォルトの設定方法を、以下のリンクで紹介しているように変更すれば実現できると紹介しています。

下記のリンク先のサイトで、【jQuery Masonry】での画像の高さの計算の仕組みも説明してくださっているので、参考にしてみてください。

ページの先頭へ戻る

対処法3:プラグイン「imagesLoaded」と併用する

上記の2つの対処法でも実現できない場合は、こちらの方法はいかがでしょう?

別のjQueryプラグイン「imagesLoaded」によって画像の高さをちゃんと指定して、【jQuery Masonry】で読み込んでもらえるようにする方法です。

別の表現をするならば「画像がちゃんと読み込まれるまでjQueryの処理を待とう」と言えば良いでしょうか(^^)

高さを指定できない、jQueryの読み込み方を変えてみても望んだ動作ではない…。

「じゃあ、画像が読み込まれてからjQueryの処理をしよう、それなら画像の高さも計算できるよね?」

という方法です。

ページの先頭へ戻る

対処法4:CSSで高さを設定する

上記3つをやって、それでもブロックが重なってしまう場合も「無い」とは言い切れないと思います。

そうした場合、私が思いつく限りではこの方法しかありませんでした…。

CSSで高さを指定してしまう、コレです!

3つを試してみて、どうしても設定できない場合は、この方法を試してみてください。

ただし、もしCSSで指定するしかないとなると、レイアウト的にもいくらか妥協しなければいけない場合が多いですよね…。

こちらの記事をご覧の方の中で、【jQuery Masonry】の重なり問題のオススメ解決法をお持ちのカタがいらっしゃいましたら、コメントやツイート、お問い合わせフォームなどでご一報くださいm(__)m

ページの先頭へ戻る

いいね!と思っていただけたらSNSでシェアしてください♪

感想などあればコメントください♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ