WordPressを使っていてユーザーが少しでも見やすいように、他のページへ飛ばしたい、ページ内のこの部分に飛ばしたいということがあると思います。

ハイパーリンクとアンカーを利用して、他のページへ移動させる方法と、箇所を指定してページ内ジャンプする方法をご紹介したいと思います。

TinyMCE Advanced」プラグインを使用してのやり方です。

「TinyMCE Advanced」プラグインの設定方法や使用方法は「バス部」のサイトに詳しく説明が書かれているので、これからダウンロードする人は参考にしてください。

スポンサーリンク

ハイパーリンクの使い方

まずは、ハイパーリンクの使い方です。
ハイパーリンク(以下、リンク)とは、あるページの中に記された他のページの所在を表す情報(アドレス)のこと。
リンクを設定することで、クリックしたユーザーがそのページなどに飛ぶことができます。

\\アイコンはこちら//

設定したい文字をクリック長押しで横にずらし選ぶ(=ドラッグ)。
編集ページ上または、右クリックでアイコン「リンクの挿入/編集」をクリック。

飛ばしたいページのURLを入力して、Enterを押すか、横の「↲」をクリック。で、出来上がり!!

 

編集したい場合は、文字をクリックして、「編集」をクリック。

削除したい場合は、文字をクリックして、「リンクの削除」をクリック。

ページ内をジャンプさせる方法

ページ内の指定した行までジャンプさせる「ページ内リンク」には、アンカーを使います。

ページ内リンクの手順
  1. アンカーを設定する
  2. リンクを設定する

アンカーとは、リンクが設定されている部分(文字)のことです。目印です。これだけでは、まだピンっと来ませんね。
では、使用方法を見ていきましょう。

アンカーを設定する

\\アイコンはこちら//

まずは、飛ばせたい目的地に目印を指定します。

ページをスクロールして飛ばせたい目的地(目印)の場所まで進みます。
目的地をドラッグする。
編集ページ上のアイコン「アンカー」をクリック。すると、ID入力画面が出ます。

アンカーIDを入力する際の注意点
  • ID は半角英字で始め、英数字、ダッシュ「ー」、ドット「.」、コロン「:」、下線「_」が使用できます。
  • ページ内にいくつかアンカーを設定させるときは、同じIDは使えないので重複しないIDを設定してください。

IDを入力したら、コピーしておきます。

「OK」をクリック。アンカーの設定完了です。
修正するときは、⚓マークをクリックしてアンカーのアイコンをクリックすると、IDの入力画面に行けます。
削除するときは、⚓マークをクリックして「Back space」をクリックです。

 

※参考まで、HTMLのコード※
<a name="アンカーID">文字</a>
ページ内の好きな場所や特定の文字にアンカーIDを付けることができます。
例) <a name="a-ko" >あーこ</a>

<要素 id="アンカーID">文字</要素>  
要素それぞれにid属性を使って、アンカーIDをつけることもできます。
例) <h2 id="a-ko2">あーこ2</h2>
例) <div id="a-ko3">あーこ3</div>

リンクを設定する

リンクを作成したい場所まで戻って、前述で述べた「ハイパーリンクの使い方」を参考に設定します。

これもページ内リンクを利用して、前述した「ハイパーリンクの使い方」まで飛びます。

URLを入力する代わりに「#」+アンカーIDを入力します。

はい、おわり。これだけです♪

 

※参考まで、HTMLのコード※
<a href=”#アンカーID″>文字</a>

ページ内リンクのデモ

例を以下に示します。
「あーこ」にアンカーを「こちら」にリンクを設定して、
「こちら」をクリックすると「あーこ」まで飛びます。

〇〇については、こちらをご覧ください。

ジャンプ!!

あーこ

 

※参考まで、HTMLのコード※
<a href=”#a-ko">こちら</a>

<a name="a-ko">あーこ</a> 

ページジャンプ+ページ内リンクを同時に使う方法

アンカー設定し、リンク設定でページのURLに続けて「#」+アンカーIDを入力します。

はい、おわり。これだけです♪

例)アンカー ←リンクは「https://www.a-konesan.com/dictionary/#anchor」と入力してます。
クリックすると、「https://www.a-konesan.com/dictionary/」ページのアンカーID「anchor」まで飛びます。

まとめ

今までアンカーの使い方を知らなくて、ここからあっちへすぐ表示できるように案内したいのになぁと思っていた方は、ぜひ取り入れて、より良いサイト作りを一緒に目指しましょう♪

 

おわり

スポンサーリンク

Twitterであーこをフォローしたくなったらクリック☞

❀オススメ記事❀