PR

【WordPress】「ページ内リンク」&「スムーズスクロール」かんたん設定

アフィリエイト広告を利用しています

Wordpressロゴ wordpress
スポンサーリンク

< 広告 > 画像をクリックすると公式サイトへ。国内最速で最新軽量サーバーの3大レンタルサーバーです。

ページ内リンクをスクロールさせる理由

ページ内リンクとは、同じ記事ページ内で移動するために貼られたリンク先へジャンプすることです。
ただ、通常は、リンク元からリンク先まで、一瞬でジャンプしてしまうので、上方向か下方向か別ページに飛んだのか…実際にどのようにアクションしたのかが全くわかりません。

そのため、ボタンをクリックして一瞬でジャンプ移動してしまうよりも、ボタンをクリックした直後は視覚的に少しスクロールして移動方向がわかるようにした方が、ユーザーにページ内を移動したことと、上方向か、下方向かを動きによって認知させる効果が生まれます。

ページ内リンクの作成方法

ページ内リンクを作るには、リンク元リンク先にそれぞれ設定をほどこします。

先に①リンク先を設定してから、次に②リンク元を設定します。

① リンク先の設定

はじめに、リンク先(リンク元をクリックしたあとに飛ぶ「着地地点にある単語やフレーズ」)を選択した状態で、編集画面右下「高度な設定」>「HTMLアンカー」の四角欄にお好きな任意のid名を半角で入力。(例:HTMLアンカーの四角欄に「link1」というIDを入力)。
画面右上の「更新」ボタンをクリックします。

リンク先

② リンク元の設定

次に、リンク元(クリックする飛ぶ前のところ)にしたい文字や単語を選択します。
ツールバーが出てきますので、右の方にある「(-)」のボタンをクリックすると「検索またはURLを入力します」という四角枠が出てくるので、先ほどのID名の前に半角「#」をつけて入力します。
必ず「#」を先頭につけてください。案外見落としがちです。

リンク元

すると、先ほど「高度な設定」で設定したものの小窓が出てきますので、クリックして選択してください。ここをクリックしないと設定はされないので要注意です。

ここで一旦「下書き保存」or「公開」して保存。

この段階でリンク元は青文字で青のアンダーラインが入っている状態になっているはずです。試しにWordpress画面の右上にある「保存」ボタンの左にある「⬜︎↗︎」ボタンで「投稿を表示」してリンクされているかどうか試してください。

この段階でリンクされているはずです。

このままでも良いのですが、クリックした後、滑らかにスクロールさせたい場合は、次の設定をやってみましょう。

③ 追加CSSへ、コードをコピペ

「ダッシュボード」>「外観」>「カスタマイズ」>「追加CSS」をクリックします。

四角い入力画面が出てきますので以下のコードをコピペしてください。

(以下のコードをコピペにご利用ください)

html {
  scroll-behavior: smooth;
}

この設定をやると、クリック元をクリックすると、滑らかにクリック先へ移動します。

まぁ、滑らかにする必要がないのであれば、③の設定は不要です。

①〜②の設定だけでも内部リンクへジャンプできますので、この「リンク元」「リンク先」の設定はとても便利なので覚えておきましょう。

とまぁ、時間が経つと忘れてしまうので、このページをショートカット登録しておいていただけると、いつでも見直しができるし、私としてもとても嬉しい次第です。

「scroll-behavior」の対応状況

各ブラウザとの互換性 (2023/8/18)

以前はSafariなどは使えなかったようですが、現在はInternetExplorer以外ほぼ対応されています。InternetExplorerは、Windows自体からサポートが2022/6/15に終了しています。ご了承ください。

参照:https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

まとめ

ページ内リンクをスクロールさせる方法は、他にもたくさんあります。
① プラグインを使う方法
『Advanced Editor Tools(旧TinyMCE Advanced)』
『Page scroll to id』

② ワードプレスのテキストエディタで手動で直接書き換える方法
③ jQueryやJavaScriptを使った方法

いろいろ試しましたが、ひと手間ふた手間多くて面倒だったり、多少の専門知識が必要だったりするので、入門者にはちょっとハードルが高い印象です。

そこで今回ご紹介した「scroll-behavior」コピペ法は、面倒な設定やインストールがありません。
CSSを1文コピペすればページ内リンクをスムーズにスクロールさせることもできます。
とても簡単で便利なので、是非お試しください。

「ページ内リンク」と「スムーズスクロール」のかんたん設定方法を解説してきました。著者の備忘記録としても活用していますのでぜひご利用ください。

また、設定を自動で行ってくれるMixhostのレンタルサーバーを利用すれば、WordPress初心者にも簡単で難しいことは省き自動で行ってくれるので、無駄で難解な作業に時間を取られることもなくらくらくと時間に余裕ができます。

ぜひこの機会にMixhostのレンタルサーバーもチェックしてみましょう。

こちらの記事でも詳しく解説していますのでぜひご覧ください。

関連記事

< 広告 > 画像をクリックすると公式サイトへ

パパさんBlogでは、

主に投資初心者へ向けた失敗しないためのガイドブックを意識して、入門者にもわかりやすく噛み砕いた解説記事にしています。

サブ的に、投資や投資以外でも、ブログやそれ以外にも「過去に自分が困っていて今は解決したことや困ったことを備忘記録として記事にしています。これは、自分に対してのメモ書きでもありますが、何より、同じように困っている方もいるはずです。そんな方への道標にもなれたら、きっとお役人立てると思い記事に残しています。

おそらく、投資初心者や、ブログ初心者であれば、きっと自分と同じようなところで、つまづいている方が多いかと存じます。皆つまづくところは同じような場所が多いと思います。

そんな同じような境遇でお困りの方にも自分の記事がお役に立てたら幸いです。

もしよろしければ、サイト内の他の記事もタメになるようなものもあるかと思いますので是非お立ち寄りください。

関連記事

タイトルとURLをコピーしました