WordPressで目次を付ける。

　Wordpressで目次をつけて、さらに「目次へ戻る」リンクを作成する手順の備忘録
　エディタはGutenbergを使用しています。

プラグインを導入

プラグインはEasy Table of Contentsを利用しました。

プラグインの設定

　「目次へ戻る」を追加するために下記の設定を変更しておきます。その他の設定はお好みで。

位置：　最初の見出しの前（デフォルト）
見出しラベルを表示：　チェックを外す

再利用ブロックの作成

　GutenbergのカスタムHTMLで再利用ブロックを２つ作ります。topindexというidは任意です。

①目次アンカー

　aタグを使って目次のタイトルを作成します。

<a id="topindex">目次</a><br>

②目次へ戻る

　右寄せにする場合はdivタグで囲みalign=”right”を指定します。

<div align="right"><a href="#topindex">目次へ戻る</a></div>

使い方

　使い方は、最初の見出しの前に、「目次アンカー」を挿入し、あとは自分の好きな場所に「目次へ戻る」ブロックを挿入していくだけです。

実際に使用しているページ

　組み込むと下記のように目次と目次へ戻るを配置できます。

https://raspberrypi.mongonta.com/googleaiyvoicekit/googleaiyvoicekitv2feature/

カスタマイズ

　CSSでデザインをカスタマイズする場合は下記を参考にしてCSSをカスタマイズしてください。
　アンカーを使うと下線が表示されてしまうのですがtext-decoration: none;で下線を表示しないようにしています。

a#topindex {
     display:block;
     width: 100%;
     height:50px;
     line-height: 50px;
     color: #FFF;
     text-decoration: none;
     text-align: left;
     background-color: #7f0028; /*ボタン色*/
     border-radius: 5px; /*角丸*/
     font-size: xx-large;
     font-weight: bold;
}
a#topindex:hover {
  text-decoration: none;
}