設定

【ワードプレス】ページ内リンクを貼って記事の途中にジャンプさせる方法!

クリックすると同じ記事内の違う箇所にジャンプするリンクが使えるととても便利ですよね!

ここではワードプレスブログでページ内リンクを作成し、同じ記事内で指定した箇所にジャンプ出来るようにする方法を解説していきたいと思います。

カツオのメルマガ

ワードプレスでのページ内リンクの貼り方。

ワードプレスでのページ内リンクの貼り方の手順は以下のようなものになります。

  1. テキストにリンクを貼る。
  2. ジャンプさせたい箇所にアンカーを貼る。

テキストにリンクを貼る。

リンクを設定したいテキスト部分を選択し、リンクの挿入ボタンをクリックします。

リンクの挿入ボタン

 

挿入するリンクの文字列は「#」から始まる英数字で、何でもOKです。

↑ここでは例として「#aaa」としています。

ジャンプさせたい箇所にアンカーを貼る。

次にジャンプさせたい箇所にアンカーというものを貼っていきましょう。

アンカーを貼りたい箇所を選択し、アンカーボタンを押します。

アンカーボタン

※アンカーボタンが表示されていない場合はプラグインTinyMCE Advancedで設定してみて下さい。

関連記事:TinyMCE Advanced(プラグイン)の設定方法と使い方を説明!

 

入力するアンカーの文字列は先ほど設定したリンクの「#を含まない」ものにします。

先ほどの例で言うと「#aaa」というリンクを貼ったので、アンカーは「aaa」になります。

アンカーの入力例

ページ内リンクのサンプル

説明の中で設定したページ内リンクは下記になります。

答えを見たい人はここをクリック!

※クリックすると解説の開始箇所にジャンプ。

ページ内リンクの注意点。

同じ記事内でページ内リンクのアンカーは1種類につき1度しか使えません。

同じアンカーを複数回使ってしまった場合、最初に設定したもののみ有効となります。

ページ内リンクの図

 

また、記事編集画面で下記のようにテキストエディタで入力する事でページ内リンクは作成可能です。

  1. リンクを貼りたい文字列を<a href=”#〇〇〇”></a>で挟む。
  2. アンカーを挿入したい場所に<a id=”〇〇〇”></a>を記載する。

ページ内リンクの有効な使い方。

ページ内リンクは様々な使い方がありますが、僕は結論を先に知りたい読者を結論部分へジャンプさせる為に使用する事が多いです。

 

僕は記事を書く際になるべく結論から入るような構成を心がけているのですが、どうしても最初の部分で前置きの説明をしなくてはならない場合もあります。

そのような場合、既に理解している読者にとっては「そんなの知ってるから早く結論言えよ!」と思われてしまいかねません。

カッパ君
カッパ君
そういう読者の気持ちは分かる。

そこで「既にご存知の方はこちらから結論部分へ」というようなページ内リンクを最初の部分に設置する事で、読者のストレス軽減につながります。

 

また、説明の都合上、振り返って欲しい部分にページ内リンクを飛ばしたりしています。(これは多くの方がやっている事かと思います。長文の場合、特に有効)

まとめ。

ワードプレスブログにおける、同一の記事内で特定の箇所にジャンプするページ内リンクの貼り方を説明してきました。

うまく使うと読者にとって利便性の高い記事を作成する事が出来るのがページ内リンクなので、是非うまく活用していきましょう!

会社だけの人生を送りたい人は絶対読まないで下さい↓

カツオ
カツオ
参加無料のオンライン講座やってます。

副業で収入UPしたい!会社に依存したくない!スキルを身に付けたい!

そんな貴方は参加しなきゃ損!

カッパ君
カッパ君
参加者限定特典初心者でも月5万円稼げるブログノウハウをプレゼント!

参加者しか見れない秘密のコンテンツも盛りだくさん!

カツオのメルマガ
 

※携帯電話のメールアドレスでは登録出来ませんのでご注意下さい。

GmailやYahooメールなどがオススメ。

ABOUT ME
カツオ
大学卒業後に就職した会社では会社人間となることを余儀なくされるが、「会社に魂を売っても仕方ないな」と気が付いて退社。 ネットで検索していたらブログから始めて初心者でも個人ビジネスが出来る事を知り、実践してみたところ、月収10万→30万→100万とどんどんステップアップ。 今はやりたくない事はやらない、魂に正直なライフスタイルを送っている。本業は坊主です。
こんな記事も読まれています。