ページ内リンク（内部リンク）の設定方法(WordPress+Cocoon編)
ページ内リンク（内部リンク）とは
ページ内リンク（内部リンク）とは、別のページに遷移する通常のリンクとは異なり、同一ページ(HTML)内の指定の場所へ移動するリンクのことです。別名ではページ内ジャンプと言うこともあります。ワードプレスとコクーン環境ではどのようにページ内リンクを作成するのか、その内部リンクの貼り方を紹介します。
どのような時に使うもの？
長い記事を書いた際、ページ内の所定の位置へのリンクを張りたい時に使います。
SEO対策として、コンテンツのボリュームは重要です。一つの記事の内容を濃くすると、当然長い記事になります。Hタグで構造化するのは当然やるとして、それ以外でも、任意の場所にフォーカスを当てたい場合があると思います。
例えば、記事の前半で紹介した部分をおさらいのため参照させたいという場合や、逆に理解している読者は本題の部分まで進めたい、という時に使えるリンクです。
読み手も「先に説明した◯◯の部分参照」とか「理解している方は◯◯まで読み飛ばして」と言われるより、リンクをクリックするだけで自動でページが移動してくれた方が嬉しいと思います。
ページ内リンクの作り方
設定順序としては、まず、リンク先を設置してから、そこへジャンプするリンクを作成します。
リンク先の設置方法
カスタムHTMLで、直接HTMLを入力します。
HTML入力欄が表示されたら、アンカータグでIDをセットします。例えば、次のようにjump01という名前のラベルを作ります。これで設置は完了です。
IDの名前は、自由に付けられます。半角英数字がよいでしょう。この名前でリンク先指定するので、ページ内でユニークになる名前を付けます。
次のようなHTMLコードを作成できればセット完了です。次はこの場所にリンクする設定を行っていきましょう。ちなみにこのリンク先の仕込みはプレビュー時や本番表示時には見えません。
↓ コピペ用
<a id="jump01"></a>リンク先へジャンプするリンクを作成
リンク先の設置が完了したら、次はそこへジャンプするリンクを設定します。文字にアンカーのセットをする場合は、順番でセットします。
- リンクをセットしたい文字部分を選択状態にする
- リンクマークをクリックする
リンク先の設定入力欄が表示されたら、
- さきほど設置したリンク先のIDを入力する
- この部分をクリックすると、リンク先へ飛ぶリンクがセット完了
オプションで新しいタブを開くかどうか選択できます。ページ内リンクの場合は、一般的には同じタブは開かずに移動させますが、どちらも同時に表示したいという場合は新しいタブで開くようにすると親切です。
リンクのセットが完了すると、このようにさきほど選択状態にしていた部分にアンカーがセットされます。
プレビューモードに切り替えて、このリンクをクリックすると、さきほど設置したリンク先へ移動できます。
動作確認
実際にこの下のリンクは、この手順でページ内リンクをセットしたものですので、リンクをクリックして動作を確認してみてください。この記事のどこかにジャンプすると思います。
【こちらのリンクで動作確認できます】
移動する場合はこちら。
コメント