< 広告 > 画像をクリックすると公式サイトへ。国内最速で最新軽量サーバーの３大レンタルサーバーです。
ページ内リンクをスクロールさせる理由
ページ内リンクとは、同じ記事ページ内で移動するために貼られたリンク先へジャンプすることです。
ただ、通常は、リンク元からリンク先まで、一瞬でジャンプしてしまうので、上方向か下方向か別ページに飛んだのか全くわかりません。
そのため、スクロールして移動方向がわかるようにした方が、ユーザーにページ内を移動したことと、上方向か、下方向かを動きによって認知させる効果が生まれます。
ページ内リンクの作成方法
ページ内リンクを作るには、リンク元とリンク先に設定をします。
① リンク先の設定
はじめに、リンク先（リンク元をクリック時に飛ぶ着地地点の単語やフレーズ）を選択した状態で、編集画面右下「高度な設定」＞「HTMLアンカー」の四角欄にお好きな任意のid名を半角で入力。（例：HTMLアンカーの四角欄に「link1」というIDを入力）。
画面右上の「更新」ボタンをクリックします。
② リンク元の設定
次に、リンク元（クリックする飛ぶ前のところ）にしたい文字や単語を選択します。
ツールバーが出てきますので、右の方にある「（－）」のボタンをクリックすると「検索またはURLを入力します」という四角枠が出てくるので、先ほどのID名の前に半角「#」をつけて入力します。
必ず「＃」を先頭につけてください。案外見落としがちです。
ここで一旦「下書き保存」or「公開」して保存。
③ 追加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のレンタルサーバーもチェックしてみましょう。
こちらの記事でも詳しく解説していますのでぜひご覧ください。
関連記事
< 広告 > 画像をクリックすると公式サイトへ
関連記事
