Houn

WordPress

公開日:2022.07.01

WordPressでの目次の作り方(プラグインなしでHTMLアンカーを使用)

WordPressでの目次の作り方(プラグインなし)

WordPressブロックエディタで、記事の目次を作成する方法です。

目次の項目がリンクになっていて、クリックするとその箇所に飛べる仕組みのものですね。

プラグインは使わず、ブロックエディタに備わっている「HTMLアンカー」をいう機能を使ったやりかたです。

作りかた

記事の見出しをリストにする

まずは、記事を全部書いてしまいましょう。

そして、記事冒頭にリストタグを追加。リストの項目に、記事に振った見出しを並べます。

リストタグを選択
リストタグを選択
見出しを順番に書く

見出しに「HTMLアンカー」を設定

次に見出しを選択して、「高度な設定」→「HTMLアンカー」に任意の文字を入力します。

HTMLアンカーを選択

この例では、見出しが「桃太郎の誕生」なので、「birth-momotaro」としてみます。

自分が分かりやすければOKです。

birth-momotaroと入力

こちら正確にはid属性と呼ばれるもので、一応どんな文字を使っても問題はないようですが、半角英数字、記号はハイフン・アンダースコア・コロン・ピリオドを使っておくのが良いと思います。

目次にHTMLアンカーのリンクを貼る

次に、先ほどリストで作った目次の同じ項目「桃太郎の誕生」を選択して、「リンク」をクリックします。

リンク先のURL入力欄が出てきますので、そこに#マークを付けてから、先ほど見出しに設定したHTMLアンカー「birth-momotaro」と入力します。

#birth-momotaroと、#マークを忘れないでください。

リンクにHTMLアンカーを入力

これで目次と見出しが紐づいて、目次をクリックすれば「birth-momotaro」の見出しまでリンクしてくれる、という仕組みが出来上がりました。

あとは、すべての目次リストと見出しを同じ手順で紐付ければ完成です。

WordPressに関するご相談承ります

サーバーの移転(いわゆる”WordPressのお引越し”)や各種カスタマイズ。

また「管理画面に『更新してください』『サイトに重大な問題があります』と警告文があるがどうしたら良いか分からない」などといったメンテナンス面でのご不安ごとなど。

当事務所でお役に立てるかも知れません。ヒアリング・初回見積は無料です。

まずはいちどお気軽にご連絡ください。

ご相談・お問い合わせ