コピペOK【ザ・トール】目次の幅を広げる♪好みのデザインに簡単カスタマイズ

2020年5月18日
2021年1月22日
THE THORのカスタマイズ
THE THOR, 目次

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

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

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

そら

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

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

1 THE　THORの目次を紹介
- 1.1 THE THORの目次機能で設定出来る事を紹介
- 1.2 THE　THORの目次♪カスタマイズできる項目
2 THE THORの目次の設定手順
3 THE　THORの目次機能を使用するを選択
4 THE THOR【ザ・トール】記事の好きな場所に目次を表示
- 4.1 画面にショートコードが表示されていない場合
5 THE THOR【ザ・トール】目次のデザインのコードをコピペする場所
6 THE THOR【ザ・トール】オレンジ枠の目次でコードの説明
7 背景付き目次のデザイン紹介
8 目次の背景に画像を使う
9 THE THOR【ザ・トール】目次が表示されてない時に確認する
10 THE THOR【ザ・トール】サイドエリアに目次を表示させる方法♪
11 THE　THORの「目次にもどる」の設定
12 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【ザ・トール】目次設定

■目次を表示するか選択

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

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

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

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

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

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

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

そら

「投稿ページ」と「固定ページ」それぞれ設定をしてください。

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

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

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

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

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

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

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

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

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

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

そら

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

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

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

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

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

≫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(&quot;https://soramanabrog.com/*-content/****/***/**/***.png&quot;); /*画像のアドレスを入れてください*/} 
/*数字*/ 
.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(&quot;https://soramanabrog.com/*-content/****/***/**/***.png&quot;); } 
/*数字*/ 
.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【ザ・トール】プラグインで追従サイドバーに目次を表示♪

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

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。
物販に興味がある方は、保険と思って「もしも」に登録（無料）して「Amazon」「楽天」「Yahoo」と提携を申請しておきましょう♪

A8.netはアフィリエイトブログ初心者向けのブログの作り方の無料セミナーがあるので、とってもおすすめです！！。
アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録（無料）をお勧めします(^^)/

/ブログを装飾/初心者向けTHE THOR初期設定/便利なサイト＆ツール/

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

フォローする

コピペOK【ザ・トール】目次の幅を広げる♪好みのデザインに簡単カスタマイズ

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【ザ・トール】目次のデザインのコピペ文のコード説明

目次の色を変えたい場合

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

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

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

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

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

目次の背景に画像を使う

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

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

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

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

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

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

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

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

THE THOR【ザ・トール】目次の使い方♪好みのデザインにカスタマイズ　まとめ

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

THE THOR見出し達の設定場所紹介

THE THOR(ザ・トール)【ブロックエディタ】囲み枠で装飾♪CSS使用

コピペOK♪THE THORの数字付リストの数字をカスタマイズしてみた

コピペOK♪THE THORの数字無しリストの点をカスタマイズしてみた

コピペOK【ザ・トール】目次の幅を広げる♪好みのデザインに簡単カスタマイズ

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【ザ・トール】目次のデザインのコピペ文のコード説明

目次の色を変えたい場合

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

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

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

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

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

目次の背景に画像を使う

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

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

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

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

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

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

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

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

THE THOR【ザ・トール】目次の使い方♪好みのデザインにカスタマイズ まとめ

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

THE THOR見出し達の設定場所紹介

THE THOR(ザ・トール)【ブロックエディタ】囲み枠で装飾♪CSS使用

コピペOK♪THE THORの数字付リストの数字をカスタマイズしてみた

コピペOK♪THE THORの数字無しリストの点をカスタマイズしてみた

THE　THORの目次を紹介

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

THE　THORの目次機能を使用するを選択

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

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

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

THE THOR【ザ・トール】目次の使い方♪好みのデザインにカスタマイズ　まとめ