【動画あり】記事の意図した場所へ飛べる！アンカーリンクの設定方法をご紹介

 

記事を書いていると、「この記事の・この場所に、クリックしたらドンピシャで画面が切り替わったら良いなぁ」ってことはありませんか？

全てのリンク先が記事の一番上だと、記事の流れ的になんかしっくり来ない時がありますよね。

 

そこで、今回解説するアンカーリンクという方法を使えば、

このアンカーリンクの方法を使えば「ピンポイントでここを見て！」という作り方が可能で、ブログを見にきた人にとても親切な作りになりますよ。

 

アンカーリンクとは

アンカーリンクとは、ブログ内の任意の場所を設定して、ピンポイントで飛ばしてあげるリンクのことです。

そして、アンカーは英語で錨（いかり）の意味（船の錨）。

船が「位置を固定するため」に下すもので、アンカーリンクもクリックした時の飛び先を固定するために使用します。

 

ナルトで言うなら、四代目火影・波風ミナトの避雷針の術みたいなイメージ。

クナイにマーキングをしておいて、その場所まで一瞬で移動する術なのですが、まさにそれと同じ原理！

 

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

アンカーリンクの設定方法はいくつかあり、どれも同じ動きをするのであなたのやりやすい方法を選択してください。

1. プラグイン「TinyMCE Advanced」を利用する方法
2. 直接コードで書く方法

それぞれ解説していきますね！

 

プラグイン「TinyMCE Advanced」を利用する方法

 

このプラグインは、記事作成を効率よく行うための便利な機能がたくさん入っていて、今回のアンカーリンクの設定もリンクを付けるのと同じ要領でできます。

 

手順はこちら↓

・プラグインをインストールし、アンカーリンクの項目を設定する

・「ビジュアルエディタ」でリンクを付けたい文字をドラッグ

↓

・リンクの挿入/編集ボタンをクリック

↓

・頭に「#」を付けて、任意の文字列を書く

↓

・今度は、飛ばしたい場所に同じ任意の文字列を書く（#は付けない）

 

こうすることで、クリックするとその場所まで画面がスクロールされます。

 

他の身近な例としては、目次があります。

記事内に見出しを付けて目次で見出しをクリックすると、記事の途中に飛びますよね。

これもアンカーリンクの原理を利用しています。

 

直接コードで書く方法

次に、直接コードで書く方法です。

なぜこの方法を解説するかというと、もし「TinyMCE Advanced」がWordPressのテーマと相性が悪く使用したくない・使えない場合があった時に対応できるからです。

コードを見ることで、どのような仕組みになっているかも分かるので、勉強したい方はこちらの方法もトライしてみると理解度が深まると思いますよ^^

 

手順はこちら↓

「テキストエディタ」でリンクを付けたい文字を以下のコードで囲む

 

この方法を説明するために、先ほどのプラグインで設定したところを「テキストエディタ」で見てみましょう！

↓↓↓

赤背景のところが今回のコードです。

 

最初の「<a href=”#moji”>リンクを付けたい文字</a>」にリンクがついていて、

「<a id=”moji”></a>飛ばしたい場所に〜」と書いてあるところに飛ぶ仕組みになっています。

これと同じように書けば、アンカーリンクを設定できます。

 

idのところは、他のタグで囲っても対応できます。

例）
<div id=”moji”>間に文字を入れても対応できます</div>
<h2 id=”moji”>見出しにも使える！</h2>

 

アンカーリンクのパターン

アンカーリンクは別のページの任意の場所にも飛ばすことができます。

その場合は、リンク先のURLの末尾に「#」を付けてあげればOKです！

 

 

ブログカードでアンカーリンクをつける方法

テキストにリンクを付けたり、URLにリンクを付けるだけでなく、ブログカードなどの内部リンクにもアンカーリンクは活用できます。

THE THORの内部カードを例にあげると、赤背景のように末尾に「#」を付けてあげればOK。

そして飛び先の記事に「id」を付ければ飛ばせます。

 

 

別タブで開くようにする

別のページに飛ばす場合、同じタブではなく別タブでページを開くようにすることができます。

通常のリンク設定と同じなのですが、

というコードを追加すれば可能です。

 

▼ビジュアルエディタの場合

リンク設定＞赤枠のところをチェックするだけ↓

 

 

▼テキストエディタの場合

赤背景のように書くようにしましょう↓

 

 

▼ブログカードの場合

赤背景のように書きましょう↓

 

別タブで飛ぶ内部カード例↓

 

THE THORの場合の不具合？

当ブログで使用している「THE THOR」のテーマで、見出しに以下の書き方でidを付けると、

同じ見出しが一つ下にも出てきて、一段ずつ各見出しがずれる現象がありました。

 

<h2 id=”jump”>THE THORの場合の不具合？</h2>

と書くと、下のような感じで同じ見出しが続きます↓

 

もし同じように「あれ？」ってなっている人は、

<h2><a id=”jump”></a>THE THORの場合の不具合？</h2>

という感じで書くと解決しますので、調整してみてください^^

 

まとめ

今回は誰でも簡単にできるアンカーリンクの設定方法をご紹介しました。

アンカーリンクを設定するメリットは、

1. 記事の任意の場所に飛ばせるので、見たい内容がすぐに見れる
2. それにより、ユーザビリティの向上につながる

 

デザイン面も重視しながら記事の回遊率を高めていくことが可能になります^^

細かな点ですが、ユーザビリティを高めていくことであなたのブログのファンも増えていくと思います！

頑張ってくださいね〜