JIN で記事中から記事上の目次へすぐ戻るボタンを作りたい
長い記事になったとき、目次を見返したい時ってありますよね。
ここでは、記事の途中から JIN の目次へ戻れるリンクの設置方法をご紹介します。
- JIN の目次へ戻る動きの説明
- 目次へ戻るリンクの設置手順
- その他のテーマでの応用例
このテクニックは他のテーマでも利用できます。
Cocoon、SWELL、その他のテーマでの利用方法もご紹介しています。
HTMLとかCSSとか分からなくても目的を果たせると思います。
こういうリンクが、読み手が目次をすぐに確認できる一つの方法としてコンテンツに設置してあると親切ですね。
ぜひあなたのブログにも設置してみてくださいね。
設置してみたらぜひコメント欄にて教えて下さい。こちらのページから紹介リンクを貼らせていただきます♪お使いのテーマで設定方法がわからないときはお気軽にお声がけください。コメント、またはTwitterからでも大丈夫ですよ。
WordPress のプラグインとテーマ、ブログ記事作りに役立つ記事を書いてます。
テーマは、Cocoon、JIN、Lightning、SWELL を主に使ってます。
WP愛だけじゃ生きていけない😂
JIN の目次へ戻る時の動き
実際に動きを見るのが一番ですので、下記の手順で動きをみてください。
- こちらのリンクをクリックしてください。
- このページの下部へ移動します。
- 左上にある、目次へ戻る、というリンクをクリックしてください。
- するとこのページの目次へさっと移動できるのが確認できます。
この設置方法をご紹介します。
JIN の目次には、Rich Table Of Contents というプラグインを利用しています。プラグインについてはこちらをご覧ください。
JIN の目次へ戻るリンクの設置方法
JINで目次へ戻るリンクの設置方法はつぎのとおりです。
- リンクを設置したい場所へ行ブロックを挿入する
- カスタムHTMLブロックを呼び出す
- 次のコードを貼り付ける
<p>▲<a href="#rtoc-mokuji-title">目次へ戻る</a></p>⬇次のように表示されます
JIN、SWELL テーマの目次への応用方法
まず、Cocoon や SWELL の設定方法をご紹介します。
その他のテーマをお持ちの場合は、次の説明へ移動してくださいね。
Cocoon の目次へ戻るリンク
Cocoon の場合は次のとおりです。
任意の場所でカスタムHTMLブロックを開いて、下のコードをコピペしてください。
<p>▲<a href="#toc">目次へ戻る</a></p>SWELL の目次へ戻るリンク（工夫が必要）
SWELL の場合は、Cocoon のようにできないので、少し工夫が必要です。
- 一番最初の見出しブロックの上にスペーサーブロックを挿入する
- スペーサーブロックの高さを１にして、高度な設定のHTMLアンカーに toc と入力する
- 目次へ戻るブロックを任意の場所に挿入する
一番最初の見出しブロックの上にスペーサーブロックを挿入する
スペーサーブロックの高さを１にして、高度な設定のHTMLアンカーに toc と入力する
目次へ戻るブロックを任意の場所に挿入する
<p>▲<a href="#toc">目次へ戻る</a></p>挿入したスペーサーブロックを消す方法
1pxの高さにしたのが悪いのかもしれんけど😅。
もしこのブロックを消したい場合は、次のようにしたらすぐに消せます。
別テーマで目次へ戻るを設定する方法
その他のテーマでもこの方法は利用することができます。
ブラウザは Google Chrome / Firefox が便利ですよ。
- ページを右クリックして、検証をクリック
- 検証画面の左上にあるボタンをクリック
- 左側のページ画面で目次を探し出してクリック
- ID=”***” という表記を見つける
- IDの中の文字を＃の後ろに貼り付ける
ページを右クリックして、検証をクリック
検証画面の左上にあるボタンをクリック
左側のページ画面で目次を探し出してクリック
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>IDの中の文字を＃の後ろに貼り付ける
<p>▲<a href="#toc">目次へ戻る</a></p>ぜひ試してみてくださいね♪不明な場合は、コメントやTwitterでお声がけください。
JIN の目次へ戻るパターン
上の用にシンプルなのが分かりやすくて良いと思いますが、もちろんボタンでも表現できますよ。
JIN のシンプルボタンの設定方法
- シンプルボタンを呼び出す。
- 右側の設定欄のリンク先URL欄に #rtoc-mokuji-title とコピペする
- あとは文字列やボタンの種類を変更するだけ
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のアフィリエイト機能を比較してみました。
⬇目次と見出しを内部リンクで活用するヒントです。
