横並びさせたboxの高さを揃えるheightLine.js
商品画像と説明のボックスを横並びに並べる、そんな状況しょっちゅうありますよね。
画像サイズとか、商品名とか、テキストの分量が均一だと非常に優秀(上から目線)、なんですがまあそんなことは一度もなく・・・
デザインによっては背景画像でdivの入れ子にすることが多かったので、あまりボックスの高さが揃わない、という現象にあたったことがありませんでした。
しかし、フリーになってからcss3とhtml5だったり、シンプルデザインなサイトの案件が増えてくると、divの入れ子とか正直めんどくさい。
sectionに画像とテキストだけ入れてシンプルに・・・とかやっていると高さが揃わない問題勃発!
「heightのズレが売り上げに影響するわけないのでスルーしてください」とはさすがに言えず(知り合い案件だとたまに言うけどwww)、どうにか揃えなければならない。。
しかもそういう状況の時って大抵wordpressサイト。
できればcssで揃えたい・・・が親要素が必要なものが多いのでウィジェットとか使っているとめんどくさい、というかほぼ無理(できるけどwordpressにした意味が消えるw)。
こうなったらプログラム制御か? しかしwordpressだとプラグインとかちあったらめんどくさ〜。。って時でも使えたjqueryがこちら!
heightLine.js
http://blog.webcreativepark.net/2007/07/26-010338.html
<head>内に以下ファイルを読み込ませればOK
<head> <script type="text/javascript" src="./heightLine.js"></script> </head>
あとは高さを揃えたいブロックレベル要素にclass=”heightLine”を追加すればOK
ちなみにボックスの中の見出しテキストも装飾しているから高さを揃えたい(揃えろ)という場合は子要素のクラス名を
heightLine-任意の文字列
にするだけでjsファイルをいじることなく勝手に揃ってくれます!
ポイントは既に作ってあるクラス名をheightLineにうまく置換することですね。
多分大抵の場合コーディングしてから「高さを揃えろ」と外野から言われることが多いと思うので(苦笑)、自分で作ったcssクラスを置換する手順が発生すると思います^^;
さらにwordpressのウィジェット部分だった!っていう場合についても次は書いて行こうと思います。