簡単にショートコード呼び出す方法について教材追加しました!(2025年3月13日)

WordPress記事内でページ内ジャンプを設定する方法(SWELL版)

今回はWordPressの記事内でページ内ジャンプを設定する方法について解説します。

読者には、記事内のリンクをクリックして読み進めてもらったほうがSEO効果も上がりやすいので、どの記事にも導入文の記事の概要説明部分に設置しましょう!

※今回はSWELLのテーマで作成しています。

あかり

ページ内ジャンプは慣れてしまえばすぐできます!導入文だけでなく他の部分でも応用できますよ♪

ちなみにこの記事でもページ内ジャンプ機能を設定したので、実際にクリックしてみてイメージをつかんでみてください♪

読者が記事内で回遊しやすいよう、ぜひページ内ジャンプの機能を取り入れてみてくださいね!

目次

①導入文の中に見出しと対応したリストを作成する

↑ボックスでもなんでもOKなので記事の概要を解説したリストを作成
↑見出しも作成したら準備OK

導入文の中に「この記事の内容」のような感じで内容リストを作成した場合は、対応した見出しへジャンプできるように設定しましょう。

まずはリストと見出しを作成します。

②各リストに対応した見出しにhtmlアンカーを入力する

見出しにカーソルを合わせて右のバーを表示させます。

「高度な設定」をクリックし「htmlアンカー」の欄に自分でわかりやすい文字列を入力します。短くてOKです!

htmlアンカーに数字のみを入力するのは避けましょう!できれば英語やローマ字がおすすめ〇

③対応させたい導入文内のリストへ # に続けて見出しに設定したhtmlアンカーをリンクとして入力

見出しにhtmlアンカーを入力できたら、次は見出しと対応させたいリスト全文を範囲指定したままリンクボタンを押します。

2枚目の画像のように表示されたら、リンクの欄に先ほど入力したhtmlアンカーを「#(半角)」に続けて間違いの内容に入力しましょう。

エンターキーをおしてリンク完成!
こうなればOK

htmlアンカーが入力できたら(今回の場合は「#aiueo」としました。)エンターキーを押してリンクを完成させ、プレビューで確認します!

④プレビューでテキストに乗せたリンクと見出しが対応しているか確認する

ページ内ジャンプを設定出来たら、確実に狙った見出しへジャンプできるか確認しましょう!

設定した通りにページ内ジャンプできればOKです!

まとめ

今回はSWELL版でやり方を解説しましたが、無料テーマcocoonでも同じ感じで出来るはずなのでトライしてみてください☆

わからない点があれば、いつでもご連絡ください♪

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次