現在サイトのテーマ調整中です。デザインや記事が一部崩れている所がありますが、ご了承ください。

【SWELL】記事内でジャンプリンクを作る方法【ページ内リンク】

SWELL ページ内リンク作成
URLをコピーする
URLをコピーしました!

この記事は、ブログを書いていて、「記事の指定した部分に一気にとべるボタン」を作りたいと思ったことがある人に向けた記事です。

このようなボタンやリンクを「ページ内リンク」と呼びます。

こんな風にしたいと思う人におすすめの方法です。

  • 説明をとばして、申し込みフォームに一気にいける記事を作りたい。
  • ランキング記事でリード文をとばして、早くランキングを見れる記事を作りたい。
  • 記事の前の方に書いた所に一気に戻れるリンクを作りたい。

動画で解説

この記事のやり方で以下の動画のようなリンクを作成することができます。

Youtube

このようにリンク(ボタン)を押すと指定した場所にジャンプすることができます。
※「無料アイテム」というリンクをクリックすると「無料アイテム」の見出しのところまで戻るように設定しました。

動画を見てもよくわからない人の為に、実際にここに作ってみます。
2種類作ってみましたので、是非試してみてください。

目次

記事内ジャンプリンクの作り方

記事内ジャンプリンクを作る手順は実はとっても簡単です。
手順は以下の2STEPです。

  1. ジャンプの着地地点に”id”を割り当てます(後で解説します)
  2. ジャンプ用ボタンを作成し、ジャンプ先を先ほど割り当てた”id”を入力します

このようにわずか2STEPで記事内ジャンプリンクを作成することができます。

それでは記事内ジャンプリンクを作っていきましょう。

【STEP1】 ジャンプ着地点にidを割り当てる

まずは、ジャンプの着地先にidを割り当てます。
※着地点とはボタンをクリックしたときに、スクロールされる先のことです。

最後に動画での解説があるので、そちらを見て操作してもらえるとわかりやすいかと思います。

ジャンプ着地地点にしたいブロックをHTML編集します

ジャンプ着地地点にしたいブロックの「オプション」から「HTMLとして編集」をクリックします。
すると、HTML形式にすることができます。

HTMLとして編集
ブロックのタグの中にidを埋め込みます

ブロックのタグとは<h>や<p>などです。
<h>は見出し、<p>は段落を意味します。タグは沢山の種類があるのでわからないタグは検索で調べてみましょう。

ページ内リンク id割り当て2
タグの中にidを埋め込む

今回は見出しにidを割り当てたので<h3 id=”a”>と、赤文字の部分を追記しました。

idについて

idは自分で自由に設定することができます。
idは単純に着地地点の目印になるものなので、自分のわかりやすいものにしておくと良いです。

ただしidを決める際のルールもあります。

  • 一文字目は必ず英字
  • 同じ記事内で同じidは使えない
  • 英数字とハイフン(-)、アンダーバー(_)のみ使用可能
  • 空白は使えない

タグに「id=”自分で決めたid”」を追加します。

これで、ジャンプ着地地点にidを割り当てることができました。

SWELL ジャンプ先id割り当て

【STEP2】ジャンプ用ボタン(リンク)の作成

次にジャンプ用のボタンやリンクを作成します。

こちらも最後に動画があるのでそちらを見ながら作業してみてください。

ボタンやテキストを入力

SWELLのボタンを利用するか、いつも通りにテキストを入力してください。

リンク先を設定する

リンク設定で「#〇〇」と入力する。
※〇〇には自分で割り当てたidを入力します。

これで、ジャンプ用ボタン(リンク)の作成は完了です。

SWELL ページ内リンク作成

ページ内リンクを活用し見やすい記事を

ページ内リンク(ジャンプボタン)を活用することで、読者に必要な情報を早く届けたり、記事を読みやすくすることができます。

ぜひ、今回紹介したページ内リンクを活用して読みやすい記事を書いてみてください。

サイト支援

SWELL ページ内リンク作成

この記事が気に入ったら
フォローしてね!

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

この記事を書いた人

1998年生まれ(男性)
15歳の頃に技能や技術について学び始める
現在は『技術職・技能職』にて仕事中
数年前からスキンケアにハマり、毎日メンズスキンケアについて研究中。
趣味として『ブログ』と『Youtube』を運営

コメント

コメントする

目次
閉じる