【the thor】目次を自分好みに表示♪設定と簡単カスタマイズ

2021年7月5日
2021年11月16日
THE THORのカスタマイズ
THE THOR, 目次

THE　THORの目次が表示されないんだけど？！
目次の見た目って変えれないの？
目次の幅が狭いの何とかならないの？

自分好みのブログの目次を使用したいですよね？

THE THORの目次機能を使って目次を表示出来ていても「このチョコンと左側に表示されてる目次・・・なおせないの？？」ってそらはなりました。
実はTHE THORの目次機能って見た目を細かく設定できないのです(￣▽￣;)

そら

私は目次の幅の広げ方が分からない時、THE THORの目次機能を使用しないで手作業で1行ずつリンクを作りながら目次を作成していました(笑)
それほど幅の狭い目次は使用したくありませんでした(￣▽￣;)

この記事ではTHE THORの目次機能の設定方法＆そらがしているカスタマイズ方法(コピペOK♪）を初心者向けに紹介しています。

THE THORの目次ってどんなの？

プラグインを探してインストールしなくても標準装備でついている【THE THOR（ザ・トール）】の目次機能(^^♪

このTHE THORの目次はとってもシンプル(￣▽￣;)
記事中の見出しを使って自動で目次を作成してくれます。

そして左端にちょこんと表示されます(笑)

この目次を表示させるという設定をしてから、自分好みのデザインの目次に変えていきます(^^♪

THE THORの目次が表示されない？！

これは表示の設定がされていない場合に起こります。
目次が非表示の設定になっていると、ショートコードの「目次」を入れても目次は表示されません。
ショートコードの文字が表示されるだけになってしまいます(￣▽￣;)
目次が表示されない時は、目次を表示させる設定をしましょう。
表示させる詳しい手順はこれから紹介していきます(^^)/

THE THORの目次機能で設定出来る事を紹介

THE　THORの目次機能を使用するか選択
使用するを選択した場合、記事ごとに表示/非表示を選択
使用するを選択した場合、記事の好きな場所に目次を表示できる

THE　THORで設定出来るのは、目次を使うか使わないか。
使うならどう使うか、という事が設定できます。

THE THORの目次のカスタマイズできる項目

目次の幅
目次の色（数字・文字）
目次の背景
目次の枠線（色・太さ・線種）

目次の見た目の変更はTHE THORの機能にないので、自分でカスタマイズしていきます。

THE THORの目次の設定手順

目次機能を「使用する」を選択する
目次の画像を見て、いいなと思った画像CSSコードを指定の場所にコピペする
見た目をもっと変えたい時は、コピペしたコードの色のコードや大きさの数字を変更する

そら

手順はこの３個です。
コピペする場所も、コードの意味も説明していきますので初心者さんでも大丈夫♪

THE　THORの目次の設定

目次は、「投稿ページ設定」「固定ページ設定」それぞれで「表示」「非表示」を設定できます。
ここでは「投稿ページ設定」を例に紹介していきます(^^)/

「外観」→「カスタマイズ」→「投稿ページ」（固定ページ）→「目次設定」をクリックしてください。

THE THOR【ザ・トール】目次を「表示する」を選択

THE THOR♪目次を表示するか選択

デフォルトでは、「表示しない」が選択されています。
「表示する」を選択してください。

THE THOR♪目次を表示するための最小見出し数を設定

ここは見出しが何個以上あれば目次を作成するかの設定になります。
デフォルトで「1」が記入されているかと思います。
ここはこのまま触らないで置きます。
数字「1」を指定した場合は、記事中に見出しが1個以上ある時に「見出しが表示」されます。

THE THOR♪目次に表示する見出しレベルを指定

表示させる目次の見出しの種類を指定します。
数字が「5」を指定した場合は「見出し5」までを目次に表示させます。

THE THOR♪目次パネルをデフォルトで閉じておく

訪問者さんに「開く」をクリックしてもらい、目次を表示させるようにしたい場合はここにチェックを入れてください。

THE THOR【ザ・トール】目次の表示失敗例

見出し2から書いていなかった場合は「０」スタートになります(;^_^A

THE THORの目次は記事ごとに表示/非表示を選択

画面右側にある「個別非表示設定」の「目次を非表示にする」をクリックしてださい。

「個別非表示設定」が表示されていない場合

☆クラシックエディタを使用している場合☆

画面右上にある「表示オプション」をクリックして「個別非表示設定」にチェックを入れてください。

THE THOR【ザ・トール】記事の好きな場所に目次を表示

【THE THOR（ザ・トール）】でショートコードを使用する場合、ブロックエディタの「クラシック」スタイルを選択するか、クラシックエディタを使用します。

【THE THOR（ザ・トール）】では自動で「初めの見出し」の上に目次は表示されます。
自分のすきな場所に表示させたい場合は、「ショートコード」を使います。
目次を表示させたい記事中の場所をクリックしてください。
その後「ショートコード」の横の▼をクリックして「目次」を選択してください。

そら

ショートコードの「目次」を使用した場合は、自動設置の目次は表示されません。

THE THOR♪画面にショートコードが表示されていない場合

クラシックエディタの項目に「ショートコード」がない場合は、エディタ拡張プラグインを入れて表示させましょう(^^♪

「Advanced Editor Tools」を使ってショートコードを表示

「Advanced Editor Tools」のプラグインのインストール方法＆使い方は下の記事で紹介しています。

≫THE THOR(ザ・トール)ブロックエディタ拡張プラグインを紹介

目次に戻る

THE THORブロックエディタで記事の好きな場所に目次を表示

ブロックエディタで目次を自分の好きな場所に入れす場合は、ショートコードブロックを使用します。
目次を表示させたい場所を一度クリックした後、ショートコードを検索して、ショートコードのブロックを選択します。

ショートコードのブロックに画像と同じように「　

1 THE THORの目次ってどんなの？
2 THE THORの目次が表示されない？！
3 THE THORの目次機能で設定出来る事を紹介
4 THE THORの目次のカスタマイズできる項目
5 THE THORの目次の設定手順
6 THE　THORの目次の設定
7 THE THOR【ザ・トール】目次を「表示する」を選択
- 7.1 THE THOR♪目次を表示するか選択
- 7.2 THE THOR♪目次を表示するための最小見出し数を設定
- 7.3 THE THOR♪目次に表示する見出しレベルを指定
- 7.4 THE THOR♪目次パネルをデフォルトで閉じておく
8 THE THOR【ザ・トール】目次の表示失敗例
9 THE THORの目次は記事ごとに表示/非表示を選択
10 「個別非表示設定」が表示されていない場合
11 THE THOR【ザ・トール】記事の好きな場所に目次を表示
- 11.1 THE THOR♪画面にショートコードが表示されていない場合
- 11.2 「Advanced Editor Tools」を使ってショートコードを表示
12 THE THORブロックエディタで記事の好きな場所に目次を表示
13 THE THORの目次をコピペでカスタマイズしよう(^^♪
14 THE THOR【ザ・トール】目次のデザインのコードをコピペする場所
15 THE THOR【ザ・トール】オレンジ枠の目次でコードの説明
- 15.1 THE THOR【ザ・トール】目次のデザインコピペ文のコード説明
- 15.2 目次の色を変えたい場合
- 15.3 目次の周りを囲う線の種類を変えたい場合
16 背景付き目次のデザイン紹介
- 16.1 目次デザイン１/オレンジ点線枠でオレンジの数字
- 16.2 目次デザイン２/オレンジ点線枠+オレンジの数字+文字の色が茶色
- 16.3 目次デザイン3/赤の点線枠+赤の数字+文字の色が茶色
17 目次の背景に画像を使う
- 17.1 目次デザイン1/ピンクチェックが背景の目次
- 17.2 目次デザイン2/ピンク花柄が背景の目次
- 17.3 目次デザイン3/ピンク布地質感が背景の目次
- 17.4 目次デザイン４/黄色布地質感が背景の二重枠の目次
- 17.5 THE THOR【ザ・トール】目次のデザインをカスタマイズ(番号を消す）のコピペ文
18 THE THOR【ザトール】目次が表示されてない時に確認する
19 THE THOR【ザトール】サイドエリアに目次を表示させる方法♪
20 THE　THORの「目次にもどる」の設定
21 the thor【ザトール】目次を自分好みに表示♪設定と簡単カスタマイズ　まとめ

　」と打ち込んでください。

THE THORの目次をコピペでカスタマイズしよう(^^♪

カスタマイズできる項目は下の４種類です。

目次の幅
目次の色（数字・文字）
目次の背景
目次の枠線（色・太さ・線種）

目次の見た目の変更はTHE THORの機能にないので、自分でカスタマイズしていきます。

THE THOR【ザ・トール】目次のデザインのコードをコピペする場所

「外観」→「カスタマイズ」→「追加CSS」の順にクリックしてください。
この「追加CSS」の場所に、好みの目次の「コピペ文」をはりつけて上のオレンジボタン「公開」をクリックして下さい(^^♪

THE THOR【ザ・トール】オレンジ枠の目次でコードの説明

*コピペ文*

/*目次の外枠*/ 
.content .outline { 
width:100%; 
border: 2px solid #fa9c61;
padding: 20px;} 
/*数字*/
.content .outline__number{ 
background:#fff;
color:#fa9c61; }

/*目次の外枠*/

.content .outline {

width:100%;

border: 2px solid #fa9c61;

padding: 20px;}

/*数字*/

.content .outline__number{

background:#fff;

color:#fa9c61; }

枠線の横幅を最大にして、数字の色を変更してある目次から紹介していきます。
目次をこうしたいよ～という希望が多いほど、コードは長くなります(;^_^A
後半はカスタマイズ項目を増やして、長いコピペ文の目次も紹介しています。

THE THOR【ザ・トール】目次のデザインコピペ文のコード説明

width:100%;

この100％の数字部分を変更すると、目次の横幅が変更されます。
狭い幅がお好みの場合はこの数字を小さい数字に変更して下さい。

border: 2px solid #fa9c61;

border: 2px　

目次の囲み枠の線の幅を２ｐｘに指定しています。
数字が大きくなるほど線の幅が太くなります。

solid 　

目次の囲み枠の線種を1本の実線に指定しています。
線は二重線や点線など色々あります。

#fa9c61

目次の囲み枠の線の色になります。

padding: 20px;

枠線と文字との隙間を指定します。
数字を大きくするほど枠線と数字＆文字との隙間が空きます。

background:#fff;

後ろの背景色を「白」に指定しています。

color:#fa9c61;

文字色になります。

目次の色を変えたい場合

色を変更したい場合は色コードを変更します。
下の記事から色のコードをコピペして使用してください。

≫【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

目次の周りを囲う線の種類を変えたい場合

下の記事の「ワードプレス【wordpress】文章の囲み枠【ボックス】の種類/説明とコピペ文」に線種の名前と表示例を記載しましたので、1本線が嫌だな～という方はどうぞ♪

ワードプレス【wordpress】文章をボックスで装飾♪簡単なやり方コピペOK

目次に戻る

背景付き目次のデザイン紹介

目次デザイン１/オレンジ点線枠でオレンジの数字

*コピペ文*

/*目次の外枠と背景*/
 .content .outline {
 width:100%;
 border:5px dotted #fa9c61;
 padding: 20px;
 background: #fcf7f5;} 
/*数字*/
 .content .outline__number{
 background: transparent;
 color:#fa9c61; }
 /*行の背景*/ 
.content .outline__switch + .outline__list { 
background: transparent; }

/*目次の外枠と背景*/

.content .outline {

width:100%;

border:5px dotted #fa9c61;

padding: 20px;

background: #fcf7f5;}

/*数字*/

.content .outline__number{

background: transparent;

color:#fa9c61; }

/*行の背景*/

.content .outline__switch + .outline__list {

background: transparent; }

背景色を変更したい場合は、「/*目次の外枠と背景*/」の中の「background: 」の後ろの色コードを変更してください。

目次デザイン２/オレンジ点線枠+オレンジの数字+文字の色が茶色

*コピペ文*

/*目次の外枠と背景*/ 
.content .outline { 
width:100%; 
border:5px dotted #fa9c61; 
padding: 20px; 
border-radius:10px; 
background: #fcf7f5; } 
/*数字*/ 
.content .outline__number{ 
background:transparent; 
color:#e66d45; } 
/*行の背景*/ 
.content .outline__switch + .outline__list { 
background:transparent ; } 
/*目次の文字*/ 
.outline__title { 
color: #5e1b05; font-weight:bold; } 
/*目次内容*/ 
.content .outline__link { 
color: #a8593e; }

/*目次の外枠と背景*/

.content .outline {

width:100%;

border:5px dotted #fa9c61;

padding: 20px;

border-radius:10px;

background: #fcf7f5; }

/*数字*/

.content .outline__number{

background:transparent;

color:#e66d45; }

/*行の背景*/

.content .outline__switch + .outline__list {

background:transparent ; }

/*目次の文字*/

.outline__title {

color: #5e1b05; font-weight:bold; }

/*目次内容*/

.content .outline__link {

color: #a8593e; }

目次デザイン3/赤の点線枠+赤の数字+文字の色が茶色

* コピペ文 *

/*目次の外枠と背景*/ 
.content .outline { 
width:100%; 
border:5px dotted #b3191c; 
padding: 20px; 
border-radius:10px; 
background: #fcf7f5; } 
/*数字*/ 
.content .outline__number{ 
background:transparent; color:#b3191c; } 
/*行の背景*/ 
.content .outline__switch + .outline__list {
background:transparent ; } 
/*目次の文字*/ 
.outline__title { 
color: #5e1b05; font-weight:bold; } 
/*目次内容*/ 
.content .outline__link { 
color: #a8593e; }

/*目次の外枠と背景*/

.content .outline {

width:100%;

border:5px dotted #b3191c;

padding: 20px;

border-radius:10px;

background: #fcf7f5; }

/*数字*/

.content .outline__number{

background:transparent; color:#b3191c; }

/*行の背景*/

.content .outline__switch + .outline__list {

background:transparent ; }

/*目次の文字*/

.outline__title {

color: #5e1b05; font-weight:bold; }

/*目次内容*/

.content .outline__link {

color: #a8593e; }

目次に戻る

目次の背景に画像を使う

ここで紹介している目次の背景に使う画像は、商用でも使用OKです。

使用した場合は、「そらのまなびぶろぐ」とどこかに記載してくれるとそらがよろこびます(￣▽￣;)

ちょっとずつ画像は増やしていく予定です(^^♪

目次デザイン1/ピンクチェックが背景の目次

使った画像はです。

上の小さな画像の上で右クリック→「画像を名前を付けて保存」をクリックしてダウンロードしてください。

その後メディアにアップロードして使用してください♪

*コピペ文*

/*目次の外枠と背景*/ 
.content .outline {
width:100%; 
border:5px dotted #b3191c;/*枠線の設定*/ 
padding: 20px;/*枠線と内容との隙間*/ 
border-radius:10PX;/*枠線の四つ角の丸み*/ 
background-image: url("https://soramanabrog.com/*-content/****/***/**/***.png"); /*画像のアドレスを入れてください*/} 
/*数字*/ 
.content .outline__number{ 
background:transparent; 
color:#b3191c;
/*数字の色*/ 
font-weight:bold;/*数字を太字に*/ } 
/*行の背景*/ 
.content .outline__switch + .outline__list {
 background:transparent ; } 
/*目次*/ 
.outline__title { color: #5e1b05;/*目次の色*/ 
font-weight:bold;/*目次を太字に*/ } 
/*目次内容*/ 
.content .outline__link { 
color: #a8593e;　/*文字色*/ }

/*目次の外枠と背景*/

.content .outline {

width:100%;

border:5px dotted #b3191c;/*枠線の設定*/

padding: 20px;/*枠線と内容との隙間*/

border-radius:10PX;/*枠線の四つ角の丸み*/

background-image: url("https://soramanabrog.com/*-content/****/***/**/***.png"); /*画像のアドレスを入れてください*/}

/*数字*/

.content .outline__number{

background:transparent;

color:#b3191c;

/*数字の色*/

font-weight:bold;/*数字を太字に*/ }

/*行の背景*/

.content .outline__switch + .outline__list {

background:transparent ; }

/*目次*/

.outline__title { color: #5e1b05;/*目次の色*/

font-weight:bold;/*目次を太字に*/ }

/*目次内容*/

.content .outline__link {

color: #a8593e;　/*文字色*/ }

background-image: url(“https://soramanabrog.com/*-content/****/***/**/***.png”);

画像の場所を指定します。

アップロードした画像をどこでもいいので表示させた後に、「テキスト」で画像のURLを確認して貼り付けてください(^^♪

目次デザイン2/ピンク花柄が背景の目次

使用した画像はです。

コードはチェックと同じで画像だけを変更しました。

目次デザイン3/ピンク布地質感が背景の目次

試用した画像はです。

コードはチェックと同じで画像だけを変更しました。

目次デザイン４/黄色布地質感が背景の二重枠の目次

使用した画像はです。

*　コピペ文　*

/*目次の外枠と背景*/ 
.content .outline { 
width:100%; 
border:11px double #b50211; 
padding: 20px ; 
background-image: url("https://soramanabrog.com/*-content/****/***/**/***.png"); } 
/*数字*/ 
.content .outline__number{ 
background:transparent; 
color:#b50211; 
font-weight:bold; } 
/*行の背景*/ 
.content .outline__switch + .outline__list { 
background:transparent ; } 
/*目次*/ 
.outline__title { 
color: #5e1b05; font-weight:bold; } 
/*目次内容*/ 
.content .outline__link { 
color: #5e1b05; }

/*目次の外枠と背景*/

.content .outline {

width:100%;

border:11px double #b50211;

padding: 20px ;

background-image: url("https://soramanabrog.com/*-content/****/***/**/***.png"); }

/*数字*/

.content .outline__number{

background:transparent;

color:#b50211;

font-weight:bold; }

/*行の背景*/

.content .outline__switch + .outline__list {

background:transparent ; }

/*目次*/

.outline__title {

color: #5e1b05; font-weight:bold; }

/*目次内容*/

.content .outline__link {

color: #5e1b05; }

THE THOR【ザ・トール】目次のデザインをカスタマイズ(番号を消す）のコピペ文

「/*数字*/」の所にある「.content .outline__number{～～～｝」の場所の文字～～～の部分を「display:none ;」だけにします。

目次に戻る

THE THOR【ザトール】目次が表示されてない時に確認する

目次を表示するか選択で「表示しない」が選択されていませんか？
画面右側にある「個別非表示設定」の「目次を非表示にする」にチェックがはいっていませんか？

目次が表示されない場合は、この２カ所の確認をしてください。

THE THOR【ザトール】サイドエリアに目次を表示させる方法♪

THE THOR【ザ・トール】の目次では、サイドエリアには表示できません。
サイドエリアに目次を表示させる場合はプラグインの力を借りましょう。
目次をサイドバーに表示させたい方は↓の記事で紹介しています♪

>>>THE THOR【ザ・トール】プラグインで追従サイドバーに目次を表示♪

THE　THORの「目次にもどる」の設定

THE THORの目次機能には「目次に戻る」機能までは流石（笑)についていません。
目次に戻るボタンを作成したい時は、戻りたい場所にアンカーを設置し、「目次に戻る」ボタンを表示したい場所にボタンリンクを設置します。

そら

私は、「目次に戻る」ボタンを使用するときは目次の上に内緒のアンカーを設置しています(笑)。

詳しい紹介は下の記事でしています。
≫プラグイン【ザ・トール】ページ内部リンク（アンカー）が使えるエディタにカスタマイズ
≫プラグイン【ザ・トール】「目次に戻る」のリンクボタンを作る

the thor【ザトール】目次を自分好みに表示♪設定と簡単カスタマイズ　まとめ

使用するコード達は、すべて半角英数字です。
エラーになった場合など、全角が紛れていないか探してみてください(￣▽￣;)
ブロックエディタを使用するようになり、この記事を修正しました。

追従サイドバーに目次を表示させたい方は下の記事をどうぞ♪
>>>THE THOR【ザ・トール】プラグインで追従サイドバーに目次を表示♪

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
人気ブログランキング

最新情報をチェックしよう！

フォローする

【the thor】目次を自分好みに表示♪設定と簡単カスタマイズ

THE THORの目次ってどんなの？

THE THORの目次が表示されない？！

THE THORの目次機能で設定出来る事を紹介

THE THORの目次のカスタマイズできる項目

THE THORの目次の設定手順

THE THORの目次の設定

THE THOR【ザ・トール】目次を「表示する」を選択

THE THOR♪目次を表示するか選択

THE THOR♪目次を表示するための最小見出し数を設定

THE THOR♪目次に表示する見出しレベルを指定

THE THOR♪目次パネルをデフォルトで閉じておく

THE THOR【ザ・トール】目次の表示失敗例

THE THORの目次は記事ごとに表示/非表示を選択

「個別非表示設定」が表示されていない場合

THE THOR【ザ・トール】 記事の好きな場所に目次を表示

THE THOR♪画面にショートコードが表示されていない場合

「Advanced Editor Tools」 を使ってショートコードを表示

THE THORブロックエディタで 記事の好きな場所に目次を表示

THE THORの目次をコピペでカスタマイズしよう(^^♪

THE THOR【ザ・トール】目次のデザインのコードをコピペする場所

THE THOR【ザ・トール】オレンジ枠の目次でコードの説明

THE THOR【ザ・トール】目次のデザインコピペ文のコード説明

目次の色を変えたい場合

目次の周りを囲う線の種類を変えたい場合

背景付き目次のデザイン紹介

目次デザイン１/オレンジ点線枠でオレンジの数字

目次デザイン２/オレンジ点線枠+オレンジの数字+文字の色が茶色

目次デザイン3/赤の点線枠+赤の数字+文字の色が茶色

目次の背景に画像を使う

目次デザイン1/ピンクチェックが背景の目次

目次デザイン2/ピンク花柄が背景の目次

目次デザイン3/ピンク布地質感が背景の目次

目次デザイン４/黄色布地質感が背景の二重枠の目次

THE THOR【ザ・トール】目次のデザインをカスタマイズ(番号を消す）のコピペ文

THE THOR【ザトール】目次が表示されてない時に確認する

THE THOR【ザトール】サイドエリアに目次を表示させる方法♪

THE THORの「目次にもどる」の設定

the thor【ザトール】目次を自分好みに表示♪設定と簡単カスタマイズ まとめ

THE THORのカスタマイズの最新記事8件