JIN

JIN で目次へ戻るリンクを設置する簡単な方法

目次へ戻るリンクの設定方法
初心者

JIN で記事中から記事上の目次へすぐ戻るボタンを作りたい

長い記事になったとき、目次を見返したい時ってありますよね。

ここでは、記事の途中から JIN の目次へ戻れるリンクの設置方法をご紹介します。

本記事の内容
  • JIN の目次へ戻る動きの説明
  • 目次へ戻るリンクの設置手順
  • その他のテーマでの応用例

このテクニックは他のテーマでも利用できます。
Cocoon、SWELL、その他のテーマでの利用方法もご紹介しています。

HTMLとかCSSとか分からなくても目的を果たせると思います

こういうリンクが、読み手が目次をすぐに確認できる一つの方法としてコンテンツに設置してあると親切ですね。

ぜひあなたのブログにも設置してみてくださいね。

そよ

設置してみたらぜひコメント欄にて教えて下さい。こちらのページから紹介リンクを貼らせていただきます♪お使いのテーマで設定方法がわからないときはお気軽にお声がけください。コメント、またはTwitterからでも大丈夫ですよ。

この記事を書いた人

技術力はあっても、月1万円すら稼げないへっぽこブロガー。SWELLで分析機能を手に入れて突破できるか?

WP愛だけじゃ生きていけない😂

そよ
そよ

Lightning G3 Pro Pack(アップデート期間1年)

JIN の目次へ戻る時の動き

実際に動きを見るのが一番ですので、下記の手順で動きをみてください。

  1. こちらのリンクをクリックしてください。
  2. このページの下部へ移動します。
  3. 左上にある、目次へ戻る、というリンクをクリックしてください。
  4. するとこのページの目次へさっと移動できるのが確認できます。

この設置方法をご紹介します。

そよ

JIN の目次には、Rich Table Of Contents というプラグインを利用しています。プラグインについてはこちらをご覧ください

JIN の目次へ戻るリンクの設置方法

JINで目次へ戻るリンクの設置方法はつぎのとおりです。

  1. リンクを設置したい場所へ行ブロックを挿入する
  2. カスタムHTMLブロックを呼び出す
  3. 次のコードを貼り付ける

<p>▲<a href="#rtoc-mokuji-title">目次へ戻る</a></p>

⬇次のように表示されます

目次へ戻る

JIN、SWELL テーマの目次への応用方法

まず、Cocoon や SWELL の設定方法をご紹介します。

その他のテーマをお持ちの場合は、次の説明へ移動してくださいね。

Cocoon の目次へ戻るリンク

Cocoon の場合は次のとおりです。

任意の場所でカスタムHTMLブロックを開いて、下のコードをコピペしてください。

<p>▲<a href="#toc">目次へ戻る</a></p>

SWELL の目次へ戻るリンク(工夫が必要)

SWELL の場合は、Cocoon のようにできないので、少し工夫が必要です。

  1. 一番最初の見出しブロックの上にスペーサーブロックを挿入する
  2. スペーサーブロックの高さを1にして、高度な設定のHTMLアンカーに toc と入力する
  3. 目次へ戻るブロックを任意の場所に挿入する

一番最初の見出しブロックの上にスペーサーブロックを挿入する

目次へ戻るブロック挿入方法
クリックすると拡大します
STEP
1

スペーサーブロックの高さを1にして、高度な設定のHTMLアンカーに toc と入力する

目次へ戻るブロック挿入方法2
クリックすると拡大します
STEP
2

目次へ戻るブロックを任意の場所に挿入する

<p>▲<a href="#toc">目次へ戻る</a></p>
STEP
3

挿入したスペーサーブロックを消す方法

1pxの高さにしたのが悪いのかもしれんけど😅。

もしこのブロックを消したい場合は、次のようにしたらすぐに消せます。

不要なブロックの消し方
クリックすると拡大します

別テーマで目次へ戻るを設定する方法

その他のテーマでもこの方法は利用することができます。
ブラウザは Google Chrome / Firefox が便利ですよ。

  1. ページを右クリックして、検証をクリック
  2. 検証画面の左上にあるボタンをクリック
  3. 左側のページ画面で目次を探し出してクリック
  4. ID=”***” という表記を見つける
  5. IDの中の文字を#の後ろに貼り付ける

ページを右クリックして、検証をクリック

目次IDの探し方1
STEP
1

検証画面の左上にあるボタンをクリック

目次IDの探し方2
STEP
2

左側のページ画面で目次を探し出してクリック

目次IDの探し方3
STEP
3

ID=”***” という表記を見つける

<div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-1" checked="" kl_vkbd_parsed="true"><label class="toc-title" for="toc-checkbox-1">目次</label>
STEP
4

IDの中の文字を#の後ろに貼り付ける

<p>▲<a href="#toc">目次へ戻る</a></p>

STEP
5
そよ

ぜひ試してみてくださいね♪不明な場合は、コメントやTwitterでお声がけください。

JIN の目次へ戻るパターン

上の用にシンプルなのが分かりやすくて良いと思いますが、もちろんボタンでも表現できますよ。

JIN のシンプルボタンの設定方法

目次へ戻る

  1. シンプルボタンを呼び出す。
  2. 右側の設定欄のリンク先URL欄に #rtoc-mokuji-title とコピペする
  3. あとは文字列やボタンの種類を変更するだけ
JIN の目次へ戻るボタン

WordPress の標準ボタン

WordPress 標準ボタンのリンクは、テキストにリンクを設定する方法と同じです。目次へ戻るの文字列を選択し、リンクを設定します。

Font Awesome 6 Free や記号、絵文字などなど

Font Awesome 6 の無料版から、アイコンを持ってきて設定してもいいですね。

基本は、テキストリンクと同じです。

🔼 目次へ戻る

目次へ戻る
<a href="#rtoc-mokuji-title"><i class="fa-solid fa-turn-up"></i>目次へ戻る</a>
そよ

それほど目立たせることもないので、テキストリンクで良いかなと思います。

アイコンだけだと、目次へ戻るってのがわかりにくいかもしれませんね。

JIN で目次へ戻るボタンを設置のまとめ

WordPress の有料テーマ JIN の目次へページ内から戻るリンクの設定方法についてご紹介しました。

JIN には目次を表示させる機能がないため、RTOC などの目次プラグインを利用する場合がほとんどです。

*JIN のコード

<p>▲<a href="#rtoc-mokuji-title">目次へ戻る</a></p>

*Cocoon や SWELL(*)のコード

<p>▲<a href="#toc">目次へ戻る</a></p>

SWELL はひと手間必要

*別テーマでは、検証機能を使ってID名を探す

サイドバーに目次を表示させても良いですが、モバイルはサイドバーが機能しないのと、メニューをクリックしないと移動できません。

長くなりがちな文章の合間にこのようなリンクを挿入しておくと、便利かもしれませんね。

最後まで読んでくださりありがとうございました。

目次へ戻る

⬇目次プラグインの使い方はこちらをご覧ください。

⬇JINとSWELLのアフィリエイト機能を比較してみました。

WordPressを体系的に学ぶなら

インターネット上には沢山無料で学べる場所があります。でも、体系的にしっかりと学びたいのであれば、有料のコースを活用するのも一手です。

Udemyは有名なオンラインレッスンコース。WordPressだけに限らない、様々なことがプロのビデオを観ながら学ぶことができます。

udemy

時々セールをするので、その時が狙い目!