Elementorでカテゴリ表示をカスタム！「ボタン風タグ」にするCSSテクニック

2025-10-14

CSS・Elementor

Elementorでカテゴリ表示をカスタム！「ボタン風タグ」にするCSSテクニック

Elementor Proのループテンプレートで投稿のカテゴリを表示すると、多くの場合、カテゴリ名がそのままのテキストで表示されます。特に「見出し」ウィジェットなどを使って表示している場合、連続するカテゴリ名の間に「,」や「+」を入れてして並べているので、デザインが単調になりがちです。
この記事では、Elementor Proのループテンプレートやウィジェット内で表示されているカテゴリ名を、見栄えの良い「ボタン（タグ）風」のデザインにするためのCSSテクニックをご紹介します。

対象となるHTML構造の確認

今回のテクニックが適用できるのは、以下のようなHTML構造を持つカテゴリ表示です。カテゴリ名が<span>またはリンク（<a>）で囲まれていることがポイントです。

カテゴリをボタン化するカスタムCSS

カテゴリにリンク（<a>タグ）が設定されている場合と、そうでない場合（<span>タグ）の両方に対応し、指定された背景色（#A49482）を適用します。

以下のCSSコードを、Elementorの「カスタムCSS」セクション（ウィジェットの詳細タブ内）またはテーマカスタマイザーの「追加CSS」に記述します。

css

/* --------------------------------------
 * Elementor カテゴリをボタン化するCSS
 * 対象セレクタ: .seko-title 内の span または a
 * -------------------------------------- */

.seko-title .elementor-heading-title span,
.seko-title .elementor-heading-title a {
    /* 1. 要素をインラインブロック化し、デザインを適用可能にする */
    display: inline-block; 
    
    /* 2. ボタンの共通デザイン */
    background-color: #A49482; /* 指定の背景色（例: グレーブラウン） */
    color: white !important; /* テキスト色を白色に（リンク色の上書き） */
    padding: 4px 8px; /* パディングでボタンのサイズを調整 */
    border-radius: 4px; /* 角を丸くする */
    font-size: 14px; 
    font-weight: bold;
    line-height: 1; 
    
    /* 3. リンクの下線を削除 */
    text-decoration: none !important; 
    
    /* 4. ボタン間のスペースを確保 */
    margin-right: 10px; /* 次のボタンとの間に隙間 */
    margin-bottom: 5px; /* 複数行になった場合の下側の隙間 */
}

/* 5. 最後のボタンには右マージンを適用しない */
.seko-title .elementor-heading-title span:last-of-type,
.seko-title .elementor-heading-title a:last-of-type {
    margin-right: 0;
}

/* 6. ホバー時のスタイル（任意） */
.seko-title .elementor-heading-title a:hover {
    opacity: 0.8; /* ホバーで少し透明度を下げる */
    transition: opacity 0.3s;
}