【1分で完了・デザイン有】アンカーリンク付きの目次を設置する方法（WordPress）

2023.03.27

はじめに

WordPressの管理画面からアンカーリンク付きの目次を設置する方法を紹介します。

投稿画面からワンクリックで設置可能なリストアイテムを使用することを想定しています。

「リスト」ボタンを利用して設置するよ！この記事でもそのまま使うよ

実装までの4手順「コピペ可」

解説なんていいから、とりあえず実装だけしたい！という方は以下の4手順ですぐに実装できます。

1. style.css にクラスを追加する

WordPressの管理画面から、【外観】→【テーマファイルエディタ】をクリックします。

ページ遷移後の右側にある「style.css」をクリックし、エディターを開きます。

FTPから編集している方はそちらからでも問題ありません。開いたら以下のコードを張り付けてください。解説は後述します。

.list-style01{
	border: solid 2px #0db801;
	background: #f3f3f3;
	padding: 2em 2em 2em 3em;
	font-size: 1.6rem;
	font-weight: bold;
	list-style: none;
}
.list-style01 a{
	border-bottom: black solid 1px;
}
.list-style01 > li{
	position: relative;
	margin-bottom:24px;
}
.list-style01 > li:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	content: "\f579";
	position: absolute;
	top:4px;
	left: -24px;
	color: #0db801;
}
.list-style01 > li > ul{
	list-style: none;
	margin-left: 15px;
	font-weight: normal;
}
.list-style01 > li > ul > li{
	padding-top:12px;
}

※16行目の疑似要素は見出しの左についているにこちゃんマークです。Font Awesome を利用していない方は16行目～24行目は削除の上、「・」などを直接打ち込むなど、適宜ご対応ください。

このクラスを用いてリストアイテムにスタイルを付けていきます。

2. リストにクラスを付与する

左上のプラスマークからリストアイテムを選択し、リストを設置してください。

ブロックメニューの最下部にある高度な設定→追加CSSクラスに「list-style01」を追加します。

小見出しを作成する場合は、行を選択してメニューから以下の赤枠のボタンを押下すれば小見出しに変換されます。

3. テキストリンクを貼る

リンクを付けたいテキストを選択、メニューからリンクボタンを押下し、任意のID名を入力します。今回は「#section-01」という名前を付けています。

4. 遷移先にHTMLアンカーを付与する

遷移させたいブロックにフォーカスし、高度な設定→HTMLアンカーへ前項で設定したIDを付与します。

これでアンカーリンク付きの目次の完成です。

リスト内に「目次」という見出しを付与することも可能ですが、目次以外の単純なリストとしても活用したいので、見出しとリストを今回は切り分けています。

もっとこだわりたい方は、目次用とリスト用でクラスを2つ作成すると便利かもしれません。

コード・デザインの解説

コードの概要とデザインの説明を行います。

.list-style01{
	border: solid 2px #0db801;
	background: #f3f3f3;
	padding: 2em 2em 2em 3em;
	font-size: 1.6rem;
	font-weight: bold;
	list-style: none;
}
.list-style01 a{
	border-bottom: black solid 1px;
}
.list-style01 > li{
	position: relative;
	margin-bottom:24px;
}
.list-style01 > li:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	content: "\f579";
	position: absolute;
	top:4px;
	left: -24px;
	color: #0db801;
}
.list-style01 > li > ul{
	list-style: none;
	margin-left: 15px;
	font-weight: normal;
}
.list-style01 > li > ul > li{
	padding-top:12px;
}

まず初めにWordpressのリストアイテムは、「ul li」で構成されていて、デフォルトではクラスが何も付与されていません。

なので、自作のスタイルを適用してあげる必要があります。