SWELLを使用されている方で、リンクをクリックすると、同じページ内（飛ばしたい部分）へジャンプする方法（アンカーリンク）をパソコンが苦手な方でも分かりやすく解説します。
パソコンが苦手な方やブログ初心者の方には抵抗がある、href属性やid属性・target属性・（a）タグなどは一切触れていません。
実際に下記のリンクで試せます。
上記の「ここをクリック」の部分をクリックすると、下記赤字部分の「ここまでジャンプ」に飛びます
ここまでジャンプ
SWELLを使ったページ内リンク「アンカーリンク」の作成手順
リンクをクリックし、指定した記事内へ飛ぶ方法を3つの手順で解説します。
「アンカーリンク」の作成方法
例：ジャンプ先は赤字の「ここまでジャンプ」ですが、何も記載されていない空白のブロックでも可能です。
ジャンプ先の文字や空白の行をクリックします。今回は赤字の「ここまでジャンプ」のブロックをクリックします。
※クリックする場所は文章の冒頭や、途中でも問題ありません。ジャンプしたいブロックの中であればどこでもOKです。
- ブロックを選択
- 下へスクロール高度な設定をクリック
- HTML アンカーの下に「任意の文字」を入力。
任意の文字とは、半角数字やアルファベット等の設定したい文字です。例では「aaa」としています。
- 入力した同じ文字は記事内で複数使用不可。
- 大文字・小文字は区別される。
- 半角記号のハイフン(-)アンダースコア(_)ピリオド(.)コロン(;)も使用可能。
- 先頭にスペースは使用不可。
リンクにしたい文字や文章を選択し、リンクボタンをクリックします。
手順２でHTML アンカーに入力した文字の頭にハッシュ(#)を付けてEnterを押して完了です。
※シャープ(♯)ではありません。ご注意ください。
「アンカーリンク」作成後の確認
アンカーリンクが正しく動作されるか、確認ください。
公開前の確認方法は下記のように、プレビュー新しいタブでプレビューをクリックします。
開くと記事のトップ画面が表示されます。
下にスクロールすると、下記のようにリンクになっているのでクリックして確かめます。
別記事の記事途中へ飛ばす方法
基本的なやり方は同じです。リンク先の記事にて、手順２のやり方で高度な設定に文字を入力します。
リンク先の記事（任意の場所）高度な設定HTML アンカーを入力
その後、手順３のやり方でハッシュ「#」の前にURLを入れます。
例「URL/#HTMLアンカー」のように入力します。
アンカーリンクの使用例
「目次に戻る」や「トップページに戻る」に使用されることが多いです。
また、読み飛ばしにも使われています。
例えば、既に知っている経験者には不要だけど、初心者には説明が必要な場合にアンカーリンクを設置しておくとユーザビリティが向上します。
基本的な使い方以外には、サイトのトップページ内で目次を作り、各カテゴリーにジャンプする方法など。
箇条書きにした部分をそれぞれ、HTML アンカーを設置して本文の先頭へ飛ばしたり（下記のアンカーリンク使用時のポイントで実際に使っています）使い道はたくさんあります。
アンカーリンク使用時のポイント
アンカーリンク使用時のポイントは３つです。
上記を適切に行うことで、Googleが質の良いページと認識し、上位表示の可能性が高まります。
リンクと分かるように青色・太字を推奨
リンクにした箇所が分からないと意味がありません。
一般的にリンクは「青色の字」と認知されているため、その他の色で作るとクリックされない可能性があります。
SWELLでアンカーリンクを作成すると自動的に青色になりますので、そのままにしておきます。
「太字」にするとより目立ちやすくなるのでおすすめです。
抽象的な「こちら」・「ココ」などでリンクを作らない
短かすぎず、長すぎないテキストでリンク作成します。
「こちら」などの抽象的なテキストではなく、「最新のファッション情報はこちらでチェック！」や「今日のおすすめレシピはこのリンクから見てみてください！」
などリンク先に何が書かれているかが分かるようなテキストにします。
リンク後の確認は怠らない
HTML アンカーの入力にミスやダブリがないか？リンクが機能しているか？チェックを忘れずに……。
別記事に設定している場合に忘れがちなことですが、リンク先の記事を削除したのにアンカーリンクはそのまま放置してジャンプできない。のようなこともありますのでご注意ください。
アンカーリンクの重要性
アンカーリンクを正しく使用することで、SEO対策に繋がります。
読者を他の記事に誘導したり、関連情報にアクセスさせたりすることにより、読者の興味を引きつけ、ブログの利便性や読みやすさを向上させることができます。
知りたい情報をいち早く見つけることで読みやすい記事＝満足度も高まります。ひと手間かかりますが、慣れると簡単に設置できます。
まとめ
SWELLでのアンカーリンクの使い方について、解説してきました。
内容をまとめると
- 高度な設定でHTML アンカーを入力
- リンクの際は頭にハッシュ（#）を付ける
- 別記事の場合は「URL/#HTMLアンカー」
- リンクと分かるようにする
- 抽象的な文字は避ける
- リンクのチェックをする
- SEO対策に繋がる
以上の７つです。
読みやすい記事にするために是非使用してみてください。
