WordPress

WordPressテーマ「Cocoon」解説 ページ内の特定の場所にジャンプする方法

「アンカーリンク」説明記事表紙画像
ちゃば
ちゃば

長い記事のページの時に、ある地点からある地点までジャンプする方法を教えて。

かみさん
かみさん

アンカーリンクね。

ページジャンプともいうけど、やり方は簡単よ。

リンクの種類

まずはリンクそのものが分からない方はこちらへ⇒IT用語集【リンク】

この「青い下線と文字」リンクと呼び、ここをクリックすると指定された場所へ移動します。

リンクにはいくつかの種類があります。

リンクの種類
  1. 内部リンク:同じサイト内で違うページに移動するリンク
  2. 外部リンク:今見ているサイトから違うサイトのページに移動するリンク
  3. アンカーリンク:今見ているページ内の特定地点へ移動するリンク

まず初めに上記①内部リンク②外部リンクの方法について説明します。

内部リンク、外部リンクに関して「そんなの既に知ってる」という方は、アンカーリンクの方法へジャンプしてくださいこのリンクがまさにアンカーリンクです)。

内部リンク、外部リンクの方法

では「内部リンク」「外部リンク」の方法について説明します。

方法はどちらのリンクも同じです。

まず移動させたいページのURLをコピーします。

URLブラウザの上部に表記されます。

URLの場所確認画像

次に①リンクを設定したい場所(画像やテキスト)を選択し、②ブロックエディタのリンク挿入を選択、③表示されるURL欄に移動させたいページのURLを入力します。

内部リンクの設定方法画像

④の「新しいタブで開く」のチェック項目はリンク先に移動する場合、今のページで切り替えるか、もしくは新しいページのタブで開くかの方式を選択できます。

上記は「内部リンク」の設定ですが、「外部リンク」の設定方法も同じです。
「外部リンク」自分のサイト以外からのURLを入力します。

このサイト内の違うページに行くのは「内部リンク」IT用語集「リンク」
このサイトとは違うWebページに行くのは「外部リンク」「Amazon」

「内部リンク」、「外部リンク」の設定方法の説明は以上です。

アンカーリンク(ページジャンプ)とは

アンカーリンク(HTMLアンカーリンク)とは、ページ内で特定の地点へ移動するためのリンクのことです。

長い記事のページでは意図的にある地点まで読み手に移動してもらいたいことがあります。

たとえばこれから説明することがすでに分かっている人には、『ここは飛ばして次の項目にお進みください』というような案内にしたい場合です(先ほど既に設置しました)。

そういう場合にアンカーリンクを設定すると一瞬でその特定の地点まで移動できるので、探す手間を省き、読み手にとってストレスのない記事にすることが出来ます。

ではもう一度試しにやってみましょう。

この記事の最後の【まとめ】まで瞬時に移動するように設定しました。
【こちらのリンク】をクリックしてください(また戻ってきてくださいね)。

アンカーリンクの設定方法

ここからアンカーリンクの設定方法について説明します。

①アンカーリンクの設定

アンカーリンク設定方法の説明画像①
  1. まず初めにリンクを設定したいテキスト(画像でも可)を選択します。
  2. ブロックエディタのリンクの挿入をクリックします。
  3. すると選択したリンクの下にURL入力欄が表示され、文字列を入力します
    文字列「#(ハッシュ)〇〇」(〇〇は任意の文字列)を入力し、をクリックします。

今回は例として文字列を「#abc1」と入力します。

注意点
アンカーリンク設定(文字列)のルール
  • アンカーリンクに設定する文字列はページ内の文字とかぶらないようにする
  • 文字列は大文字、小文字は区別される。
  • 文字列にハイフン(‐)、アンダースコア(_)、コロン(:)等の半角記号は含めることはできるが、スペースを含めることはできない
  • 文字列の先頭はアルファベットでなければならない。

②移動先の指定

次に移動先の指定を行います。
ジャンプさせたい場所の指定です。

アンカーリンク設定方法の説明画像②
  1. 移動先のブロックを選択します。
  2. 編集画面右上の「設定」ボタンをクリックし、右サイドバーを表示させます。
  3. 右サイドバーのブロック設定の下のほうにある「高度な設定」を開きます。
  4. HTMLアンカー入力欄に、アンカーリンク作成時に入力した【#】を除いた文字列を入力します。
    今回は「abc1」となります。

これで設定は終了です。
アンカーリンクが設定され、リンクをクリックすると指定された場所に瞬時に移動します。

【まとめ】

ちゃば
ちゃば

ふう、なんとかできた。

サンキュー。

かみさん
かみさん

長い文章だと要所要所で使うと良いわ。

あとは注意点に気を付けてね。

ちゃば
ちゃば

注意点って

なんやったっけ??

かみさん
かみさん

これもアンカーリンクしておくわ。

ここのリンクをクリックして再確認してね。

タイトルとURLをコピーしました