【ワードプレス/SWELL】50音順で用語集（辞書）を作りました_コピペで！

ワードプレスのテーマ「SWELL」を使って用語集を作ってみたのでシェアします。

CM Tooltip Glossaryのデフォルトのデザイン変更し、あいうえおの50音順に対応するようにしました。

また、カーソルを合わせるだけで吹き出しのような説明分が出る機能「ツールチップ」を、あえて機能しないようにしました。

このページ出来ること

見やすい用語集のひな型の作成
ツールチップを非表示にする。【シンプルにリンクで飛ぶように】
モバイル（スマホ）に対応
CM Tooltip GlossaryのデフォルトのALL ＆ A to Z を削除する。

SWELLの機能を見てみる。

準備

プラグインで「CM Tooltip Glossary」を入れて有効化
固定ページで「用語集」というページを作成
「用語集」ページの右上の　メニューを開いて「コードエディタ」にチェック

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>

CSS

コードエディタモードのHTMLの下にCSSを貼り付けるところがあります。

.article ul.ichiran li {
margin: 0.4em;
}
.ichiran {
list-style: none;
overflow: hidden;
padding-left: 15px;
}
.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;
}
.ichiran li a {
color: #333;
}

CSSの意味

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

1. `.article ul.ichiran li`

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

2. `.ichiran`

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

3. `.ichiran li`

ボタン風の装飾がメイン部分です。
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`

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

全体像

つまりこれは、
「インデックス用のリストを、グラデーション背景＆角丸付きのボタン風に横並びで整えるCSS」 です。

見た目としては、

四角いタブやボタンのようなリスト項目が横にズラッと並ぶ
一つ一つがクリックできるようになっている
というデザインになります。

用語の作成

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

リンクの作成

新たに用語のページを作成したら、「固定ページ」に戻って、以下の赤字部分のように、作成した用語を追加してください。

例）アセットマネジメントや維持管理費といった用語を追加した場合

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

ツールチップを非表示にする

「Show tooltip?」 のチェックを外して Save Changes してください。
👉 これで 全てのツールチップ表示が無効化されます。

用語にはリンクだけが残る
吹き出しは出ない

パンくずリストが気になる方

CM Tooltip Glossaryを使うと単語のパンくずリストが作成されないようです。

その場合、プラグイン本体を修正する必要があるそうです。

私は気にならないので変更していません。

webfamil.com

SWELLの機能を見てみる。

以上です。

わからないことはChatGPTに聞くといいですよ！

スクショを貼り付ければほとんど理解してくれます。

頑張ってください！

かんたん副業ドットコム

時間を掛けずに頭を使って稼ぐ方法