【Cocoon】「目次に戻る」ボタンの作成㊙テクニック!1分でかんたん解決【WordPress】

「目次に戻るボタンってどうやって作るの?」

「複雑なコード入力をせず、簡単に目次に戻るボタンを作りたい

「プラグインも使わずに、目次に戻るボタンを作りたい」

この記事では、そんな方に向けて、複雑なコード入力やプラグインなしで、「目次に戻る」ボタンを作る方法をお話しします。

かめコンパス

こんにちは、かめコンパスです!

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

目次をまだ作っていない場合は、まず下の記事をご覧ください。

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

目次

「目次に戻る」ボタンとは?

「目次に戻る」ボタンとは、クリックすると目次に戻るリンクのことです。

目次に戻る

かめコンパス

試しに、「目次に戻る」をクリックしてみてね!

Cocoon「目次に戻る」ボタンの作り方

Cocoonで「目次に戻る」ボタンの作り方は、下記の通りです。

STEP

記事投稿画面で、ブロックに「目次に戻る」と入力する

「目次に戻る」と入力している様子
STEP

入力した「目次に戻る」を全選択し、リンクをクリックする

「目次に戻る」を全選択している様子と、「リンク」がある場所
STEP

表示されたURL入力欄に「#〇〇」と入力し、Enterキーを押す

#半角〇〇アルファベットから始まる任意の文字にする。

URL入力欄に「#〇〇」と入力し、Enterキーを押している様子

今回は「#contents」と入力します。

STEP

これで「目次に戻る」にリンクを貼ることができた

目次に戻る

まだ「目次に戻る」をクリックしても目次に戻りません。

STEP

次に、1番始めの見出しの上のブロックをクリックする

1番始めの見出しの上のブロックをクリックしている様子
STEP

設定ブロックの順にクリックし、高度な設定内の「HTMLアンカー」にSTEP3で入力した「#〇〇」の〇〇を入力する

先ほど入力した「contents」と入力します。

STEP

これで「目次に戻る」ボタンの出来上がり!

目次に戻る

「目次に戻る」ボタンができているかは、プレビューで確認してみましょう!

プレビューでの確認方法
「プレビュー」、「新しいタブでプレビュー」がある場所
  1. プレビューをクリック
  2. 新しいタブでプレビューをクリック
  3. プレビュータブで「目次に戻る」をクリック

Cocoonで「目次に戻る」ボタンを作るメリット

Cocoonで「目次に戻る」ボタンがあるメリットをざっと書いてみました。

メリット
  • 目次に戻って、次に読みたい見出しにすぐジャンプできる
  • 目次と見出しを行き来し、興味のある見出しだけ読むことができる
  • 利便性が高まり、ユーザーに再訪問されやすくなる

まとめ

今回は、複雑なコード入力やプラグインなしで、Cocoonで「目次に戻る」ボタンを作る方法を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonで目次に戻るボタンを作る方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次