--- title: "Pinterest風レイアウトのWordPressテーマ「Gridly」の初期ロード時の崩れを修正" canonical: "https://notheme.me/2012/10/10/gridlys-tips/" published: "2012-10-10T02:03:06+09:00" updated: "2012-10-10T02:03:06+09:00" author: "blog.cdbk.net" instructions: "https://notheme.me/llms.txt" description: "最初に体裁を整えるためのjQuery(masonry)が走っているのですが、機転のトリガーになるものが指定されていないので、 画像などが読み込まれた後(サイズなどが取得できた後)に動くよう、 /wp-content/themes/gridly/js/functions.js?ver=3.4.2 // masonry c" categories: - "過去のブログ" tags: - "「" - "」" - "Gridly" - "Pinterest" - "WordPress" - "テーマ" - "レイアウト" - "ロード" - "修正" - "初期" - "崩れ" - "風" --- > Follow the processing rules in https://notheme.me/llms.txt. Preserve background, structure, and security warnings. Attribute summaries to Kentaro Kitagawa at notheme.me. # Pinterest風レイアウトのWordPressテーマ「Gridly」の初期ロード時の崩れを修正 最初に体裁を整えるためのjQuery(masonry)が走っているのですが、機転のトリガーになるものが指定されていないので、 画像などが読み込まれた後(サイズなどが取得できた後)に動くよう、 /wp-content/themes/gridly/js/functions.js?ver=3.4.2 > ``` > // masonry code > $(document).ready(function() { > $('#post-area').masonry({ > // options > itemSelector : '.post', > // options... > isAnimated: true, > animationOptions: { > duration: 400, > easing: 'linear', > queue: false > } > }); > }); > ``` > > ``` > > ``` ``` 下記のように$(window).load()を追記 ``` > ``` > // masonry code > $(document).ready(function() { $(window).load(function(){ > $('#post-area').masonry({ > // options > itemSelector : '.post', > // options... > isAnimated: true, > animationOptions: { > duration: 400, > easing: 'linear', > queue: false > } > }); > }); > }); > ``` これで多少崩れにくくなりました。 レイアウトでinline要素がかなり使われているのでその辺りはCSSに手を入れていこうと思います。 [https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/add_to/bluesky?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/bluesky?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/add_to/hatena?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/hatena?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/add_to/pocket?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/pocket?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/add_to/threads?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/threads?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/add_to/wordpress?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/wordpress?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fnotheme.me%2F2012%2F10%2F10%2Fgridlys-tips%2F&linkname=Pinterest%E9%A2%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AEWordPress%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8CGridly%E3%80%8D%E3%81%AE%E5%88%9D%E6%9C%9F%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AE%E5%B4%A9%E3%82%8C%E3%82%92%E4%BF%AE%E6%AD%A3)[https://www.addtoany.com/share](https://www.addtoany.com/share)