【WordPress】jQueryMasonryを使って、隙のないタイル状のサイトを作る

どーも、えいすけです。

今回は、珍しくjQueryというのに挑戦してみました。今回使ってみたのがjQueryMasonryというもの。

CSSでfloatさせた時に、サイズ違いのものだと綺麗に表示されません。これを解決してくれるのがjQueryMasonryなわけです。実際どういった感じが見てみましょう。

float:leftを使った場合

floatだけで配置した場合は、こんな感じになってしまい隙間ができてしまいます。これではダサイですよね。それをjQueryMasonryってのを使うと、こうなります。

jQueryMasonryを使った場合

ほら！！綺麗に配置されてますよね！高さが一番低いところから詰めて表示してくれるんです！

では、実際に導入方法です。思ったより簡単だったのですぐ出来ました！

導入の前に確認

まず、確認しておきたいのが以下の2つの所。

1つ目は、記事一覧で1つの記事を囲んでるクラスでの横幅のサイズです。これはmarginのサイズも含めた大きさを使います。

.post {
width: 300px;
margin:20px;
background: white;
float:left;
}

CSSの例ではこんな感じ。.postというclassにwidth:300px、margin:20pxを用いてるので合計の横幅は300+20(左)+20(右)で340pxですよね！

次に確認するのが、記事一覧を囲んでいるセレクターを確認します。今回の場合、#container（id=”container”）で囲んでいます。

導入してみよう！

では、実際に導入してみましょう！まずは、jQueryとjQueryMasonryのJSファイルをサイトからダウンロードします。

jQuery: The Write Less, Do More, JavaScript Library

jQuery Masonry

コードを開いちゃって、ダウンロード出来ないよって方は、エディターにコピペして、タイトルを「jquery.js」や「jquery-masonry.js」で保存しましょう。

次に、FTPソフトを使ってWrodPressがあるサーバーのThemeにJSフォルダを作成し、その中にアップロードしましょう！

実装コードを書いてみる

アップロードが完了したら、実際にheader.phpの＜head＞~＜/head＞内にコードを記述していきましょう！

手順としては、

１．jQueryのファイルパスを読み込み
２．jQueryMasonryのファイルパスを読み込み
３．JSコードを記述です。

簡単です。

では、例のコードがコレです。

<script src="http://********/wp-content/themes/test/js/jquery-1.8.3.js"></script> <!--jQueryのファイルパスを指定して読み込み-->
<script src="http://********/wp-content/themes/test/js/jquery.masonry.js"></script><!--jQueryMasonryのファイルパスを指定して読み込み-->
<!--*****はサイトのURL-->
<script>
  $(function(){
    $('#container').masonry({ <!-- #containerは記事一覧を囲んでる部分 -->
      itemSelector: '.post', <!--.postは各記事を囲んでる部分-->
      columnWidth: 340, <!--横幅の指定-->
      isAnimated: true <!--アニメーションON-->
    });
  });
</script>

どうでしょうか？出来ましたでしょうか？

思ったより簡単に実装できるので、凄いですよね！ずっと、これで悩んでたんですけど結構簡単に実装できて良かったです(^_^;)

実際に、僕がこれを取り入れたサイトです。良かったら見てください！上手く利用すれば、下のサイトのようにブラウザの横幅を変えると記事一覧が再配列します！実際に動かしてみてください！

iPhoneCase まとめ

• 
• ツイート
•