記事執筆ノウハウ

WordPressにページ内リンクとアンカーを設定する方法

ページ内リンクとアンカー

 

どうもyusukeです。

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

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

 

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

ページ内リンク

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

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

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

 

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

リンク設定

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

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

 

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

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

 

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

#1

#2

#3

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

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

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

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

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

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

アンカーボタン

手順としては、

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

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

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

ポップアップ画面

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

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

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

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

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

 

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

イカリマーク

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

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

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

 

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

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

リンク飛び元

 

 

 

 

 

 

 

 

 

ここが飛び先です。

ABOUT ME
yusuke
当サイトの管理人yusukeです。 現在はPC1台でのんびりネットビジネスを行ないつつ、自宅で娘の成長を眺めながら生活しています。 新卒でブラック企業に入社してしまうも、起死回生の転職活動で、外資系経営コンサルティングの会社に転職を果たす。 年収1,000万円を超えた頃から、サラリーマンをこのまま続けてても、良い暮らしとか一生ムリということに気づき、ネットビジネスを開始する。 ウェブ系のビジネスに関しては完全に素人な所からスタートし、開始4ヶ月で月収45万円を達成。 副業で稼げるようになったことで、本業がやらなくてはいけない事から、趣味として楽しむ事に変わる。 現在は、かつての自分と同じように、サラリーマン以外に選択肢が無い方に向けて、ゼロから始められるネットビジネスのノウハウを提供。 時間、場所、人、あらゆる制約条件の無いビジネスをPC1台で実践できるノウハウを本サイトで紹介しています。