Illustration, Graphic design & 
高さの違うBoxを綺麗に隙間を埋めながら配置してくれる、超有名なMasonryというjQueryプラグインがありますが、これを長らく上手に使いこなすことが出来ていませんでした。オハズカスイ(≧∇≦)
言い訳すると、解説サイトでも書いてあることがバラバラだったり足りなかったり？
デモページをそのまま使えばいいのでしょうが、自分なりにちょっとあれこれしたい・・・とやっていると上手くいかなくなる、という感じでした。
しかしこの度、一念発起して真剣に向き合った結果！やっと使えるようになったので、以下その忘備録です。
まずは証を
まず成功した証拠のデモを以下にお示しします。
3
3
5
5
5
5
6
6
6
6
めーそんりーになってるね！（PCで見てね）
成功したことで、今まで何が原因でちいっともMasonryくんがいう事を聞いてくれないのかが解りました。
これってJavascriptをちゃんと勉強している人なら説明も要らないような事なのでしょうね。
ノンプログラマーなミーにとって大きな発見ポイントは以下でした。
1. 最新版のMasonry.jsでも、jQueryの呼び出しは必要！
2. Masonry.jsの呼び出しは<head>内でなくでも大丈夫！
3. 画像入りのBoxで表示崩れしないようにimagesLoaded.jsはセットで！
4. 呼び出しScriptはMasonryを適用したいBoxを記述したHTMLの後に書く！
1.のjQueryの呼び出しについては、『最新版はjQueryの呼び出しが不要』と書いているサイトもあったのですが、わたしが試した限りでは、2019年11月の時点でjQueryの呼び出しをしないと動きませんでした。
2.のMasonry.jsの呼び出しについては、<head></head>内でなくでも大丈夫です。例えば、上記のデモはこのWordPressの投稿ページに直接記述して呼び出しています。ちなみにjQueryはWordPressに含まれているもので賄えるので、特に記述していません。
3.のimagesLoaded.jsは、高さの決まっていない画像を含むBoxに対してMasonryを適用させると、表示崩れを起こしてしまうのを防いでくれます。基本的にBoxに高さが不ぞろいな画像を含む場合が多いと思うので、Masonry.jsを使う時はimagesLoaded.jsもセットで使うようにするのが安全です。
4.の呼び出しScriptの記述位置。実はわたしが一番ハマってしまっていた原因でした。<body></body>内の下の方に書けばいいよ！とか教えてくださっているサイトもありましたが、実際にMasonryを適用したいBoxよりも前に書いてしまうと動かないんですね～。いやー、知らなかった・・・・＾＾；
では上記を踏まえて、以下お手軽なMasonry.js設置方法の解説です。
1.jQueryを呼び出しましょう
最新版だとこんな感じです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
これは<head></head>に記述します。ちなみにjQueryはバージョン3.ｘであればどれでも動くようです。
2.CDNへ直接リンクしちゃいましょう
まずMasonry.jsへのリンクを記入します。Masonryの配布サイトから、masonry.pkgd.min.js または masonry.pkgd.js のCDNリンクを取得して<head></head>または<body></body>内にペーストしてください。<body></body>内にペーストする場合は、必ず実際にMasonryを適用するBoxよりも前にします。
それから今度はimagesLoadedの配布サイトから、imagesloaded.pkgd.min.js または imagesloaded.pkgd.js のCDNリンクを取得して、上記と同じようにペーストします。位置も同様なので、以下のようにセットでペーストしちゃいましょう。
【例】
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
ちなみに、WordPressの固定ページや投稿内だけで呼び出したい場合は、上記を<div></div>で囲います。
3.Masonryを適用させるBoxのHTMLを書きます
基本的にBox要素であれば動くようです。人気の使い方はリストタグですが、普通に<div>タグでも<archive>タグでも動きます。上記のデモのHTMLは以下のような感じです（一部端折ってます）。
<div class="grid"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item grid-item--large">3</div> <div class="grid-item">4</div> . . <div class="grid-item">10</div> </div>
ちなみに、Class名は好きなものに変えることができます。
4.Boxの装飾をCSSに書きます
最低限必要なのは「width」と「margin」です。デモは2種類の大きさのBoxにしています。大きな方のBox幅は、基本のBox幅+margin×2 とすると、綺麗に並びます。デモCSSはこんな感じ。
.grid-item {
width: 140px;
margin:5px;
box-sizing:border-box;
padding:2rem;
font-size:2rem;
background: white;
border-radius:6px;
}
.grid-item--large {
width: 290px;
}5.呼び出しScriptを適用Boxの後に書きます
呼び出しScriptは、<head></head>内ではなく、<body></body>内の、しかもMasonryを適用するBoxの記述の後に書きます！この位置関係を間違えると、全く動いてくれません。
また、高さの未定な画像をBoxを含んでいる場合の表示崩れを防ぐため、imagesloaded.jsで画像の読み込みが出来たらMasonryで描画する、となるように書きます。デモはこんな感じ。
<script>
var $grid = jQuery('.grid').imagesLoaded(function(){
$grid.masonry({
itemSelector: '.grid-item'
});
});
</script>Boxを包み込むコンテナとなる要素と、Box要素のCSS名を変更した場合は、こちらも変更するのを忘れないでください。また、WordPressの固定ページや投稿内だけで呼び出したい場合は、上記を<div></div>で囲います。
全部統合したらこんな感じになります。
HTML ( include CSS )
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.grid-item { width: 140px; margin:5px; box-sizing:border-box; padding:2rem; font-size:2rem; background: white; border-radius:6px; } .grid-item--large { width: 290px; }
</style>
</head>
<body>
.
.
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item grid-item--large">3</div>
<div class="grid-item">4</div>
<div class="grid-item grid-item--large">5
.
.
<div class="grid-item">10</div>
</div>
<script>
var $grid = jQuery('.grid').imagesLoaded(function(){
$grid.masonry({
itemSelector: '.grid-item'
});
});
</script>
</body>
</html>いかがでしょうか。どうしても今までできなかったんです（T_T）でも、わかってみれば実に簡単。これからはバリバリMasonryを好きな場所に組み込んでやりますです！！
その他のオプション
Boxの並べ方やアニメーションの動き方、更にはクリックでサイズ変更したり沢山のオプションが配布サイトでは紹介されています。興味のある方は是非調整してみてください。
以上です♥
