ホームページを制作する際、あれこれ詰め込むと縦に長くなってしまいます。
普通の読み物であれば問題ないのですが、離れた箇所の情報と照らし合わせたい時もあります。これは書き手側の配慮となりますが、ページ内を行ったり来たり出来たら、欲しい情報へ直ぐに辿り着ける訳です。
今回はそれを叶える『スクロールズーム』の設定方法を記載致します。
目次
『スクロールズーム』を体験する
・A地点まで移動
・B地点まで飛ぶ
ピンと来ない方がいるかも知れませんので、体験して頂きたいと思います。
上記をクリックすれば、そこまで一気に飛べるということです。
・飛んだ先から帰って来る場所
戻って来るのも大変なので、飛んだ先から帰って来る設定も可能です。見た目の問題点として、ページ上部スレスレ地点へ飛ばされてしまいます。違和感がある場合は、任意の場所の上にスペースを設け、そこへ飛ばすテクニックもあります。
『スクロールズーム』を設定する
ページ内リンクの設定は『テキスト』から行います。
まず『ビジュアル』で記事を書き、ある程度形になったら『テキスト』へ切り替えて『HTML』で囲むだけという単純なものです。
飛ばす側 ↓
|
1 |
<a href="#smoothplay1">・A地点まで移動</a> |
受ける側 ↓
|
1 |
<div id="smoothplay1">・ここがA地点</div> |
注意点として『sommtplay数字』は双方同じにして下さい。
一箇所のみの設置の場合、数字は必要ありません。
ちなみに飛んだ先から帰って来るコードも、書き方は同じです。
ただ、飛ばした場所へそのまま戻って来ることは出来ませんので『飛んだ先から帰って来る場所』を別途作った方が簡単です。
スクロールや着地の表示のされ方は、ワードプレスのテーマによって違います。
このブログだと、一瞬で切り替わるような感じになってしまいます。
記事はここまでで、以下はページ内リンクとなります<(_ _)>