質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3229閲覧

J-query「Masonry」による要素が重なる不具合を解消したい

take1202

総合スコア14

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/07/29 07:26

###前提・実現したいこと
J-query「Masonry」による要素が重なる不具合を解消したい
というのが今回の質問となります。
よろしくお願い致します。

Masonry
http://masonry.desandro.com/

パソコンとスマホ、共に閲覧した際にきちんとMasonryが機能され、要素が重ならないように表示されることが希望です。
要素のサイズは、横は一定のサイズですが、縦のサイズが要素により左右されます。

teratailを始めて利用させて頂くので、
エンジニアの方たちに不快な思いをさせてしまうかもしれません。
またteratailにおいて本質問がお門違いでしたらすみません。

###発生している問題・エラーメッセージ

要素が重なって表示される

###該当のソースコード

どこまで記入すればいいのかわからない為、一旦記入せずに進めさせて頂きます。

###試したこと

teratailで質問させて頂く前に、今回解決したい症状を解決した、という旨の記事をいくつも探しては試してみました。

jsファイルを読み込む順番や、スクリプトの記述に追加を加えたり、
別のj-query(imagesLoaded)を利用する方法等々。

結局そのどれもが解決に繋がらなかったのと、どの記事もSEO対策のためのコピペのような内容な気がして、
teratailで質問させて頂きました。

###補足情報(言語/FW/ツール等のバージョンなど)

CMSにWordPressを利用しています。
WordPressにより投稿した記事の一覧表示で、サイズの異なるサムネイルをMasonryの機能で表示させたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/29 07:43

$(window).loadやimagesLoaded等の使い方を間違えてるのかも知れないのでダメだった例を載せてみたらどうでしょう 基本的には方法があってるからコピペするんでしょうし
kei344

2016/07/29 08:02 編集

「要素が重なって表示される 」のスクリーンショット、当該部分のHTML、関連する部分のCSS、Masonryを呼び出している部分のJavaScript、参照された記事などの情報を追記されてはいかがでしょうか。あと、「 J-query」ではなく「jQuery」です。質問文に設定されているタグ(JavaScript/WordPress/HTML5/CSS3)にjQueryも追加出来ます。
take1202

2016/07/29 08:15

mi70909様、kei344様。 早々に追記を頂戴し、ありがとうございます。 mi70909様の「$(window).loadやimagesLoaded等の使い方~」というヒントを元に、自分で何度か修正してみたところ、恐らくですが現状確認できる上では、重なることなく動作しているかのように見受けられるようになりました。 また今後質問させて頂く際は、kei344様のアドバイス通り、スクリーンショットやHTML、CSSにJavaScript呼び込みの記述等、詳細を加えた上で質問させて頂きます。 今回のような場合は、お二人の回答ということにはならないんでしょうか? 結果的には回答を頂き解決できたわけなので、お時間を割いて頂いた分なんらかの結果を得て頂きたいのですが。
kei344

2016/07/29 08:25 編集

お気になさらずに~。(そのうち「解決済」にしておいてください!)
guest

回答1

0

自己解決

mi70909様と、
http://cly7796.net/wp/javascript/started-with-masonry/
上記サイトの案を参考に、スクリプトの記述を
$(window).load(function() {
$('.grid').masonry({
columnWidth: 160
});
});
※columnWidth: 160は削除しました
にしたら、現状は解決できた形になっています。

mi70909様、kei344様、共にありがとうございました。

投稿2016/07/29 08:38

take1202

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問