「目次へ」に内部リンクを貼り目次へ戻る方法WordPress、Cocoon2020版

この記事は約2分で読めます。

長文になると読んでる人が前の部分を読みたくなることがあります。
そのために「目次へ」という文字に目次に戻るように内部リンクを貼る方法です。
HTMLを使うけれど意味が分からなくてもできる初心者向けです。
使用環境WordPress 5.3
テーマCocoon親2.2.4.5子1.1.2
ここに目次が入る。

目次の位置にアンカーを入れる

目次の位置はデフォルト設定では最初の見出しの前になってます。
目次の位置は実際に公開してみて確認してもいいです。

目次の位置にアンカーを入れます。
アンカーとはジャンプしてくる目的地のことです。
この記事の場合「ここに目次が入る」の1番最後にカーソルを持ってきておき
+をクリックします。

カスタムHTMLをクリックします。

<a id=”○○○○”></a>と半角英数字で入力してください。
スペースも半角で入力(上の文はスペースが全角になっていたので動きませんでした。😢)

○○○○の部分は自分の好きな文字(半角英数字)で、あとで必要になるので覚えておいてください。
この記事では<a id=”mokuji”></a>としました。

目次へ

「目次へ」に内部リンクを貼る

「目次へ」と入力し
その文字を選択した状態でリンクボタンを押す。
#○○○○と入力して⏎
○○○○は先ほど入力した文字、今回の場合mokuji

これで完成です。目次へをクリックすると目次へ戻ります。

注意
「目次へ」をコピー&ペーストするとリンクが
#mokujiではなくhttps://kikuichige.com/○○○○○○#mokuji
に勝手に変わってしまいます。
この状態で公開して目次へをクリックすると動作がおかしくなるので
必ず#○○○○だけになってることを確認してください。

目次へ

見出しへ飛ばしたい場合

カスタムHTMLを使わないで内部リンクできる方法もあります。
見出しなどは簡単に内部リンクできます。

飛ばしたい見出しを選択しておいて
設定→ブロック→HTMLアンカーに半角英数字1~2文字を入力します。

あとは「目次へ」に内部リンクを貼ると同じようにすればOKです。
#○○○○の部分はhtmlアンカ-に設定した記号です。
この例の場合#a1

まとめ

  • 「目次へ」という文字にアンカーを設定することで目次へジャンプできる。
  • アンカーはカスタムHTMLで<a id=”○○○○”></a>と入力すれば簡単に設定できる。
    コピペには注意、外部リンクに変換されてしまう。
  • 見出しブロックなどはhtmlアンカ-を設定することで内部リンクできる。

目次へ

コメント

タイトルとURLをコピーしました