38．WordPressで目次を作成する(記事内リンク)

今回は記事内の目次としてページ内リンクを作成します。

※プラグインで目次嗄声を自動化しました。▷46．目次をWordPressのプラグインで自動作成する(Easy Table of Contents)

目次(テーブル)の作成

まずは記事のトップに目次をつくります。
最初の行にカーソルを合わせて【テーブルアイコン】を選択します。

 

メニューの中から【テーブル】をクリックして、テーブルのフォーマットを決めます。
「目次」というタイトルと、各リンク先となる「見出し名」を入れるだけですので、２行１列のテーブルにします。

 

テーブルが作成されますので幅を調整します。テーブルの右枠にカーソルを合わせて、左にずらします。

 

テーブルに文字を入力します。(フォントサイズを12ptで固定するために文字を入力した文字を選択し、12ptで設定しなおしています)
【プレビュー】で確認しながらテーブルのサイズも調整します。

 

次にテーブルのデザインを変更します。
【テーブルアイコン】→【表のプロパティ】と進みます。

 

表のプロパティ画面が開きますので【詳細】タグを選択し、[Border style]で「Solid」を選択し、[枠線の色]と[背景色]を設定し、【OK】をクリックします。

 

文字の色と太さを変更してテーブルは完成です。

 

記事(ページ)内リンクを作成する

作成したテーブルに書く見出しをリンク化します。
まずはリンク化したい文字列を選択し【リンクアイコン】をクリックします。

 

次にURLを入力します。他のURLとかぶらなければ文字列は何でもかまいませんが、先頭に「＃」を必ずつける必要があります。
入力しましたら、【Enterアイコン】をクリックします。

目次のリンク化がでたら、見出しの方でアンカーの設定を行います。
見出しの文字列を選択して、【アンカーアイコン】をクリックします。

 

[ID]に先ほど入力したURL(title1)を設定します。アンカー側では「#」を入力しません。
設定したら【OK】をクリックします。

 

これでページ内リンクが設置できましたが、実際に動作を確認したところ、見出しが見切れてしまいます。

 

そこで手っ取り早く対応する方法として、見出しの上に白い文字列をつくり、それをアンカーとします。

 

これで目次を選択すると、その見出しが見切れることなく表示されるようになりました。