みなさんこんにちは。
旅ブロガーのJonyとAi(@10to1_travel)です。
THE THOR(ザ・トール)にはデフォルトで目次の機能が付いてるので、Table of Contents Plusと言った重たいプラグインはいりません。
プラグインを使用しなくて良いと言うことは、サイト速度の向上や、面倒な設定をする必要がないと言うことですね。
THE THOR(ザ・トール)の目次はとても簡単に設定することがで、表示もされるので初心者の方でも安心です。
目次の設定が完了したら、今度はデザインのカスタマイズにも挑戦してみましょう！
デザインのカスタマイズはコピペだけで OKなので初心者の方でも簡単です。
＞＞【THE THOR】コピペで作る目次デザイン23選：CSSカスタマイズ
Jony THE THOR(ザ・トール)の目次デザインを 22選、紹介しるで！やっぱりデザインはオシャレな方が良いやろ！ Ai コピペだけだから初心者の人でも簡単だよ！ みなさんこんにちは[…]
また、THE THORのサイドバーに目次を表示させる方法も解説してますので、ご覧ください。
>>回遊率UP！THE THORのサイドバーに目次を表示・追従させる方法
みなさんこんにちは。 サイドバーに目次を表示したい！と思ったことありませんか？しかし、THE THOR(ザ・トール)にはサイドバーに目次を設置できる機能はありません。 今回は、どーしても THE THOR(ザ・トー[…]
THE THORの目次設定
まずは目次を設定します。THE THOR(ザ・」トール)の目次の作り方はとても簡単です。
と進みます。
目次設定の内容は以下の通りです。
- 目次を表示するか選択：「表示する」を選択
- 目次を表示するための最小見出し数を指定：1〜3で指定
- 目次に表示する見出しのレベルを指定：h2〜h5まで指定できる
- 目次パネルをデフォルトで閉じておく：閉じたい場合はチェック
ひとつずつ解説します。
目次を表示するか指定
記事に目次を表示するかどうかの設定です。
目次を表示させるために「表示する」を選択してください。
目次を表示するための最小見出し数を指定
記事にどれくらいの見出しがある時に目次を表示させるかの設定です。
あまり大きすぎるとエラーが起こる可能性があるので 1〜3で設定しましょう。
※当ブログは 1で設定してます。
目次に表示する見出しのレベルを指定
目次のどの見出しレベルまで表示させるかの設定です。
単純に 2なら h2見出しまで、3ならh3見出しまでと言う意味です。
※記事に目次が表示されないもしくは、[ outline ]と表示されてしまう場合、設定に原因があります。詳しく知りたい方は THE THORの目次が表示されない問題を解決をご覧ください。
THE THORの目次を表示する方法
THE THOR(ザ・トール)の目次の作り方です。記事内に表示する方法は 2種類あります。
- 自動：一番最初の h2見出しの上に表示される
- 手動：コードで好きな場所に表示する
自動：最初のh2見出し上に表示される
THE THOR(ザ・トール)は目次設定で「表示する」を設定していれば、自動で一番最初の h2見出しの上に設置されます。
つまり、特に位置の指定が無い場合は設定だけすれば何もしなくても自動で設置されます。
手動：コードで任意の場所に表示する
目次の位置を好きな位置に設置したい場合もあります。その場合は、目次コードを記事内に貼れば簡単に設置できます。
ショートコードは [ outline ]と言うコードを使います。
※実際は[]内にスペースは無いのですが、そのまま書くとここに目次が表示されてしまうのでご了承ください。
ショートコードはエディターメニューの「ショートコード」からも選ぶことができます。
THE THORの目次が表示されない時の解決策
先日、読者さんから「THE THOR(ザ・トール)の目次が表示されない！」とお問い合わせをいただきました。正確には [ outline ]と表示されてしまうらしいです。
「もしかして何か間違ったことした！？どーしよう！！」と焦らなくても大丈夫です！
記事に目次が表示されない問題はとても簡単に解決することができます。
今回は 2つの方法を紹介します。
- 目次の表示設定を確認する
- 目次の最小見出しの数を確認する
解決策1：目次の表示設定を確認する
THE THOR(ザ・トール)の目次が表示されない多くの原因がこれです。
最初にお伝えした、目次の設定でしっかりと「表示する」になっているか確認してください。ここが「非表示(default)」になっていると目次が表示されません。
解決策2：目次の最小見出しの数を確認する
次に同じ目次の設定の最小見出しの数を確認してください。
「目次を表示するための最小見出し数を指定」を見てください。これは簡単に言うと、「見出しの数が最低いくつある時に目次を表示するか」と言う意味です。
この見出し数の数が大きすぎる( 5〜10)とエラーを起こし、目次が表示されないケースがあります。
基本的には 1〜3に設定しておきましょう。
※当ブログは 1に設定してます。
THE THORの目次設定と表示方法：まとめ
今回は THE THOR(ザ・トール)の目次設定と表示方法を紹介しました。
何もしなくても自動で表示されるのは、初心者の方にとって非常に助かる機能ですね。
目次の設定と表示方法ができたら、次はデザインのカスタマイズに挑戦してみましょう。目次がオシャレだと、サイト全体の雰囲気も変わります。
デザインのカスタマイズはコピペだけで OKなので初心者の方でも簡単ですよ！
＞＞【THE THOR】コピペで作る目次デザイン23選：CSSカスタマイズ
Jony THE THOR(ザ・トール)の目次デザインを 22選、紹介しるで！やっぱりデザインはオシャレな方が良いやろ！ Ai コピペだけだから初心者の人でも簡単だよ！ みなさんこんにちは[…]
また、THE THORのサイドバーに目次を表示させる方法も解説してますので、ご覧ください。
>>回遊率UP！THE THORのサイドバーに目次を表示・追従させる方法
みなさんこんにちは。 サイドバーに目次を表示したい！と思ったことありませんか？しかし、THE THOR(ザ・トール)にはサイドバーに目次を設置できる機能はありません。 今回は、どーしても THE THOR(ザ・トー[…]
最後まで読んでいただきありがとうございます。
おわり
- 2021年12月21日
- THE THORの使い方
- THE THOR