この記事では、【THE THOR（ザ・トール）】 
の目次の使い方を紹介をします。
ザ・トールには目次を自動で作成してくれる機能が装備されています♪
プラグインを探してインストールしなくても目次機能が【THE THOR（ザ・トール）】 に標準装備で付いています。
この目次機能の表示設定を知っておかないと、目次が表示しないというハプニングが起こることも(￣▽￣;)
そんなことにならないように、目次機能の使い方を先に紹介します♪
目次に戻るボタンを作成したい時は、戻りたい場所にアンカーを設置し、「目次に戻る」ボタンを表示したい場所にボタンリンクを設置します。
私は、目次の上に内緒のアンカーを設置しています(笑)。
詳しい紹介は下の記事でしています。
＞＞＞プラグイン【ザ・トール】ページ内部リンクが使えるエディタにカスタマイズ
＞＞＞プラグイン【ザ・トール】「目次に戻る」のリンクボタンを作る
記事後半では応用編として、CSSをコピペして目次のデザインを自分好みにカスタマイズする方法も紹介しています♪
コピペする場所も指定しますので、初心者の方でも大丈夫♪
目次の枠線の変更や、 目次の番号を消すなど、 出来るだけ、コードは少なくと思っているので 最小限のカスタマイズを紹介しています♪
後半はコピペ文として長いコードの目次も紹介しています。
指定することが多いほどコードが長くなるんですよね(￣▽￣;)
THE THOR【ザ・トール】目次を表示させる設定にする
THE THORの目次はとってもシンプル(￣▽￣;)
左端にちょこんと表示されます(笑)
この目次を表示させるという設定をしてから、自分好みのデザインの目次に変えていきます(^^♪
THE THOR【ザ・トール】カスタマイズを選択
「外観」→「カスタマイズ」をクリックしてください。
THE THOR【ザ・トール】投稿ページを選択
「投稿ページ」をクリックした後、「目次設定」をクリックしてください。
THE THOR【ザ・トール】目次設定をします。
■目次を表示するか選択
デフォルトでは、「表示しない」が選択されています。 「表示する」を選択してください。
■目次を表示するための最小見出し数を設定
ここは見出しが何個以上あれば目次を作成するかの設定になります。
デフォルトで「1」が記入されているかと思います。
ここはこのまま触らないで置きます
見出しをあまり使わない記事などは要注意になります。
私のサイトでいうなら「ひとりごと」のページは見出しを使っていないので目次を非表示にしなくても、表示はされません(￣▽￣;)
■目次に表示する見出しのレベルを指定
見出しのどこまでを目次とするかです。 これはお好みですね(;^_^A
THE THOR【ザ・トール】目次の表示失敗例
例として、↓↓に目次の画像を張り付けてみました。
ｈ2タグから書いていなかった為に、なんと、 「0」スタート(-_-;)
なんだこれは 状態です。。。
THE THOR【ザ・トール】 記事中に目次を表示させる
【THE THOR（ザ・トール）】 ではなにも設定しなくても、初めの見出し行の上に目次は表示されます。
もし、自分のすきな場所に表示させたい場合は、 「ショートコード」を使います。
目次を表示させたい記事中の場所をクリックしてください。
その後「ショートコード」の横の▼をクリックしてください。
そして、「目次」をクリックしてください。
これで、その場所に「目次」が表示されます。
THE THOR【ザ・トール】目次のデザインをカスタマイズ♪
ここから【THE THOR（ザ・トール）】 の目次デザインの説明になっていきます(^^♪
【THE THOR（ザ・トール）】 のデフォルトのままだと,幅は、目次の文字が少ないと幅の狭い左側によっている目次になってしまいます。
狭い幅の目次が左側によってるのは、私は好きではないので 幅を広げました。 
これは幅が100％です。
THE THOR【ザ・トール】目次のデザインのコードをコピペする場所
「外観」→「カスタマイズ」
下にスクロールして「追加CSS」をクリックしてください。
この画像の右側の場所に、したの「コピペ文」をはりつけて 上のオレンジボタン「公開」をクリックして下さい(^^♪
THE THOR【ザ・トール】目次のデザインのコピペ文
オレン色の枠とオレンジ色の目次でコードの説明をします。
デザインの変更したのは２カ所です。
目次の外枠と、番号の数字です。
*コピペ文*
/*目次の外枠*/
.content .outline { width:100%; border: 2px solid #fa9c61;padding: 20px;}
/*数字*/
.content .outline__number{ background:#fff; color:#fa9c61; }THE THOR【ザ・トール】目次のデザインのコピペ文のコード説明
| width:100%; |
この100％の数字部分を変更すると、幅が変更されます。 もし、100％よりも、狭い幅がお好みの場合は この数字を小さい数字に変更して下さい。
| border: 2px solid #fa9c61; |
border: 2px ： ２ｐｘ幅の線で囲います。
solid ：線種を1本の実線にします。
#fa9c61 ：線の色になります。
目次を囲う線をどうするかはお好みでどうぞ♪
| padding: 20px; |
枠線と文字との隙間を指定します。
数字を大きくするほど隙間が空きます。
| background:#fff; |
後ろの背景色を 白 に指定します。
| color:#fa9c61; |
文字色を オレンジ に指定します。
色を変えたいなら
【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
で色のコードをコピペして変更してください。
周りを囲う線の種類を変えたいなら
ワードプレス【wordpress】文章をボックスで装飾♪簡単なやり方コピペOK
この↑記事の「3-3 ワードプレス囲み枠【ボックス】枠線の種類と色を指定」 に線種の名前と表示例を記載しましたので、1本線が嫌だな～という方はどうぞ♪
背景付き目次のデザインコピペ文
目次デザイン１/オレンジ点線枠でオレンジの数字
*コピペ文*
/*目次の外枠と背景*/
.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: transparent; |
背景を透明にしてくれます。
目次デザイン２/オレンジ点線枠+オレンジの数字+文字の色が茶色
*コピペ文*
/*目次の外枠と背景*/
.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;
}目次の背景に画像を使う
ここで紹介している目次の背景に使う画像は、商用でも使用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;
}
| 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;
}
名前を付けて保存して使用する背景画像達♪
工事中
ちょっとお待ちくださいませ♪
THE THOR【ザ・トール】目次のデザインをカスタマイズ(番号を消す）のコピペ文
THE THOR【ザ・トール】目次を表示させない方法
記事に目次を表示させるかさせないかは選択することが出来ます。
設定で「目次を表示する」を選択した場合は、デフォルトで目次が表示されます。
表示させたくない時は、投稿画面で下にスクロールしてください。
画面右側にある「個別非表示設定」の
□目次を非表示にする にチェックを入れてください♪
THE THOR【ザ・トール】サイドエリアに目次を表示させる方法♪
THE THOR【ザ・トール】の目次では、サイドエリアには表示できません。
サイドエリアに目次を表示させる場合はプラグインの力を借りましょう。
目次をサイドバーに表示させたい方は↓の記事で紹介しています♪
>>>THE THOR【ザ・トール】プラグインで追従サイドバーに目次を表示♪
THE THOR【ザ・トール】目次の使い方♪好みのデザインにカスタマイズ まとめ
設定で「目次を表示する」を選択しておくと、記事ごとに「目次を表示」か「目次を非表示」かを選択することが出来ます。
選択できるので「目次を表示する」を選択しておく方をおすすめします(^^♪
久々にこの記事を修正しました(￣▽￣;)
これからも目次のコピペ文をちょこちょこ追加しようと思います♪
追従サイドバーに目次を表示させたい方は下の記事をどうぞ♪
>>>THE THOR【ザ・トール】プラグインで追従サイドバーに目次を表示♪
/Decoration/TOOL/TOP/THE THOR/AFEREIT/
