テーマ「alltuts」：Related Postsの表示ずれ対策。

本ブログで使用しているテーマ「alltuts」では、各エントリ本文下に
「Related Posts」があるのですが、それぞれの要素の高さが異なる場合、
ずれて表示される事が判明しまして。高さを揃えてやればよかろうと
言う事で、ブロックレベル要素の高さを揃えるjsライブラリ「heightLine.js」を
使って対応してみました。以下、備忘録。
 

 
１．下記サイトから「heightLine.js」をダウンロード。

》to-R – ブロックレベル要素の高さを揃えるheightLine.js

本BLOGは「alltuts」の子テーマを作ってるので、親テーマの
「alltuts」の下にある「js」フォルダにアップロードしておく。
 
 
２．子テーマ側の「header.php」を開き、以下のコードを追加する。

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/heightLine.js"></script>

 
 
３．子テーマ側の「single.php」を開き、113行目あたりにある以下のコードを…

echo '<h2>Related Posts</h2><ul class="relatedPosts">';

下記のように修正する。

echo '<h2>Related Posts</h2><ul class="relatedPosts heightLineParent">';

※　ulのclassにheightLineParentを追記するだけです。