【コピペでOK】ワードプレスのSWELLに用語集を実装しました。５０音順であいうえおボタン、アルファベット（ABC）ボタンを設置

Google AdSense等の広告を利用しています。

2025年9月20日2025年9月30日

URLをコピーしました！

ワードプレスのテーマ「SWELL」で、プラグインの「CM Tooltip Glossary」を使った用語集ページを作りました。
デフォルトのデザインを調整し、50音（あいうえお）ボタンとアルファベット（A–Z）ボタンで探せるインデックスを実装。さらに今回は、ツールチップ（吹き出し）をあえて無効化し、シンプルに「用語ページへ遷移するリンク」に統一しています。

最終形の見た目はコチラ → 【サンプルURL】
このブログの上部のメニューに「不動産投資用語集」があります。

REIちゃん

プラグインというのは、ワードプレスに後から追加できる機能で、拡張機能とも呼ばれるよ。

鑑定はかせ

ツールチップというのは、単語にカーソルを合わせただけ（クリックやタップはしてない状態）で、用語の意味が「吹き出し」のように表示される機能じゃよ。
スマホで邪魔になったから、無効化したったわい

SWELLを見てみる

この記事でわかること

見やすい用語集のひな型（50音＆A–Zインデックス）HTMLとCSS
ツールチップを非表示にする方法（リンクで用語ページへ遷移）
モバイル対応のレイアウト
下記のようなCM Tooltip Glossaryの「ALL / A to Z」ウィジェットを使わない方法

もしよろしければ、フードデリバリーでタダメシで食べながらゆっくりとご覧ください。

・フードデリバリーのクーポン一覧
・フードデリバリー配達員キャンペーン
・登録するだけでギフト券がもらえる不動産クラウドファンディング一覧

準備（3ステップ）

プラグイン「CM Tooltip Glossary」をインストール＆有効化
固定ページで「〇〇用語集」のページを作成
エディタ右上メニュー → 「コードエディター」に切り替え

コードエディター（HTML編集モード）への変更方法

固定ページで作成した「〇〇用語集」の編集画面の右上のメニューを開いて、コードエディターをクリックしてください。

また、ビジュアルエディターをクリックすれば元のモードに戻ります。

HTML

HTMLの貼り付け箇所

コードエディターモードにしてから、下記の赤枠内にHTMLを貼ります。

貼り付けるHTML

<h2>50音で探す</h2>
[glossary_exclude]
<ul class="ichiran">
  <li><a href="#a-gyo">あ行</a></li>
  <li><a href="#ka-gyo">か行</a></li>
  <li><a href="#sa-gyo">さ行</a></li>
  <li><a href="#ta-gyo">た行</a></li>
  <li><a href="#na-gyo">な行</a></li>
  <li><a href="#ha-gyo">は行</a></li>
  <li><a href="#ma-gyo">ま行</a></li>
  <li><a href="#ya-gyo">や行</a></li>
  <li><a href="#ra-gyo">ら行</a></li>
  <li><a href="#wa-gyo">わ行</a></li>
</ul>
[/glossary_exclude]

<h2>英数字で探す</h2>
[glossary_exclude]
<ul class="ichiran">
  <li><a href="#A">A</a></li>
  <li><a href="#B">B</a></li>
  <li><a href="#C">C</a></li>
  <li><a href="#D">D</a></li>
  <li><a href="#E">E</a></li>
  <li><a href="#F">F</a></li>
  <li><a href="#G">G</a></li>
  <li><a href="#H">H</a></li>
  <li><a href="#I">I</a></li>
  <li><a href="#J">J</a></li>
  <li><a href="#K">K</a></li>
  <li><a href="#L">L</a></li>
  <li><a href="#M">M</a></li>
  <li><a href="#N">N</a></li>
  <li><a href="#O">O</a></li>
  <li><a href="#P">P</a></li>
  <li><a href="#Q">Q</a></li>
  <li><a href="#R">R</a></li>
  <li><a href="#S">S</a></li>
  <li><a href="#T">T</a></li>
  <li><a href="#U">U</a></li>
  <li><a href="#V">V</a></li>
  <li><a href="#W">W</a></li>
  <li><a href="#X">X</a></li>
  <li><a href="#Y">Y</a></li>
  <li><a href="#Z">Z</a></li>
  <li><a href="#number">数字</a></li>
</ul>
[/glossary_exclude]

<h2>50音</h2>
<h3 id="a-gyo">あ行</h3>
<ul>
  <li>アセットマネジメント</li>
  <li>維持管理費</li>
</ul>

<h3 id="ka-gyo">か行</h3>
<h3 id="sa-gyo">さ行</h3>
<h3 id="ta-gyo">た行</h3>
<h3 id="na-gyo">な行</h3>
<h3 id="ha-gyo">は行</h3>
<h3 id="ma-gyo">ま行</h3>
<h3 id="ya-gyo">や行</h3>
<h3 id="ra-gyo">ら行</h3>
<h3 id="wa-gyo">わ行</h3>

<h2>英数字</h2>
<h3 id="A">A</h3>
<h3 id="B">B</h3>
<h3 id="C">C</h3>
<h3 id="D">D</h3>
<h3 id="E">E</h3>
<h3 id="F">F</h3>
<h3 id="G">G</h3>
<h3 id="H">H</h3>
<h3 id="I">I</h3>
<h3 id="J">J</h3>
<h3 id="K">K</h3>
<h3 id="L">L</h3>
<h3 id="M">M</h3>
<h3 id="N">N</h3>
<h3 id="O">O</h3>
<h3 id="P">P</h3>
<h3 id="Q">Q</h3>
<h3 id="R">R</h3>
<h3 id="S">S</h3>
<h3 id="T">T</h3>
<h3 id="U">U</h3>
<h3 id="V">V</h3>
<h3 id="W">W</h3>
<h3 id="X">X</h3>
<h3 id="Y">Y</h3>
<h3 id="Z">Z</h3>
<h3 id="number">数字</h3>

注意

プラグインの「CM Tooltip Glossary」で用語集の中身を作成したら、下記のように同じ単語をリストに挿入してください。

<h2>50音</h2>
<h3 id=”a-gyo”>あ行</h3>
<ul>
<li>アセットマネジメント</li>
<li>維持管理費</li>
</ul>

<h3 id=”ka-gyo”>か行</h3>

✅ `<ul>` の意味

unordered list（順序なしリスト） の略です。
箇条書きリストを作成するタグ。
その中に <li> を入れて項目を並べます。
ブラウザで表示すると、デフォルトでは先頭に「●」や「・」の黒丸がつきます。

<ul> と <li> はセットで使います。

なお、<ul> の代わりに<ol>（ordered list）を使うと番号つきのリストになります。

CSS（ボタンのデザイン）

CSSを貼り付ける場所

上記のHTMLを貼り付けた枠の下に、CSSを貼り付ける枠がありますので、そこに下記のCSSコードを貼り付けてください。

固定ページ→〇〇用語集→編集→右上メニュー「コードエディターモード」→HTMLコードの下

ワードプレスの固定ページに作った「〇〇用語集」の編集モード下記CSSを貼り付けるところ

貼り付けるCSS

.article ul.ichiran li {
  margin: 0.4em;
}

.ichiran {
  list-style: none;
  overflow: hidden;
  padding-left: 15px;
}

.ichiran li {
  border: 1px solid #888;
  padding: 6px 9px;
  border-radius: 10px;
  background: linear-gradient(to bottom, #ffffff 0%, #d5d5d5 100%);
  box-shadow: 0 1px 2px #999;
  font-weight: bold;
  width: 6%;
  float: left;
  white-space: nowrap;
  min-width: 56px;
}

.ichiran li a {
  color: #333;
}

CSSの意味

以下は知らなくても大丈夫です。

1. `.article ul.ichiran li`

.article ul.ichiran li { margin: 0.4em; }

.article 内にある ul 要素でクラスが .ichiran のリスト → その中の li に余白をつけています。
リスト項目同士がくっつかないように、外側に 0.4em の余白を確保。

2. `.ichiran`

.ichiran { list-style: none; overflow: hidden; padding-left: 15px; }

list-style: none; → 箇条書きの「●」マークを消す。
overflow: hidden; → 浮動要素（float）を閉じ込めるクリアリングの意味。
padding-left: 15px; → リスト全体の左側に余白をつける。

3. `.ichiran li`

.ichiran li { border: 1px #888 solid; padding: 6px 9px; border-radius: 10px; background: linear-gradient(to bottom, #ffffff 0%,#d5d5d5 100%); box-shadow: 0 1px 2px #999; font-weight: bold; width: 6%; float: left; white-space: nowrap; min-width: 56px; }

ボタン風の装飾がメイン部分です。
border → 灰色の枠線
padding → 内側の余白
border-radius: 10px; → 角丸（丸みのあるボタン感）
background: linear-gradient… → 上が白、下がグレーのグラデーション
box-shadow → ほんのり立体感を出す影
font-weight: bold; → 太字
width: 6%; float: left; → 横に並べる指定
white-space: nowrap; → 改行を禁止（リンク文字が折れないようにする）
min-width: 56px; → 小さすぎて潰れないように最低幅を指定

4. `.ichiran li a`

.ichiran li a { color: #333; }

リスト項目内のリンク文字を**濃いグレー（#333）**に統一。

全体像

つまり、押すとリストに飛ぶボタンのデザインです。

SWELLを見てみる

用語集に掲載する用語の作成

CM Tooltip Glossaryの「Add New Glossary Item」から、用語ページを作成してください。

リンクの作成（インデックスに用語を追加）

新たに用語のページを作成したら、「固定ページ」の「〇〇用語集」に戻って、編集画面（コードエディターモード）のHTMLに下記のように作成した用語を追加してください。

例）最有効使用や正常価格といった用語を追加した場合

<h2>50音</h2>
<h3 id="a-gyo">あ行</h3>
<h3 id="ka-gyo">か行</h3>
<h3 id="sa-gyo">さ行</h3>
 <ul>
  <li>最有効使用</li>
  <li>正常価格</li>
 </ul> 
<h3 id="ta-gyo">た行</h3>