知っトク ナビたん

Read Article

ページ内ジャンプ。ブログの目次リンクの作り方。メリットは?

スポンサード リンク
ページ内ジャンプ。ブログの目次リンクの作り方。メリットは?
この記事の所要時間: 457

ページ内リンク

それとも、ページ内ジャンプって言うんでしょうか?

 

先日、ワードプレスでの目次の作り方が分からず、

しばらく調べまわることになりました。

(元SEですが、HTMLはほとんど知りません)

 

ようやく、目次の作り方が分かったので、

この記事にて、ページ内ジャンプする目次の作り方を、ご紹介します。

 

また、

ページ内ジャンプの目次のメリット・デメリットについても、

考察した結果を書いてみます。

スポンサード リンク

目次。

 

まずは、

この記事の目次を載せますね。

 

それぞれ、クリックすることで、

この記事内の各タイトルに移動(ジャンプ)します。

 

目次を作る手順。

 

まず、サンプルを載せます。

クリック(スマホならタッチ)してみて下さい。

 

▷A.目次のサンプル(クリックすると、移動するよ)

 

 

A’.目次のサンプル(移動先)

 

距離が近いので、分かりづらいですが、

クリックすることで、「A」から「A’」にジャンプしました。

 

これを複数作ることで、

目次になっていくのですが、

 

目次を作るには、

以下の 2 つの手順が必要です。

①ジャンプ先に目印を設定する。

②目次へのジャンプを設定する。

かんたんですよ。

順番に見てみましょう。

 

ジャンプ先に目印を設定する。

 

目印の設定方法は 2 種類あり、

<a name=”目印“>文章</a> 

と、

<id=”目印“> 

という書き方です。

 

上のサンプルを例に取ります。

A’.目次のサンプル(移動先)

と書かれていますが、

実はこれをテキストで見てみると、

<a name=“S1”> A’.目次のサンプル(移動先) </a>

と書かれています。

 

この “S1” が、

ジャンプ先の目印というワケですね。

 

他にも、

<h2 id=”S2″>目次1</h2>
<div id=”S3″>文字列</div> 

という書き方もできますよ。

実際に、最初の目次はこの上の方法で書かれています。

 

また、

目印に当てはめる文字列は、

半角英数字から好きなものを設定できます。

しかし、

同ページ内で同じ文字列を使うことは、できません。

 

目印へのジャンプを設定する。

 

目印が設定できたら、

次は目次の文字列に、ジャンプ先のリンクを設定します。

 

設定方法はかんたんで、

<a href=”#目印“>文章</a>

と書きます。

 

上のサンプルを例にとると、

▷A.目次のサンプル(クリックすると、移動するよ)

は、

テキストだと、

<a href=”#S1“>▷A.目次のサンプル(クリックすると、移動するよ)</a>

と書かれています。

 

” ” を忘れないで下さいね。

 

目次は作るべき?

 

また、

実際に目次を作ってみて感じたのですが、

 

単なるテキストの目次には、

メリットしかありません。

 

しかし、

ページ内ジャンプの目次は、

メリットとデメリットの両方があります

 

<目次のメリット>

▷目次があることで、読み手に「これだけあるんだな」という、一種の安心感を与える。

▷緊急性のある情報(例えば”ヤケドの応急処置“など)に即アクセスできるため、読み手がストレスを感じにくい。

1 つ目は、ページ内ジャンプは関係なく、

単純に目次を作るメリットです。

 

そして 2 つ目は、

ページ内ジャンプの目次を作るメリットになります。

 

ただ、これは場合によって、

デメリットにも変わると考えられます。

<ページ内ジャンプの目次のデメリット>

▷最初から順番に読むことで完成する記事が、部分的に読まれることで、本当に伝えたいことが伝わらない可能性がある。

 

つまり、

単なるテキストだけの目次は、全ての記事に書いても良いが、

ページ内ジャンプの目次は、目的に合わせて設定する必要がある

ということになりますね。

 

例えば、

記事を一種のレターとして書いていて、

 

上から順番に読むことで読み手に信用してもらう

 

または、

 

全部読むことで、読者の購買意欲をかき立てる

 

という目的で書いているのであれば、

ページ内ジャンプの目次は、作らない方がいいです。

 

逆に、

緊急性のある情報(“人が倒れた 対処法“など)を記事にする場合は、

 

読み手がすぐに情報を取れるように、

ページ内ジャンプの目次は作った方がいいでしょう。

 

あると便利な機能ですが、

目的に合わせて、使い分ける必要がありますね。

 

それでは。

URL :
TRACKBACK URL :

Comments & Trackbacks

  • Comments ( 2 )
  • Trackbacks ( 0 )

Leave a Reply

*

Facebookでコメント

スポンサード リンク
Return Top