>>アフィリエイトで毎月20万円の報酬が発生する仕組みを作る方法はこちら

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

どうも。ゆかです。

ワードプレスブログの長い記事とか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作成方法・ブログ記事の書き方・アフィリエイトの方法など、パソコン苦手な初心者さんの『困った!!』を解決しています。

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