どうもyusukeです。

1記事が結構長くなってしまった場合など、

記事冒頭の目次とは別に、ページ内リンクを設定したくなることってありますよね!

 

例えば、以下のような場合です。

ページ内リンク

こんな時に役立つページ内リンク(アンカー)の設定方法について、

分かりやすくまとめてみました。

ページ内リンクを設定する3ステップ

ページ内リンクの設定は、TinyMCE Advancedというプラグインを

導入していると、かなり簡単に設定ができちゃいます。

もし未導入の場合には、以下の記事を参考にしてみてください。

プラグインTinyMCE Advancedの導入手順と使い方

 

ページ内リンクの設定は以下の3ステップになります。

  1. リンクの飛び元にテキストリンクを設定する
  2. リンクの飛び先にアンカーを設定する
  3. ちゃんと遷移するか確認する

 

3番目の確認は念のための作業なので、

きちんと設定がされていれば、実質2ステップの作業になってきます。

それでは早速確認していきましょう〜!

 

テキストリンクを設定する

まずはリンクの飛び元に、テキストリンクを設定します。

以下のような感じですね。

テキストリンク(クリックすると実際に飛びます〜)

 

リンクの設定手順を説明していきます!

リンク設定

①リンクを設定したいテキスト箇所を選択する

②リンクボタン(上の画像のボタン)をクリックする

 

そうすると、以下のように文字を入力するボックスが出てくるので、

ここに、#始まりの文字を何か入力してください!

 

もしページ内リンクを複数設定するような場合には、

#1

#2

#3

のように設定していくのがオススメです。

(今回は1つだけの設定なので、#testとしてみました。)

リンクの飛び先にアンカーを設定する

では続いて、リンクの飛び先を設定します。

ここで、TinyMCE Advanced(プラグイン)の設定が重要になってきます。

メニューに、以下の「アンカー」ボタンを設置しておくようにしてください。

アンカーボタン

手順としては、

①飛び先のテキストを選択する

②アンカーボタンをクリックする

すると、以下のようなポップアップ画面が出てきます。

ポップアップ画面

③ここで、飛び元に設定した、文字を #を抜いて、入力する。

※飛び元には#の入力が必要でしたが、アンカーには#を入力しません←これ重要!

④入力ができたら、OKボタンを押す!

正しく設定ができていれば、飛び先のテキストの左端に、

イカリのマークが出てきます。

 

ちょっと小さいですが、左端の凛々しいマークが分かりますでしょうか。

イカリマーク

リンクが正しく遷移するか確認する

それでは最後に、きちんとリンクが設定されたのかどうか、

確認をして終わりにしましょう!

 

どのような動きになるのかを知りたい方は、

以下のテキストリンクをクリックされてみてください。

リンク飛び元

 

 

 

 

 

 

 

 

 

ここが飛び先です。

当サイトに訪問いただいた方限定で
ネットビジネスのノウハウ集を
無料プレゼント中



※入力内容をご確認ください。

※数分以内にご入力されたメールアドレスに
フリーラウンジの限定公開URLが届きます。
もし受信できない場合には、念のため迷惑フォルダをご確認ください。