2022.07.01 WordPress

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

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

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

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

作りかた

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

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

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

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

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

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

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

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

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

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

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

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

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

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

が助けてくれます。

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

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

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

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

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