この記事は、ブログを書いていて、「記事の指定した部分に一気にとべるボタン」を作りたいと思ったことがある人に向けた記事です。
このようなボタンやリンクを「ページ内リンク」と呼びます。
こんな風にしたいと思う人におすすめの方法です。
- 説明をとばして、申し込みフォームに一気にいける記事を作りたい。
- ランキング記事でリード文をとばして、早くランキングを見れる記事を作りたい。
- 記事の前の方に書いた所に一気に戻れるリンクを作りたい。
動画で解説
この記事のやり方で以下の動画のようなリンクを作成することができます。
このようにリンク（ボタン）を押すと指定した場所にジャンプすることができます。
※「無料アイテム」というリンクをクリックすると「無料アイテム」の見出しのところまで戻るように設定しました。
動画を見てもよくわからない人の為に、実際にここに作ってみます。
2種類作ってみましたので、是非試してみてください。
記事内ジャンプリンクの作り方
記事内ジャンプリンクを作る手順は実はとっても簡単です。
手順は以下の2STEPです。
- ジャンプの着地地点に”id”を割り当てます（後で解説します）
- ジャンプ用ボタンを作成し、ジャンプ先を先ほど割り当てた”id”を入力します
このようにわずか2STEPで記事内ジャンプリンクを作成することができます。
それでは記事内ジャンプリンクを作っていきましょう。
【STEP1】 ジャンプ着地点にidを割り当てる
まずは、ジャンプの着地先にidを割り当てます。
※着地点とはボタンをクリックしたときに、スクロールされる先のことです。
最後に動画での解説があるので、そちらを見て操作してもらえるとわかりやすいかと思います。
ジャンプ着地地点にしたいブロックの「オプション」から「HTMLとして編集」をクリックします。
すると、HTML形式にすることができます。
ブロックのタグとは<h>や<p>などです。
<h>は見出し、<p>は段落を意味します。タグは沢山の種類があるのでわからないタグは検索で調べてみましょう。
今回は見出しにidを割り当てたので<h3 id=”a”>と、赤文字の部分を追記しました。
idについて
idは自分で自由に設定することができます。
idは単純に着地地点の目印になるものなので、自分のわかりやすいものにしておくと良いです。
ただしidを決める際のルールもあります。
- 一文字目は必ず英字
- 同じ記事内で同じidは使えない
- 英数字とハイフン(-)、アンダーバー(_)のみ使用可能
- 空白は使えない
タグに「id=”自分で決めたid”」を追加します。
これで、ジャンプ着地地点にidを割り当てることができました。
【STEP2】ジャンプ用ボタン（リンク）の作成
次にジャンプ用のボタンやリンクを作成します。
こちらも最後に動画があるのでそちらを見ながら作業してみてください。
SWELLのボタンを利用するか、いつも通りにテキストを入力してください。
リンク設定で「#〇〇」と入力する。
※〇〇には自分で割り当てたidを入力します。
これで、ジャンプ用ボタン（リンク）の作成は完了です。
ページ内リンクを活用し見やすい記事を
ページ内リンク（ジャンプボタン）を活用することで、読者に必要な情報を早く届けたり、記事を読みやすくすることができます。
ぜひ、今回紹介したページ内リンクを活用して読みやすい記事を書いてみてください。
コメント