店舗一覧、ショップリストなど、プラグインを使わず目次を作る方法

目次を自動生成してくれるプラグイン『Table of Contents Plus』は良いけれど、店舗一覧、ショップリストなどでジャンプする先が多い場合、横に並べてリンクを貼りたい場合があるかと思います。

そんな時に使える方法です。

>>プラグインを使いたい場合はこちらの記事から

見出しIDを付ける

ジャンプさせるためには、飛ばすためのIDを各見出しに付ける必要があります。

例えば、見出しに見出し2を使った場合は、テキスト表示にすると

<h2>タイトル</h2>

になるところを

<h2 id=”tokyo”>タイトル</h2>

id=”tokyo”のtokyoの部分に好きなIDを入れてください。

※この時に注意したいのはIDなので半角英数のみとなります

店舗一覧、ショップリストの場合だったら、各地域のアルファベットなどで、わかりやすいようにしておくと良いでしょう。

目次を作る

見出しIDを付け終わったら、今度はいよいよジャンプさせるためのリンク作りです。

<a href=”#tokyo”>東京都</a>

見出しIDに#を付けるとそのIDのリンクを貼ることができます。そのリンクに名前を入れるだけでジャンプするようになります。

これをもとに例で仕切りを入れながら作ると

<a href=”#saitama”>埼玉県</a> | <a href=”#tokyo”>東京都</a> | <a href=”#mie”>三重県</a> | <a href=”#kyoto”>京都府</a> | <a href=”#osaka”>大阪府</a> | <a href=”#hyogo”>兵庫県</a>

こんな感じにすると見栄えはこうなります。

埼玉県 | 東京都 | 三重県 | 京都府 | 大阪府 | 兵庫県

 

使用例)美構造開脚システム オフィシャルアクセサリー様

まとめ

いかがでしたか?ちょっとコードをさわれない人には難しいかもしれませんが、見る側としては本当に便利になるので、特に今回のような店舗一覧、ショップリストを入れる場合には効果を発揮してくれることでしょう!!


20171028 大阪・梅田
「脱キラキラ 女性経営者への道」

~目指せ月商100万円~

コメントを残す

ABOUTこの記事をかいた人

伝説プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。