目次をつくる③ページ内リンク編

WordPressで小説サイト

 目次を作るには、古典的にリンクを張る方法と、子ページという枠組みを使ってショートコードで自動的に一括表示させる方法があったというのが前回まで(目次をつくる①と②)のお話でした。1

 今回は、同一記事内での目次ってどうしようというお話です。

 目次ってのは本来、その文章の中に何があるのかを一目でわかるようにしておき、読みたいところへさっと飛ぶ為のものです。
 ショートショートや後書きのような小さな章立ての文章の場合、別ファイルというのも厄介な話です。そこでWordpress5.0以降のブロックエディタで同一記事内リンクを張るときにはどうしたらいいんだという処を調べてみました。

 有り体に言うと、「すべて世はこともなし」の後書きをアップロードし忘れておりまして…急遽WordPress版に移行させようとしたら上記の問題に行き当たったという次第。使徒サイドの説明書きがあるというから来てみたのに、一体何処にあるのさ、と呆れてお帰りになられる方がおられたら申し訳ないと思ったのでした。

 で、結論から申しますと。
 ブロックエディタにはいろいろなブロックがありますが、そのうち「見出し」の「高度な設定」には「HTMLアンカー」を設定するダイアログボックスがあります。ここにアンカーとなる文字列を設定しておき、文章のトップに置いた段落ブロックに書いた目次からこのアンカーに向けてリンクを張るのです。

  1. 目次1 アンカーはごくシンプルに”1″
  2. 目次2
  3. 目次3

この画像に
深い意味はありません

とりあえず飛んだぞ、というのが判っていただけたらOKです

ちなみにこの猫さんは
グラバー園でお会いしました。




なにげに不敵

この見出しにアンカーを設定しました。飛んでますね?

 目次の文を選択してツールボックスのリンクボタンを押し、出てきたダイアログボックスに#アンカー文字列を打ち込んでリターン。これでできあがり。これをずらりとやった例がこちらにありますので気になった向きはご覧になってくださいまし。(別タブ注意)
 目次の文はリストでもよいでしょうし、コンパクトにするなら段落ブロックに列記してスラッシュで区切る(目次1/目次2/目次3)という選択肢もありましょう。柳は今回、「詩」ブロックを使って箇条書きにしたものをブロックの設定CSSを書き足してインデントしています。

こんな感じで
インデントさせています
なぜ「詩」ブロックなのかというと
至極簡単に改行が入れられるから
(そのうち段落ブロックの中でもう少し簡単に改行するワザを見つけねば…)

 今のところ戻るボタンまでは付けていませんが、文末に目次に戻るようなリンクを張っておくとさらに親切かも知れません。目次の頭にも見出しのブロックを付けておけば同じことが出来ますからそれほど難儀はないでしょう。気合いと根性が入ったらやってみようと企んでおります。

  1. ショートコードで順番よく一括表示させるには、固定ページ一覧で見ることができる並び順という数字をきちんと整えておかないと些かみっともないコトになるので注意が必要です。並び順は固定ページのクイック編集で他の記事の並び順を見ながら修正するのが便利ですよ。

コメント