ページ内リンクの作り方!文字をクリックして記事内の好きなところに飛ばす方法【WordPress】

どうもおかきぱん(@okakipanBANKER)です

ブログを始めたての頃、

このページの一番下へジャンプ

のやり方が最初調べてもわからなかったので記事を作成しました。

この記事でわかること

WordPressのカスタムHTMLでページ内リンクを作成する方法

※CSSを使って作成する方法はこの記事ではわかりません。

目次

ページ内の好きなところにジャンプ

好きなところにジャンプさせる手順

STEP
アンカーを設置する
STEP
リンクボタンを設置する

これだけです。わかると非常に簡単です。

アンカーの設置

<a id=”      “></a>

↑をカスタムHTMLで入力するだけです。

ボタンをクリックしたら、これを設置した位置に飛んでくるようになります。

・”     “には好きな文字を入力
・文字、記号は全て半角で入力

「””」は自分の作業環境で入力しなおしてみてください。コピペでは反応しない場合があります。


実際にやってみます。

①ブロックの追加からカスタムHTMLを選択。

②<a id=”jump”></a>を入力。

※今回は例で”jump”ですが、自由に入力してください。

アンカーの設定は以上です。

カスタムHTMLなんかないよ!って方はこちらに隠れているので探してみてください。

アンカーは船についてる「いかり」のことだよ。

リンクボタンの設置

次に実際にクリックする場所を設定します。

リンクボタンから#     を設定する

こちらもこれだけです。


実際にやってみます。

①クリックさせたい文字をドラッグし、リンクボタンを選択

#jumpを入力してEnterキーを押すか、→の先をクリック

※今回は例で#jumpですが、先程設定したアンカーで”     “に囲われた中の文字を入力してください。

これだけです。できましたでしょうか?

別ページの好きなところにジャンプ

先程は同じ記事内でのジャンプでした。

別記事の特定の場所にジャンプさせるのも簡単にできます。

先程のリンクボタンに飛びたいところのURLを追加するだけです。

リンクボタン→飛びたいページのURL#   

私のブログで例を言うと、「ブログ1ヶ月目状況」記事のpv数分析に飛ばすには

をリンクボタンに入力すれば大丈夫です。

編集ページのURLではなく、実際に表示されるページのURLを入力してくださいね!

飛ぶ記事の先でアンカーを設定しておく必要があるよ!

今回は以上です。初めての短い記事ですね笑

おしまい!

一番上に戻る

follow me

コメント

コメントする

目次
閉じる