WordPress ver. 5.2.2 で作成された記事
WordPress の目次（Table of Contents）を作るのに多くの解説サイトはプラグインを紹介したり、コーディングの仕方を解説しているサイトがある。しかし、サイトづくりに慣れていない初心者の場合いずれもやりたくないという人も結構いると思う。かくいう自分もその一人だ。
作らないという選択肢もあるが可読性が上がるためユーザの離脱率がわずかながらも下がるようだ。自分がサイトを見てる立場にたてばわかるだろう。見たい項目にワンクリックで飛べるのは非常にありがたく、ユーザエクスペリエンスが良いと感じる。Googleもこれを評価対象に入れているらしく、SEO的にはあったほうが良い。悩みどころだ。
今回 WordPress の標準機能だけ使ってシンプルなデザインではあるが目次やページ内リンクを簡単に作る方法をご紹介。自分ようのメモでもある。
プラグインのデメリット
プラグインをインストールすれば数クリックで目次を生成できるし非常に便利だが、プラグインの選択肢は現状2つしかなく、1つは4年も更新されていない。セキュリティ的にあまりよろしくないし、いつ使えなくなるかわからない。それにプラグインを増やすことはサイトのパフォーマンスにも影響する。
コーディング
手入力によるコーディングやコピペも慣れれば早いし、玄人ならば思い通りにデザインすることができる。しかし初心者にとってコーディングはミスにより表示がおかしくなったり、時間と精神を削られる。
HTML の勉強にはなるが、書きたい記事があるときにこういう小さなつまずきが重なるとやる気を削いでしまうことがある。
それにコーディングはやる気があるときに集中して学んでしまったほうが良い。気分が乗らないときにやっても結局覚えないのだ。
WordPress 標準機能を使う
実は WordPress の標準装備されている機能を使えば簡単に目次は作れてしまう。WordPress はボタンひとつでリストやアンカーを簡単に設置できる。これを組み合わせることでページ内リンクのリストが作れる。
デメリット
ただこの作り方の欠点はカスタマイズ性がほぼないこと。スタイルシートを編集すれば変えられないこともないが、他のリスト表示も巻き添えを食らうので使い勝手が悪い。ごくごくベーシックなデザインで良いなら使おう。
手順
- 「リスト」ブロックを作る
- 見出しのリストを作る
- 見出しにアンカーをつける
- リストにアンカーのリンクを貼る
「リスト」ブロックを作る
見出しのリストを作る
見出しにアンカーをつける
わかりやすい名前をアンカーにつけよう。
リストにアンカーのリンクを貼る
リンクしたい文を右クリックで反転させ、鎖マークを押す。
ページ内へリンクをする場合は先程にシャープ「#」を入力し、先程名付けたアンカー名を加える。
これの繰り返しだ。
複雑な入れ子構造も作れる
コードを入力していて頭がゴッチャになりやすい入れ子構造も簡単にできる。
リスト項目をインデントすることで入れ子になる。あとは先程の作業を繰り返せば完成。
お わ り
コメント