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

ページ内をリンクでジャンプさせるアンカーリンクの作成方法

どうも。ゆかです。

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

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

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

というわけで、この記事では、わたしがLPを作成したときに使ったページ内をジャンプさせるためのアンカーリンクの作り方をご紹介します。 

この記事では、クラシックエディターを使っている方向けにページ内リンクをご紹介しています。

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

ブロックエディターでのページ内リンクの方法

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

ページ内をリンクでジャンプさせる手順

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

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

アンカーを作成

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

例えば、anchorー1、jump01

 

anchor作成の注意

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

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

リンクの設定

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

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

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

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

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

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

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

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

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

 

使用例

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

 

テスト

 

テスト

 

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

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

 

ここから

・着地地点へ飛びます。

テスト

着地地点

 

 

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

 

最後に

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

 

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

 


お子さんとの時間を優先させながら
自分の力で稼げるママになって欲しい

メルマガでは、これからブログを始めたいと思っているパソコン苦手な女性のために、ブログの作り方をお届けしています。

ブログ作りの基本的なことから大事なポイントなど、分かりやすく丁寧に必要な知識を毎日配信中!

メルマガの登録は無料!配信解除はいつでもOK! 登録はこちら↓


コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
ゆかアフィリエイター兼WEB制作マーケター
ご訪問ありがとうございます!
当ブログの管理人でアフィリエイター兼WEB制作・マーケターのゆかです。

パソコンが苦手な初心者さんのブログ運営をサポートしたり、代行でWordPressの立ち上げをしています。

毎月1から2件のサイト代行をし、WordPressのコミュニティを運営したりアフィリエイトサイトを運営したりしております。

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

詳しいプロフィールはこちら>>