要素の高さをそろえるJQuery「jquery.tile.js」で記事一覧やギャラリーを見やすくする

この記事は2017年4月7日に更新したものです。情報が古くなっている可能性があるのでご注意ください。

記事の一覧などで、divや画像の要素の高さを揃えたいってことありますよね。そんなときに便利なJQueryプラグイン「jquery.tile.js」を紹介します。

下記サイトからまずはJSファイルをダウンロード。
http://urin.github.io/jquery.tile.js/

そしてhtmlファイルのheadタグ内でJSファイルの読み込みと、高さをそろえるクラスの指定をします。今回は「tile_box」という名前のクラスを使用しています。

.tile(3)など、括弧の中に数字を入れると、括弧内の数字の数ずつで高さを揃えられます。

ちなみにこのサイトでも、記事の一覧ページに使用しています。

blog_jqtile01

このように高さがバラバラでも、blog_jqtile02

高さをそろえることができるのでとても便利です。記事の一覧だけでなく、画像ギャラリー等でも利用できるのでとても便利ですよ。


関連記事

ブログ

2017年4月14日

華娘イラストのメイキング

ブログ

2017年4月21日

[WordPress]記事の更新日を表す関数the_modified_date()を使って古い記事に警告を出す

ブログ

2016年5月6日

アメブロの記事一覧RSSから広告表示を除外して外部ページに表示する[2017年4月追記あり]

Copyright© goo-yan.com All Rights Reserved.