本文へ移動

【SWELL】ページ内リンクの方法!気になる見出しへすぐ飛べる

SWELLブログ執筆: mameblog 編集部
当メディアは、Webデザインスクール「illume」を運営する株式会社design meが運営しています。記事内のリンクには広告が含まれる場合があります。

SWELLのページ内リンクのやり方教えて!

専門的な知識がないとできない?

【SWELL】のページ内リンクはとっても簡単◎詳しい知識がなくても3ステップです。

この記事でわかること
  • ページ内リンクとは?
  • ページ内リンクのメリット
  • ページ内リンクの設定方法
INDEX目次

    ページ内リンクとは?


    ページ内リンクは、ページ内の好きなところへジャンプさせるボタンのことです。

    ここを押すと

    ここに戻ってくる☺️

    このようにページ内を自由に行き来することができます◎

    ページ内リンクの実用例

    上記のようなリストを使用した際によく使います☺️

    H2やH3など見出しは目次から飛べますが、リストは自動でリンクにならないので設定しておくと便利です◎

    ページ内リンクのメリット

    ブログでページ内リンクを設定するメリット

    読者が知りたい情報に ” 秒 ” で辿り着ける!

    ブログやウェブサイトを訪れたのに

    知りたい情報がどこにあるのかわからず、途中で読むのを諦めた経験、ありませんか?

    ページ内リンクを設置することで…

    利便性向上

    ぺージ内リンクはユーザーにウェブサイト内をスムーズに移動する手段を提供し、コンテンツへのアクセスを簡素化します。

    情報の迅速な入手

    興味を持ったトピックのリンクをクリックすることで、ユーザーは迅速に関連する情報にアクセスでき、時間を節約できます。

    ユーザー満足度の向上

    ページ内リンクにより、ユーザーは目的の情報に迅速かつ容易にアクセスできるため、ウェブサイト全体の利用体験が向上し、ユーザー満足度が高まります。

    結果として、ユーザーにとって使い勝手が良いため、回遊率・滞在時間が向上します。

    利便性と満足度の高いブログは、離脱を防げて、SEO効果にも繋がります◎

    ページ内リンクの設定方法

    ページ内リンクの設定方法を動画で確認

    STEP
    ジャンプ元とジャンプ先のテキストを用意する

    ジャンプ元(例:3つ目の見出しにジャンプする)と
    ジャンプ先(例:3つ目の見出し)のテキストを用意しておきます。

    ジャンプ元・ジャンプ先、どちらとも、見出しではなく本文や画像でも問題ありません。

    STEP
    ジャンプ先をクリック
    STEP
    画面右のブロック→高度な設定→HTMLアンカーに入力

    画面右側のブロック→下にスクロールすると「高度な設定」があります。

    高度な設定をクリックすると、HTMLアンカーの入力欄が表示さるので、

    自分がわかりやすいアルファベットを入力してください。

    「ブロックが選択されていません。」と表示される場合は、ジャンプ先を再度クリックしてください。

    同じページ内でいくつもページ内リンクを設定する場合は、それぞれ違うアルファベットにしてください。
    例えば…link・link01・link02など

    STEP
    ジャンプ元を選択する
    STEP
    テキストの上(または下)のリンクマークをクリックして入力

    テキストを選択して、リンクマークをクリックします。

    入力欄が表示されたら、「#」とジャンプ元のHTMLアンカーに入力したアルファベットを入力します。

    • #(シャープ)は半角
    • #とアルファベットの間にはスペースなどは入れないでください。

    エンターキーを押して完了です!

    お疲れさまでした…!初めての作業は大変ですよね。
    慣れれば簡単なので、どんどん使ってくださいね♩

    まとめ

    ページ内リンクの設定はできましたか?

    できなかった…!難しくてよくわからない💦という方はお気軽にお問い合わせからご相談ください。

    これからもSWELLを使ってブログ運営楽しんでいきましょう☺️

    関連記事

    前後の記事

    目次

      \ スクールが気になったら、まずはLINEで /

      公式LINE登録で、3大特典をプレゼント

      無料相談(Zoom・30分)の予約もLINEから。勧誘なし・ブロックはいつでもOKです。

      FOR BUSINESS

      法人向け「AI×デザイン」研修

      生成AIを取り入れた制作ワークフローを、半日〜2日のカスタム研修でチームに導入。デザイナー以外の職種の方にも対応します。

      研修について相談する

      オンライン・対面どちらも可 / お見積り無料

      LINE登録で3大特典
      LINE登録で3大特典スクール詳細
      PR バナー
      公式LINEで無料相談 + ロードマップPDFプレゼント中 LINE友だち追加