Diviテーマ価格表（Pricing Table）高さ均一にする - WordPress 基本

WordPress 人気のテーマの1つであるDiviテーマでは、Pricing Tablesモジュールを使用して価格表を作成できます。簡単な方法としては、ライブラリから料金表ページレイアウトをロードして活用することも可能です。

WordPress Diviテーマ価格表レイアウト — ライブラリからPricingページを検索してロードします。

価格表 モジュールを使用するか、ライブラリから価格表ページのレイアウトをロードして価格表を作成すると、価格表の各テーブルの高さが一定でないため、表示が悪いことがあります。

WordPress Divi テーマ価格表(Pricing Table) 高さ均一にする

価格表のレイアウトのいずれかを読み込むと、上の図に示すように、各テーブルの高さはコンテンツによって一定ではなく、見栄えが悪くなりました。

この場合、Diviテーマ開発会社のElegant Themesでは、次のCSSコードを提示しています。 ルックス » カスタマイズ » 追加 CSS またはそのページ設定の Advanced（詳細） タブにこのコードを配置できます。

.et_pb_pricing_table_wrap {
    align-items: normal;
}

ページ設定の 高機能 タブに入れたい場合は、下図のように追加できます。

ページ Settings » Advanced タブ » Custom CSS セクションにカスタムCSSを追加できます。

ただし、各テーブルの高さは同じになりましたが、上の図のようにボタンが一番下にないため、少し見えない場合があります。

価格表の各テーブルの高さを同じに設定し、ボタンを一番下に配置したい場合は、JavaScriptを使用できます。

私は上記のCSSコードの代わりに次のJavaScriptコードを作成して追加しました。

// Equalize the Heights of Pricing Tables in WordPress' Divi Theme

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Check if viewport width is greater than 1024px (common breakpoint for desktop)
    if (window.innerWidth > 1024) {
        // Get all elements with the class 'et_pb_pricing_content'
        var elements = document.querySelectorAll('.et_pb_pricing_content');

        // Initialize variable for the maximum height
        var maxHeight = 0;

        // Loop through the elements to find the max height
        elements.forEach(function(element) {
            if (element.offsetHeight > maxHeight) {
                maxHeight = element.offsetHeight;
            }
        });

        // Set the height of all the elements to the max height
        elements.forEach(function(element) {
            element.style.height = maxHeight + 'px';
        });
    }
});

</script>

上記のスクリプトは、デバイスの解像度が1024ピクセル以上の場合にのみ適用されるように編まれています。

JavaScriptコードはいくつかの方法で追加できます。 Diviテーマが提供する機能を使って追加することも簡単に考えることができます。