Cocoonで記事内でスクロールして見出しまでジャンプするページ内リンクを貼る方法

Cocoonで、新しいタブを開かずに記事内でスクロールして移動するジャンプを貼る方法ネットやパソコンについての勉強メモ

ワードプレスのテーマにCocoonを使用している際に

新しくページを開くのではなく

今開いているページで記事内の特定の箇所まで

スクロールによるジャンプをする方法です。

 

自分が閲覧している側の立場として考えると

今見ているページと同じページに書いてある情報に飛びたい時に

今見ているページから離れて新たにページを開くよりも

スクロールで移動するほうが利便性が高いように感じます。

パソコンだといくつもタブを開けるから

新規タブを開くリンクでもいいかもしれないけど

パソコンの絵

今はスマホでインターネットを閲覧する機会も多く

スマホは新たにページを開く時、

今見ているページに重ねて表示することしかできないから

スマホを手に持って見ている絵

同じページ内の情報に飛びたい時に

新たにページを開くと不便になってしまうかもしれません。

スポンサーリンク

URLリンクはページ内ジャンプではなく普通のリンクになる

自分の記事の目次にあるメニューを右クリックし、URLをコピーして

Cocoonで記事内でスクロールするジャンプをしたい時に

投稿記事や固定ページの記事内にURLリンクを貼れば

特定のトピックを開けるけど、これだと

ページ内の移動ではなく新たにページを開く形となる。

それではなく、新たにページを開かずに

今開いているページのままにスクロールで特定の見出しにジャンプしたい時に

利用する方法です。

コードをコピーして番号やタイトルを記入して記事内に貼る

以下をコピーして、

<a tabindex="0" href="#toc※">見出しタイトル</a>

※の部分を半角数字でジャンプしたいメニューの番号に、

見出しタイトルの部分を自分の見出しタイトルに書き換えて

記事編集画面のテキストモードに貼り付けます。以下の写真のような感じです。

Cocoonで記事内スクロールのジャンプを貼る記述方法

例えば、今読んでいただいているこの記事でいうところの

目次にあるメニューの1に飛びたいなら、

Cocoonの投稿記事で新たなページを開かずに記事内をスクロールして移動するリンクを貼る方法

以下のように記入します。

<a href="#toc1" tabindex="0">
URLリンクはページ内ジャンプではなく普通のリンクになる</a>

そうすると、以下のようにページ上をスクロールして移動する形で

リンクできるので→URLリンクはページ内ジャンプではなく普通のリンクになる

 

前述のとおり→ページ内リンク

のように、記事内で「さっき説明したこれね」という感じに

リンクを貼りたい時に便利です。

メニューの2番に飛びたいなら#toc2で、

メニューの2番目の目出しタイトルを記入するという感じです。

「この記事の文頭に書きました通り~」のような文章での説明ではなく、

説明が書いてある場所まで直接スクロールするリンクを貼れば

記事をすっきりとまとめることができ、使う機会はそこそこあると思います。

コメント

タイトルとURLをコピーしました