Cocoonで記事内ジャンプする方法

Cocoonで記事内ジャンプする方法その他

こんにちは♪

このサイトはワードプレス無料テーマ「Cocoon」を使っています。

先日、記事を書いているときに

わたし
わたし

同じページ内で、ある特定のポイントまでジャンプしたいなぁ。

と思いました。

やってみたらとっても簡単にできましたが、ワードプレス超初心者の私はおそらく時間が経つとすぐに忘れてしまうので、備忘録として自分のために記録しておきます。

やりたいこと

  • 1ページの記事の中で、特定の場所に自由にジャンプできるようにしたい。

完成形の例

わたし
わたし

「手順2へスキップ」をクリックすると、下の方にジャンプします。

手順2へスキップ

なんちゃらかんちゃら。なんちゃらかんちゃら。なんちゃらかんちゃら。なんちゃらかんちゃら。

なんちゃらかんちゃら。なんちゃらかんちゃら。

じゅげむ じゅげむ ごごうのすりきれ 

かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ

なんちゃらかんちゃら。なんちゃらかんちゃら。なんちゃらかんちゃら。なんちゃらかんちゃら。

【手順2】

わたし
わたし

無事、飛んできたでしょうか?

このようにして、同じページ内でジャンプする方法を解説します💪

LET’S GO!

やり方

使うHTMLは以下の通り。

<a href="#〇"></a>
<a id="〇"></a>

使い方を説明します。

同じページ内でジャンプする方法
【4ステップ】
  • STEP1
    クリックする言葉を決める

    今回は、例として「手順2へスキップ」という言葉を使います。

  • STEP2
    クリックする言葉をHTMLで編集

    右上の丸い3つの点をクリックし、「htmlとして編集」をクリック。

    ブロックエディタ(Gutenberg)の編集画面
    ブロックエディタ(Gutenberg)の編集画面です。
  • STEP3
    HTMLを入力
    【HTML編集画面】befor
    【HTML編集画面】befor

    この様にHTMLを書きます↓

    <p><a href="#〇">△△△△△△△</a></p>

    〇→お好きな英数字(数字の1など)

    ※英数字の前には#を必ず忘れずに書きます。

    △→クリックされる言葉

    例:

    <p><a href="#1">手順2へスキップ</a></p>
    【HTML編集画面】after
    【HTML編集画面】after

  • STEP4
    ジャンプした到着先をHTMLで編集する

    ジャンプして着地する箇所に「カスタムHTML」を追加します。

    HTMLで書く内容は次の通りです。

    <a id="〇"></a>

    〇→STEP3で〇に入れた英数字

    ※今回は#は書きません。

    ジャンプした先をHTMLで編集
  • END
    完成!

これで、同じページ内でもリンク付けして好きなところに飛べるようになりました✨

わたし
わたし

やった~!

この記事を書いた人
姉(ピアノ講師)

ドイツ在住。オンライン学びの場「シャッフェン!」でオンラインピアノコースの講師をしています。「ピアノをもっと楽しく」をモットーに、生徒さんに寄り添ったレッスンをお届けします♪現在、ピアノの生徒さん募集しています。

にほんブログ村 にほんブログ村へ
ブログランキング・にほんブログ村へ

その他
スポンサーリンク
シェアする
オンライン学びの場「シャッフェン!」