他のサイトを見てページ内リンクは作れたけれど、
ぬるぬる動かずJUMPしてしまうよ。
方法は色々あるみたい。
ひとまずシンプルな方法で解決できたから解説するよ。
このページでは
ということが出来るよう解説します。
はじめに
ぬるぬるスクロールのことを、スムーススクロールと呼ぶみたいです。
ページ内を移動しているのでサイトによってはページ内スムーススクロールと呼称しています。
WordPressのテーマによっては、ページ内リンクを設定するだけでスムーススクロールになるようですが、
（テーマって何だっけ？という方はこちら）
私はなりませんでした。
リンクとは、繋がる、という意味です。
通常ホームページなどで（例えばGoogle、Yahoo等ほぼあらゆるページの）文字列をクリックすると、別のページに飛ぶと思いまずが、これはその文字列に別のリンクが設定されているからです。
ページ内リンクとは文字通り、同一ページ内のリンクのことです。
主な設定理由は利便性向上のため
・１ページが長文となる。
・ページが複雑でどこに記載があるか分からない。等
という場合です。
反対語はページ外リンクですが、こちらは単にリンクと呼ばれることが多いです。
修正しようとしたけれど・・・
スムーススクロールをインターネットで調べるとたくさん出てきます。
でもjQuery・CSS・JavaScript・・・
いろいろなことが書いていますが、
よくわかりません。
でも、試行錯誤で一応出来ました。
以下の手順を試して下さい。
出来たよ、紹介
ページ内リンクの作成（復習）
①移動先のブロックを選択します。
そのブロックで左クリックをして文字の横に選択されているの事を示す縦棒が表示されれば、
そのブロックを選択できています。
ブロックとは今、文字を書かれているこれらのことです。
これは単一ブロック
これも
単一ブロックです。分かりづらいですが。
ちなみにこちらは、Shift＋Enter を押すだけです。
②右のメニューから、高度な設定 を選択する
画像は既に、高度な設定 の内容が展開されています。
③HTMLアンカーの枠に名前を付ける。
好きな名前で大丈夫です。
分からなければ１，２，３・・・とかでも良いと思います。
④ここをクリック を選択
Shirf+十字キーで文字列を選択しましょう。
青枠白抜きで表示されていればOKです。
⑤メニューの リンク を選択
⑥枠内に③で設定した移動先の名前を入力
このとき、名前の前に ＃(ハッシュダグ） を付けて下さい。
これで、ページ内リンクの設定は完了です。
下書きページではリンクに飛ばないので、プレビューページで実際の動きを確認しましょう。
テーマによっては、これでスムーススクロールになっているかもしれません。
ならない、JUMPする。
という方は続きの手順を試しましょう。
追加CSSを設定
急に訳分からないことを言い出した。
って思わないで下さいね。
以下の通りやれば大丈夫です。
WordPressの編集メニュー → 外観 → カスタマイズを選択
追加CSSを選択。
html {
scroll-behavior: smooth;
}
をコピペして下さい。
その後、公開を押す。
以上です。いかがでしょうか？
もし修正されなかったらごめんなさい。
コメントいただければ対応を考えます。
最後ご覧頂きまでありがとうございました。
コメント