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;
}