Houn

2022.07.01 WordPress

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に時間を取られすぎていませんか?

「ブログやるなら、HP持つならWordPress!と聞いて始めたけれど『これどうやるの?』のオンパレード。分からなくてググってみれば『下手なカスタマイズはサイトが真っ白になります』『ハッキングされるかも?』って、何それ?!なんかもういいや‥」

‥というあなたへ朗報です!

WordPressブログに関するトラブル解決の専門家「ブログサポーターがみたか」さんが提供されているサービス

が助けてくれます。

WordPressのトラブル対応やカスタマイズにお強く、これまでのべ1,000件以上の解決実績をもとに

  • 使い方が分からない
  • カスタマイズしたい
  • ブログ運用の仕方、WordPressの使い方が間違っていないか不安
  • ハッキングに遭ってしまった‥

などさまざまな要望・問題に、丁寧迅速に対応してくださいます(がみたかさんは10年近く前から存じ上げていますが、本当に丁寧で優しいです)

ブロガーさんなら記事を書くこと、事業者さんなら本来の業務が時間を割くべきことで、「WordPress、これどうやるの?」とググって悩んでいるのは時間の無駄です。

きちっと必要な部分には投資をして”餅は餅屋”に任せ、できた時間でしっかり本業に集中し、より大きな収益を生みましょう。

安心して、快適にサイトを運営するために、ぜひ活用してください。

お問い合わせ