クリックだけでＯＫ！ワードプレスで目次ページ・見出しリンクを使う方法

インターネットサイトを見ていたら、記事冒頭には見出しと書かれてその見出しをクリックすると読みたい所だけを読んだりって出来ますよね！

↓これです。

 

ここではワードプレスで作るサイトでその見出しにリンクを付けて同じページ内でジャンプする方法をお教えすると同時に、

クリックだけでそれらが可能になる裏技も合わせてご紹介いたします。

 

 

 

目次・見出しリンクの作り方

見出しリンクは基本的に下記のタグを使います。

 

↓これが上記見出しリンクに使ったタグです。（ジャンプ元リンク）

 

URLの所に見出しリンクを設置したい記事のＵＲＬを入れましょう。（TOPページならTOPページのURL）

 

↓そしてこれがジャンプ先に設置するタグです。（ジャンプ先タグ）

 

目次・見出しリンクを二つ以上作りたいならそれぞれの#a01の部分を#a02とか#a03とか変更して数を増やす事が出来ます。

（ジャンプ元を#a02にしたらジャンプ先もa02と指定してあげましょう）

 

↓ワードプレス記事作成画面でテキストモードで見てこのようになっていればＯＫです。（画像クリックで拡大）

 

 

●ワンポイントアドバイス

↓ジャンプ先のタグはこのようにお教えしましたが、

 

実際はテキストの部分を全部消して上記画像のようにジャンプ先タグの下に改行スペースを入れて使うと良いです。

 

じゃないとジャンプした後で位置ずれにより、テキスト部分に入力した文字列が画面内に収まらなかったりします。

ジャンプ先のタグの間にある「テキスト」部分は消して何も入力しないで使ったほうが使いやすいです。

 

 

AddQuicktagを使えばクリックだけで見出しリンクが作れる

ワードプレスのプラグインで「AddQuicktag」という物を使えば、普段使うタグを記憶させておく事が出来ます。

 

↓私はこのように見出しリンクに使うタグも記憶させて使っています。（ワードプレス記事作成画面）

 

 

私は「ジャンプ先」という名前ではなくて「見出しリンク受け」と設定していましたが意味は一緒です。

 

 

上記リンク先の記事でお教えしている設定方法で、

AddQuicktagに見出しリンクを入れる場合は下記のように設定しておくと良いです。

 

ボタン名：見出しリンクジャンプ元

↓開始タグ

 

↓終了タグ

 

 

ボタン名：見出しリンクジャンプ先

↓開始タグ

 

終了タグなし

 

見出しリンクでジャンプ先は終了タグを入れていないので、

飛ばしたい先の文字列の上に改行スペース一行分間を空けてその上で１クリックして使うだけでＯＫです。

 

 

以上、目次・見出しリンクの作り方と１クリックで使いこなせる方法でした。