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

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

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

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

 

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

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

 

みみこみみこ
まさに、ユーザビリティの向上ってやつですね!

ー ブログで伸び悩んでいる方へ ー

無料動画

アンカーリンクとは

アンカー

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

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

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

 

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

ナルト 避雷針の術
引用:NARUTO

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

 

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

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

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

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

 

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

TinyMCE Advanced

 

 プラグイン名
TinyMCE Advanced

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

 

手順はこちら↓

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

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

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

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

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

 

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

 

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

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

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

 

直接コードで書く方法

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

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

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

 

手順はこちら↓

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

 書き方
・元のリンク
<a href="#moji">テキストが入ります</a>
・飛び先のリンク→「id」を付ける
<a id="moji"></a>

 

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

↓↓↓

アンカーリンクコード

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

 

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

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

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

 

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

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

 

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

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

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

 

 クリックして試せます。
「THE THOR」のロゴサイズのカスタマイズ記事に飛びます↓
その中の、コードの説明箇所にアンカーリンクを設定。

 

おかぴーおかぴー
テキストリンクだけではなく、ブログカードでも同じように設定できますよ〜

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

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

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

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

アンカーリンク 設定方法 内部カード

 

関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^   今回の記事は、「THE THOR[…]

THE THOR サイトロゴ

 

別タブで開くようにする

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

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

 コード
target="blank"

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

 

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

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

アンカーリンク 設定方法 別タブ

 

アンカーリンク 設定方法 別タブ

 

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

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

アンカーリンク 設定方法 別タブ

 

 クリックして試せます。
別タブで飛ぶ例↓

 

▼ブログカードの場合

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

アンカーリンク 設定方法 内部カード 別タブ

 

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

関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^   今回の記事は、「THE THOR[…]

THE THOR サイトロゴ

 

THE THORの場合の不具合?

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

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

 

<h2 id="jump">THE THORの場合の不具合?</h2>

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

the thor 不具合

 

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

<h2><a id="jump"></a>THE THORの場合の不具合?</h2>

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

 

まとめ

まとめ

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

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

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

 

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

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

頑張ってくださいね〜

デザイン効果と組み合わせて、最適な収益化方法を見つけよう

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

興味がある方は、ぜひ以下からご覧ください〜

 

↓↓↓

 

 

ストレスフリーなブロガーライフを送ろう ブログデザインお悩み解決室WPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG