要素の高さを揃えるアドオン「Height Equalizer」を公開しました

実装方法

使用方法動画

使用上のコツ　相性の良いプラグイン「ツールバーCSS追加」

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

コードスニペットをオンにします。

Height Equalizer とは？

特定のクラス名（h-eql01 など）をHTML要素に付けるだけで、同じクラスを持つ要素の中で最も高いものに、他の要素の高さを自動で合わせるアドオンです。

主な特徴

• クラス名による簡単導入: クラスを付けることで動作。
• レスポンシブ対応: ウィンドウのリサイズ時にも自動で再計算。
• 複数グループ対応: h-eql01, h-eql02 と使い分けることで、ページ内の別々の場所で異なる高さを設定可能。
• 軽量動作: 外部ライブラリ（jQuery等）に依存しないバニラJS実装。

使い方

1. HTMLにクラスを付与する

高さを揃えたい要素に対して、h-eql + 2桁の数字 のクラスを付与します。

2. 管理画面で設定を確認

プラグインを有効化すると、WordPressの「設定」メニューに 「Height Equalizer」 という項目が追加されます。そこから使い方のヒントをいつでも確認できます。

技術的な配慮

リサイズ時の負荷軽減（デバウンス処理）

ウィンドウをリサイズするたびに計算を実行するとブラウザに負荷がかかります。このプラグインでは250ミリ秒のタイマー（デバウンス）を挟むことで、リサイズが止まったタイミングでスマートに再計算を行うよう設計しています。

柔軟な実行タイミング（上級者向け）

DOMContentLoaded はもちろん、動的にコンテンツが読み込まれるサイトのために、JSから updateHeights() を叩くことで意図的なタイミングでの再計算も可能です。

まとめ

デザインの美しさは「揃っていること」から始まります。「Height Equalizer」を使えば、わずらわしい高さ調整の計算から解放され、よりクリエイティブな作業に集中できるようになります。

ぜひあなたのプロジェクトでも活用してみてください！