'html' : href); jQuery('body,html').animate({scrollTop:position}, speed, 'swing'). metaè¦ç´ ã§ãå¥ææ¸ã¸ã®èªåã¸ã£ã³ããæå®ãããã¨ãã§ãã¾ãããã®è¦ç´ ã¯headè¦ç´ ã®ä¸ã§ä½¿ç¨ãã¾ãã, ãã®è¦ç´ ã§æå®ããç§æ°å¾ã«ãèªåçã«å¥ã®ææ¸ã¸ã¸ã£ã³ããã¾ãã, ä¾ãã°ãcontentå±æ§ã®å¤ã«ä»¥ä¸ã®å
容ãæå®ããå ´åã¯ããã®ææ¸ã表示ãã¦ãã60ç§å¾ã« http://www.example.com/ ã¸ã¸ã£ã³ããããã¨ã«ãªãã¾ãã, ç§æ°ã®å¾ã«ã»ãã³ãã³ï¼ ; ï¼ãå
¥ãã¾ãã, èªåã¸ã£ã³ããæå®ããä¾ WordPressに、自動で特定のページへジャンプさせるHTMLコード 通常はheadのところに載せますが、私は気にせず記事のところに乗せています(body部分) タグを使うことで、指定した秒数後、自動で指 … 投稿画面でURLを貼り付けるだけで公開と同時にaタグで囲ってくれるプラグインがあったのでご紹介します。併せて、外部リンクだけ自動で_blankで別ウィンドウで開くようになるプラグインも紹介します。2つ入れたらとっても楽チンですね。 自動ジャンプを指定した例 (2つの文書を経由してここに戻ってきます) 移転の告知ページで使用する場合は、自動ジャンプの設定だけでなく、移転先へのリンクも用意しておくと親切かもしれません。 var target = jQuery(href == "#" || href == "" ? ï¼2ã¤ã®ææ¸ãçµç±ãã¦ããã«æ»ã£ã¦ãã¾ãï¼, 移転ã®åç¥ãã¼ã¸ã§ä½¿ç¨ããå ´åã¯ãèªåã¸ã£ã³ãã®è¨å®ã ãã§ãªãã移転å
ã¸ã®ãªã³ã¯ãç¨æãã¦ããã¨è¦ªåããããã¾ãããï¼èªåã¸ã£ã³ãã«å¯¾å¿ãã¦ããªãç°å¢ã®ããã«ï¼, ãã¼ã ãã¼ã¸å¶ä½ãæ¯æ´ãã ã¿ã°ã¤ã³ããã¯ã¹, HTMLãªãã¡ã¬ã³ã¹ - ãã¼ã¸ã®èªåãªãã¼ã, æå®ããç§æ°å¾ã«ã¸ã£ã³ããã.
アンカーリンクの出発点, 当記事冒頭の例では、スムースにスクロールしていますが、スクロールが適用されないテーマをご使用の場合は、以下の例のようにリンク先の画面に一瞬で切り替わるように表示されます。, これでは、ユーザーが操作したときにどこにジャンプしたのかがわかりにくく、ユーザビリティが高いとは言えませんね。どこに移動したのかわかりやすくスムースにスクロールさせる為には、弊社LABOの記事にも記載がある通り、以下の記述をheader.php内に追記する必要があります。, 以下の記述を丸ごとコピーしてお手持ちのテーマファイルのheader.php内にペーストするだけですので、一度試してみましょう。※テーマファイルの編集はご自身の責任において、バックアップなどを取った上で慎重に行っていただくようお願いいたします。, こちらをまるごとheader.php内に貼り付けると以下のような動きになるはずです。スクロールのスピードはvar speed = 800;の数値の部分を編集することで任意に変更できますので、コンテンツの量や移動距離に応じて適切なスピードを設定しましょう。, アンカーリンクはページ内リンクだけではなく、もちろん他のページにもリンクさせることが可能です。他のページの途中にユーザーが求める情報(or 管理者がアピールしたい情報)がある場合などに活用するとユーザーにとって便利ですね。, 方法は単純で、WordPressでのアンカーリンクの設定方法の説明にのっとって、別のページのURLをaタグ内の#の前に記載します。以下のような感じですね。,
アンカーリンクの出発点, 当記事で紹介した方法ならプラグイン不要で初心者の方でも簡単にページ内リンク(アンカーリンク)を実装できるはずです。ユーザーが気になるコンテンツというのは記事全体の中でもごく一部に限られていたりもします。そのようなユーザーのニーズにスマートに応えるには、求められる情報へ瞬時にアクセスできるような工夫が有効でしょう。スムースな動きのページ内リンクを活用することでユーザービリティも高まりますので、ぜひトライしてみてください。. ブログやサイトを閲覧していると、目次が用意してあり、ユーザーが気になるタイトルへダイレクトにジャンプできるサイトは多いですね。簡単に記事の目次を設置するには、こちらのプラグインが便利です。, ユーザーの興味・関心がある箇所にワンクリックで移動できるように工夫する手段は、目次を設置するプラグインだけではありません。, 先述・後述の項目など、ページ内の別の箇所を参照して欲しいときに本文中のテキスト自体にアンカーリンクを設定してユーザーの求める情報へジャンプさせてあげる工夫も可能です。ということで今回は、WordPressのサイトで簡単にアンカーリンク(ページ内リンク)を実装する方法をご紹介いたします。, アンカーリンクとは、ページをジャンプして表示するためのHTMLで使用される代表的なタグですが、今回は、アンカーリンクを用いたページ内リンクについて説明しています。下記のように指定した場所をクリックするとページ内の別の箇所に瞬時に移動してくれる機能です。以下を試しにクリックしてみてください。, スムーズに指定の箇所へ移動することがわかるかと思います。この機能を応用すれば、目次以外でもページ内のコンテンツの補足など、参照して欲しい箇所に自動でジャンプさせることができますね。, 具体例として、先述のページ内リンクには以下のように設定しています。id名(anchor)は任意に設定が可能です。自身のわかりやすいように設定しましょう。,
アンカーリンクの到達点
スムーズに指定の箇所へ移動することがわかるかと思います。この機能を応用すれば、目次以外でもページ内のコンテンツの補足など、参照して欲しい箇所に自動でジャンプさせることができますね。 WordPressでのページ内リンクの設定方法 長文の記事は目次があった方が読みやすいものです。目次があれば、読者ははじめに何が書かれているのかを把握できるので、読みやすさが劇的にアップするわけです。記事... ヒートマップでユーザーがサイトのどこをクリックしているか可視化してくれるプラグイ…, WordPressのログインセッション時間を変更するプラグイン「Remember…, 投稿記事の目次を自動生成するWordPressプラグイン「Table of Contents Plus」, 【初心者向け】プラグイン不要でスムースにスクロール。WordPressでページ内リンク(アンカーリンク)を設置する方法。, jQuery('a[href^="#"]').click(function() {. 2020/05/02 情報を更新いたしました。