Elementorのアコーディオンウィジェットの開閉でタイトルテキストを切り替えるカスタムCSS

2025-10-15

CSS・Elementor

Elementorのアコーディオンウィジェットの開閉でタイトルテキストを切り替えるカスタムCSS

Elementorの「アコーディオン」ウィジェットは、長いコンテンツを整理し、ページをスッキリと見せるための強力なツールです。しかし、コンテンツを開いた後もタイトルが同じのままだと、ユーザー体験（UX）として少し不親切に感じるかもしれません。
今回は、Elementorのネストされた要素機能を活用した「アコーディオン」ウィジェットで、開閉時にタイトルテキストを例えば「続きを見る」から「閉じる」へスムーズに切り替えるカスタムCSSを紹介します。

完成イメージ

閉じている時「続きを見る $↓」$

開いている時「閉じる $↑」$

Elementorの「アコーディオン」ウィジェットの標準機能では、開いている時と閉じている時で、タイトルのテキスト内容自体を自動で切り替える設定項目がありません。

しかし、ウィジェットが持つ「開閉状態を示すHTML構造」と「カスタムCSS」を組み合わせることで、この機能を擬似的に実装できます。

前提：ネスト機能の確認

このカスタマイズは、新しいネストされた要素機能が適用された「アコーディオン」ウィジェット（HTML構造に<details>タグが含まれるもの）にのみ対応しています。

もし、ウィジェット内に他のウィジェット（例: 画像、ボタンなど）を配置できない場合は、以下の設定を確認してください。

WordPress管理画面 → Elementor → 設定へ移動。
「機能」タブを開きます。
「ネストされた要素」（または「Nested Elements」）の設定が「有効」になっていることを確認し、変更があれば「変更を保存」します。

ステップ1：ウィジェットにカスタムCSSクラスを設定する

コードの管理を容易にするため、まず対象のアコーディオンウィジェットにカスタムクラスを設定します。

対象の「アコーディオン」ウィジェットを選択します。
「高度な設定」タブをクリックします。
「CSSクラス」欄に、任意のクラス名（例: accordion-title-toggle）を入力します。

ステップ2：アコーディオンタイトルに切り替え用のHTMLを挿入する

次に、タイトルの内容に「閉じている時」と「開いている時」のテキストを両方記述し、それぞれにCSSで制御するためのクラスを割り当てます。

アコーディオンアイテムの「コンテンツ」タブを開きます。
「タイトル」フィールドに以下のHTMLコードを入力します。

markup

<span class="closed-text">続きを見る</span><span class="open-text">閉じる</span>

ステップ3：カスタムCSSで表示・非表示を制御する

最後に、カスタムCSSをウィジェットの「カスタムCSS」欄に貼り付けます。ステップを使用して、このウィジェット内でのみスタイルを適用します。

「アコーディオン」ウィジェットを選択した状態で、「高度な設定」タブへ移動します。
「カスタムCSS」セクションを開き、以下のコードを貼り付けます。

ここでは、ステップ1で*カスタムクラスに貼り付けた.accordion-title-toggle を前提にしたコードとなっています。

css

/* 外部CSSファイルなどに記述する場合 */

.accordion-title-toggle {
    /* 1. 初期状態（閉じている時）の設定 */
    .e-n-accordion-item-title-text .open-text {
        display: none;
    }
    .e-n-accordion-item-title-text .closed-text {
        display: inline;
    }
    
    /* 2. 開いている時（アクティブ時）の設定 */
    .e-n-accordion-item[open] .e-n-accordion-item-title-text .closed-text {
        display: none;
    }
    .e-n-accordion-item[open] .e-n-accordion-item-title-text .open-text {
        display: inline;
    }
}

このカスタムCSSを適用することで、アコーディオンが閉じている時は「続きを見る」が、クリックして開くと「閉じる」というテキストに自動で切り替わるようになります。ぜひあなたのサイトのUX向上にお役立てください！