Elementor Loop Gridで特定のカテゴリの投稿だけ透明度を下げ終了のリボンを付ける

2025-10-24

CSS・Elementor

Elementor Loop Gridで特定のカテゴリの投稿だけ透明度を下げ終了のリボンを付ける

Elementor ProのLoop Grid（ループグリッド）ウィジェットは、カスタム投稿やブログ記事の表示に非常に便利です。しかし、例えば「イベント終了」や「売り切れ」といった特定のカテゴリに属する投稿アイテムだけを、視覚的に区別して薄く表示したい、という要望はよくあります。

本記事では、Loop GridにカスタムCSSを適用し、特定のカテゴリスラッグを持つアイテムの透明度を条件付きで下げる方法を解説します。

ステップ1：必要な情報の確認

このテクニックの鍵は、Elementorが自動で出力するHTML内のクラス名を利用することです。

投稿カテゴリのスラッグを確認

まず、透明度を下げたいカテゴリのスラッグを確認してください。スラッグとは、URLに使われる識別用の文字列です。

- 今回の例ではスラッグが event-old であると仮定して進めます。

HTML構造の確認（重要）

ElementorのLoop Itemは、投稿が属するカテゴリのスラッグを自動でクラスとして付与します。

ご自身のサイトで、透明度を下げたい投稿アイテムを開発者ツールで検証すると、以下のようなクラスがついていることが分かります。

markup

<div class="... category-event category-event-old ...">
    </div>

上記の通り、カテゴリのスラッグは category- を接頭辞としてクラス名になっています。ここでは、ターゲットとなるクラスは .category-event-old です。

ステップ2：カスタムCSSの記述と適用

ターゲットとなるクラスが分かったので、次はカスタムCSSを作成し、Elementorの適切な場所に適用します。

カスタムCSSコード

このCSSは、Loop Item全体（.e-loop-item）を対象に、category-event-old クラスが指定されている場合に透明度を 0.5 に下げます。

css

/* イベント終了（event-old）カテゴリの投稿にスタイルを適用 */
.e-loop-item.category-event-old {
    /* 透明度を50%に設定 */
    opacity: 0.5; 
    /* マウスオーバー時の点滅を防ぐため、スムーズな変化を定義 */
    transition: opacity 0.3s ease; 
}

/* マウスオーバー時に透明度を元に戻したい場合 (オプション) */
.e-loop-item.category-event-old:hover {
    opacity: 1.0;
}

📍 CSSの適用場所

このカスタムCSSは、以下のいずれかの場所に貼り付けてください。

Loop Gridウィジェットを配置したページのカスタムCSS（推奨）
Elementor Loop ItemテンプレートのカスタムCSS
Elementor $\rightarrow$ サイト設定 $\rightarrow$ カスタムCSS（サイト全体に適用する場合）

より具体的な要素に適用する応用テクニック

上記のCSSは投稿アイテム全体の透明度を変更しますが、Loop Item内の画像だけを薄く見せて、テキストはそのままにしておきたい場合もあるでしょう。

Loop Itemのテンプレート内で、画像（または背景画像を持つコンテナ）にカスタムクラスが付与されている場合は、それをターゲットにします。

例えば、Loop Item内の画像が <div class="elementor-cta__bg"> というクラスを持つ場合、以下のように記述を修正します。

css

/* event-old カテゴリのアイテム内の画像のみを薄くする */
.e-loop-item.category-event-old .elementor-cta__bg {
    opacity: 0.3; /* 画像の透明度を30%に設定 */
    /* !important を使うと他の設定に上書きされにくいが、非推奨 */
}

/* テキストを薄くしたい場合は、テキストを含む要素のクラスをターゲットにする */
.e-loop-item.category-event-old .elementor-cta__title {
    color: #999999; /* テキストの色を薄いグレーにする */
    opacity: 0.7;  /* テキストの透明度を70%にする */
}

ステップ3：終了したカテゴリのみリボンを表示させる

終了したカテゴリのみ「終了」や「SOUL’d OUT」などのリボンを表示させたい場合、ループアイテムを例えばコールトゥーアクションで作成します。リボン機能に終了と入力し以下のCSSを追加します。

css

/* 1. Loop Grid内の、すべてのリボンを強制的に非表示にする */
.elementor-12413 .elementor-element-a5df496 .elementor-ribbon-inner {
    display: none !important; 
}

/* 2. カテゴリ event-old を持つ Loop Item内のリボンのみを強制的に表示する */
.category-event-old .elementor-element-a5df496 .elementor-ribbon-inner {
    display: block !important; 
    
    /* デザインの調整 (以前のものを再定義) */
    font-size: 13px;
    padding: 5px 10px;
    background-color: #e74c3c; 
    color: #fff;
    z-index: 10;
}