ページ内で読みたい箇所にスクロールさせる方法をお伝えします。

ページ内スクロールは、文字やボタン・画像をクリックすると指定した位置に移動させることができます。

ランディングページでもよく使われており、ユーザーにとって素早く欲しい情報へ辿り着くことができるので、利便性にも繋がります。

もちろんプラグインなしで簡単に設定できます。

やり方はとても簡単で、

このたった2つの工程だけ完了します !

では早速解説していきます。

移動先に任意の名前を付ける

まず、移動先(クリックして飛ぶ箇所)に、名前をつけていきます。

設定

移動先をクリックし、

①右側のブロック→②高度な設定
→HTMLアンカーへ任意の名前を入力します。

名前は、ローマ字・英語・数字、なんでもOKです。

ここでは、簡単に「1」と入力しました。

試したところ全角でも大丈夫でしたが、基本的には半角で名前をつけます。(urlを共有する場合など、全角や日本語入力だと記号に変換されてしまうため)

移動元にも先ほどつけた任意の名前をリンクさせる 

次に、移動元(クリックする箇所)に、先ほど付けた名前のリンクをそれぞれ設定します。

設定

①リンク設定のマークをクリックし

② #(半角)+ 先ほど付けた任意の名前 を入力

*ここで必ず Enter を押します。

たったこれだけでページ内リンクが完了しました!

公開、またはプレビューでスクロールできているか確認し、もしできていない場合は

  • 移動先と移動元の名前がちがっている
  • 移動元の「#」が全角になっている
  • 移動元の「#」のつけ忘れ
  • リンク設定後、Enter を押していない

などの場合が多いので、もう一度チェックしてみてください。

特に情報量の多いページになると、例え最初に目次があっても、そこから読みたい箇所にまで自分で辿り着くのは案外大変です。

あらかじめユーザーにとってシンプルで使いやすい設計にできるよう、私も心がけたいと思います。

投稿者プロフィール

志水泉
志水泉
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに所属し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。

お問い合わせフォームはこちら

(※営業電話が多いため、お電話は留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    必須お問い合わせ項目

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意貴社サイトURL

    任意電話番号(ハイフン無し・半角数字)

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください