[PR] WordPress苦手主婦のためのWordPress専門コミュニティ「MasterPress®︎」詳細はこちら

【超簡単】WordPressでページ内リンク(アンカーリンク)を作成する方法!

どうも。ゆかです。

ワードプレスブログの長い記事とかLP(ランディングページ)にて、ページの途中にジャンプさせたいなぁと思ったことはありませんか?

通常の投稿だったら、目次機能を使用することで、目次から見たいところにジャンプすることができます。

ですが、この目次機能がLPでは使用できないんですよね。 

というわけで、この記事では、ページ内リンクを作成して自由にページ内を移動させるためにジャンプさせる方法をご紹介します。 

パソコンが苦手だし、自分ではちょっとできないという方は、WordPressスポットサポート」というサービスをご活用ください。

【超簡単】ブロックエディターでのページ内リンク(アンカーリンク)の方法

クラシックエディターを使うより、ブロックエディターの方が簡単にページ内リンク(アンカーリンク)を作成することができます。

WordPressでページ内リンク(アンカーリンク)を作成する手順

❶アンカーを作成
❷リンクの設定

アンカーというのは『くい』という意味があります。文字通りページ内のジャンプ作成の目印ということです。

アンカーを作成

アンカーは英数字で作ります。

例えば、anchorー1、jump01

 

anchor作成の注意

先頭は、アルファベットにしましょう。

1ページに複数ジャンプを使用したいときは、同じアンカーは使ってはいけません。

リンクの設定

作ったアンカーを使って、リンクの設定をしていきます。

まず投稿をテキストモードにしてください。

ジャンプさせる出発点に下のタグを入力します。

<a href=”#△△△“>ここから移動する</a>

#△△△の△△△部分に先ほど決めたアンカーを入力します。

ジャンプの到着地点には下のタグを入力します。(#入れないようにしてください)

<a id=“△△△”>ここへ移動</a>

この手順だけでページ内をジャンプするようになりました。

上から下だけでなく下から上へと戻ることも可能です。

 

使用例

<a href=”#anchor”>・着地地点へ飛びます。</a>

 

テスト

 

テスト

 

<a id=”anchor”>着地地点</a>

こんな感じでテキストモードに入力します。

 

ここから

・着地地点へ飛びます。

テスト

着地地点

 

 

動きが小さいのでイマイチ分かりにくいかもしれません…(^^;

 

WordPressでページ内リンク(アンカーリンク)を作成する方法のまとめ

今回は、ページ内リンクを作成して自由にページ内を移動させるためにジャンプさせる方法をご紹介しました。

ブロックエディターとクラシックエディターとやり方は違います。

ただ、ブロックエディターを使った方が超簡単にできるので試してみてください♪

ランディングページに使えますので、覚えておくと良いかと思います。

 

普段の投稿などは、もうすでに便利な目次のプラグイン【Table of Contents Plus】がありますので、ぜひこちらもご活用くださいね(^^)

 


ブログアフィリエイトの基礎知識を分かりやすく丁寧に丸っと公開中!!

メルマガに登録すると、シークレットサイト「Escape from Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。
メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


2件のコメント

上記の通り設定しました。
が、リンクをクリックするとトップページに移行します。
考えられる原因ありますでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
ゆかアフィリエイター兼WordPress専門家
ご訪問ありがとうございます! ゆかブログの管理人でアフィリエイター兼WordPress専門家のゆかです。福岡で3人の子供を育てながら、お家でのんびりとブログを書いて生活しています。
ブログを書く以外のお仕事は、パソコンが苦手な女性起業家さんのワードプレスブログ運営をサポートしたり、代行でワードプレスの立ち上げをしています。 ●WordPressコミュニティ『MasterPress』運営
SEO検定2級
●チャンネル登録1万人超え!WordPressブログ構築専門YouTubeチャンネル「ゆかチャンネル

ゆかブログでは、WordPress作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。
詳しいプロフィールはこちら>>