SWELL編集で覚えておくと便利な機能

目次

アンカーリンク

アンカーリンクとは

ページ内のショートカットです。

アンカーリンクはページの読ませたい場所に飛ばせられるショートカット

1ページが長くなるとスクロールする回数が増えてしまい動線が見にくくなります。そこで便利な機能がアンカーリンクです。アンカーリンクとはページ内にショットカットをつけることにより、ユーザーの閲覧時の負担を減らすものです。

実際に事例を見ていきましょう。

・コンセプトページを開く

https://ドメイン.com/concept/

・コンセプトページを開いて、「お約束」の項目に飛ぶ

https://ドメイン.com/concept/#promiss

ただコンセプトページを開くのか。コンセプトページのお約束に飛ばすかで変わってきます。

アンカーリンクの設定方法

  • ページ名の後ろに#アンカーリンク名
  • 見出しのタグにHTMLアンカーにアンカーリンク名

を入れるとページに飛ばすことができます。アンカーリンクは、下記のように見出しのブロックのHTMLから編集できます。

具体例

ページ名は似ていますが、#changetheruleの有無で開く先が変わってきます。

ビジネス戦略のページを開く

https://treasureney.com/blog/

ビジネス戦略の中にある「チェンジザルール」の項目を開く

https://treasureney.com/blog/#changetherule

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

この記事を書いた人

元東芝エンジニア「WEBマネタイズの専門家」/ ㍿TreasureNey取締役。
時間とコストを省く、最もシンプルなWEBでの収益法をお伝えしています。東芝時代に培った開発設計業務経験から、簡単に誰でもWEBを使ったメディア制作をレクチャーします。

目次