Word Press:ページ内リンクで記事を移動して飛ぶ『ズームスクロール』HTML設定

防空壕,司令室

防空壕,司令室

ホームページを制作する際、あれこれ詰め込むと縦に長くなってしまいます。

普通の読み物であれば問題ないのですが、離れた箇所の情報と照らし合わせたい時もあります。これは書き手側の配慮となりますが、ページ内を行ったり来たり出来たら、欲しい情報へ直ぐに辿り着ける訳です。

今回はそれを叶える『スクロールズーム』の設定方法を記載致します。



『スクロールズーム』を体験する

・A地点まで移動

・B地点まで飛ぶ

 

ピンと来ない方がいるかも知れませんので、体験して頂きたいと思います。
上記をクリックすれば、そこまで一気に飛べるということです。

・飛んだ先から帰って来る場所
 
戻って来るのも大変なので、飛んだ先から帰って来る設定も可能です。見た目の問題点として、ページ上部スレスレ地点へ飛ばされてしまいます。違和感がある場合は、任意の場所の上にスペースを設け、そこへ飛ばすテクニックもあります。

『スクロールズーム』を設定する

ページ内リンクの設定は『テキスト』から行います。

まず『ビジュアル』で記事を書き、ある程度形になったら『テキスト』へ切り替えて『HTML』で囲むだけという単純なものです。

飛ばす側 ↓

受ける側 ↓

注意点として『sommtplay数字』は双方同じにして下さい。
一箇所のみの設置の場合、数字は必要ありません。

ちなみに飛んだ先から帰って来るコードも、書き方は同じです。
ただ、飛ばした場所へそのまま戻って来ることは出来ませんので『飛んだ先から帰って来る場所』を別途作った方が簡単です。

スクロールや着地の表示のされ方は、ワードプレスのテーマによって違います。
このブログだと、一瞬で切り替わるような感じになってしまいます。

記事はここまでで、以下はページ内リンクとなります<(_ _)>

飛んだ先のA地点

・ここがA地点

 

元の位置に戻る

飛んだ先のB地点

・ここがB地点

 

元の位置に戻る





コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)