キリンブログ福岡在住のウェブ制作がんばるおじさんが少ない語彙力で更新するブログ。MasonryをWordPressで使ったときのメモTweet要素を隙間なく埋める、いわゆるPinterest風のレイアウトを作ることができるjQueryプラグインMasonryを使ってWordPressでサイトを作ったので手順などをメモして置きます。jQueryファイルのダウンロード設置自体は難しくなく下記のサイトからjquery.masonry.min.jsをダウンロードしてサイトフォルダに置きます。Masonryまずはデモを見やすくするためにWordPressではなくて普通のサイトで使う方法を説明します。サンプルコードHTMLは例として下記のようなものを用意します。class="post">コンテンツ</div></div>次にMasonryを動かすために下記のようなsample.jsを書きます。270,isAnimated:true,});});ここではMasonryを適用させるアイテムとして.postを指定し、それを包括する親要素として#containerを指定しています。HTMLファイルにjsファイルを読み込む記述をしましょう。src="sample.js"></script>CSSはサンプルで下記のようなものにしました。#FFF;width:230px;padding:10px;margin:10px;}.postについて、marginとpaddingとwidthをあわせた幅は先ほどのsample.jsで指定したcolumnWidthの値に収まるようにしましょう。#containerのwidthは%指定することでリキッドレイアウトになり、ブラウザの幅にあわせてカラム数が変化してくれます。あと、sample.jsでisAnimatedを有効にしておくことでカラム数が変わるときにアニメーションをさせることができます。デモサイトを作ったので参考にしてみてください。デモサイトWordPressへの実装さて、このMasonryをWordPressで使えるようにします。いっても難しいことはなく、テーマフォルダにjsファイルを置いて、下記のコードを<head></head>内に書けばいいだけです。?>あとは自分で作ったHTMLやデザインにあわせて前述したsample.jsやCSSを書き換えしてみてください。福岡マークアップ勉強会に参加してきた。