皆さんこんばんわ！AbeGoblinです
今回はですね、コンテンツの高さを揃えるjqueryのプラグインであるtile.jsの使用方法についてご紹介したいと思います！！
まずは準備！
まずはですね、下記リンクよりtile.jsをダウンロードします！まぁ正確にはコピペですけどね！笑
圧縮・非圧縮・githubと選べますので、任意の方法でダウンロードしましょう！
jsファイル作成！
始めたばかりの方は、そもそもどうやって作んの？って感じがすると思うんですが、一番簡単な手順としては以下になります！
- tile.jsという名前のファイルを作成。(ここのファイル名は何でもOK！.jsってのだけはつける。)
- Download compressed(またはDownload uncompressed)内のコードをさっき作ったtile.jsにコピペ。
- 任意の名前のjsファイルをもう一つ作成。(今回はsetting.js)。ここでtile.jsを動かす為のコードを記載していきます。
まぁこんな感じですわ！余裕だよね！欠伸が出ちゃうね！！
設置！
こちょこちょ色々作りましたら、それぞれ任意のフォルダにtile.js追加します！任意のファイル名のjs(今回はsetting.js)と同じディレクトリに入れます！
大抵はjsディレクトリに入れることが多いのかなとも思います！
wordpress
wordpressの場合はfunction.phpまたはそれに準ずるphpファイルに以下のコードを設置します！
if ( !is_admin() ) {
function register_script() {
wp_register_script( 'jquery', '/wp-includes/js/jquery/jquery.js', array() );
wp_register_script( 'jquery-migrate', '/wp-includes/js/jquery/jquery-migrate.min.js', array() );
wp_register_script( 'tile', get_theme_file_uri() . '/js/tile.js', array( 'jquery' ), false, true );
wp_register_script( 'setting', get_theme_file_uri() . '/js/setting.js', array( 'jquery' ), false, true );
}
function add_script() {
register_script();
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-migrate' );
wp_enqueue_script( 'tile' );
wp_enqueue_script( 'setting' );
}
add_action( 'wp_enqueue_scripts', 'add_script' );
}それ以外の場合
それ以外の場合は、普通に読み込みましょう！jqueryも忘れずに！まぁ大体はfooterの中に入れとけば安パイって感じっすね！
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jsディレクトリまでのパス/js/tile.js"></script>
<script type="text/javascript" src="jsディレクトリまでのパス/js/setting.js"></script>今回jqueryはCDNを使用しています！ローカルにjqueryがある場合はそれを使ってもいいですね！
コードは上から読み込まれていくものなので、参照元(tile.js)→管理ファイル(setting.js)の順番は順守しましょう！動かないとき順番見直すのも大事です！クラス名かぶってたりするからね！
いざ、tile実装！！
はい、それではタイルの実装に移ろうと思います！jsの項目は先ほど作ったsetting.js、またはbody直下にscriptタグで囲って設置しましょう！
html
<ul class="wrap">
<li class="tile">サンプルテキスト</li>
<li class="tile">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li>
<li class="tile">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li>
</ul>seting.js
(function($) {
$(window).on('load resize', function(){
$(".tile").tile(3);
if(window.matchMedia('(max-width:992px)').matches) {
$(".tile").each(function(){
$(this).css({
height: 'auto'
})
});
}
});
})(jQuery);tile()の中に数字(今回は3)を指定すれば、その数字毎で一番大きい高さを基準にしてコンテンツを揃えられます！数字を入れない場合はすべての高さを大きいものを基準に揃えます！
サンプルはこちら！
- サンプルテキスト
- サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
- サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
ハイしっかりと高さが揃いましたね！今回はわかりやすいようにボーダーを付けておきました！
今回はレスポンシブにも対応しているので、スマホで見たり、ブラウザを横に狭くしていけば、そのうち1列になると思います。高さもそれぞれのコンテンツに合わせたものに変わっていますね！便利です！
最後に
類似のプラグインとしてはmatchheight.jsなどがありますが、僕はtile.jsが使いやすくて好きです！matchheight.jsやピンタレスト風にコンテンツを並べるjQuery Masonryなんかの使用法も今後紹介できればなぁと思います！
それでは本日はこの辺で！さようならー(^q^)ﾉｼ
