【THE THOR】目次を自分好みにコピペでカスタマイズ！

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

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

THE THORの目次機能を使って目次を表示出来ていても「このチョコンと左側に表示されてる目次・・・なおせないの？？」ってそらはなりました。

実はTHE THORの目次機能って見た目を細かく設定できないのです(￣▽￣;)

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

☆

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

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

 

これは表示の設定がされていない場合に起こります。

目次が非表示の設定になっていると、ショートコードの「目次」を入れても目次は表示されません。

 

目次が表示されない時は、目次を表示させる設定をしましょう。

 

PR

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

 

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

 

THE　THORで設定出来るのは、目次を使うか使わないかと、表示場所になります。

 

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

 

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

 

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

 

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♪画面にショートコードが表示されていない場合

 

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

 

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

 

 

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

 

＞＞＞【THE THOR】クラシックエディタの使い方を初心者さん向けに紹介♪

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; }

枠線の横幅を最大にして、数字の色を変更してある目次から紹介していきます。

目次をこうしたいよ～という希望が多いほど、コードは長くなります(;^_^A

後半はカスタマイズ項目を増やして、長いコピペ文の目次も紹介しています。

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

width:100%;

この100％の数字部分を変更すると、目次の横幅が変更されます。

狭い幅がお好みの場合は この数字を小さい数字に変更して下さい。

border: 2px solid #fa9c61;

border: 2px　

目次の囲み枠の線の幅を２ｐｘに指定しています。

数字が大きくなるほど線の幅が太くなります。

solid 　

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

#fa9c61

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

padding: 20px;

枠線と文字との隙間を指定します。

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

background:#fff;

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

背景に画像を使用する場合は下のコードに変更してください。

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

color:#fa9c61;

文字色になります。

目次の色を変えたい場合

色を変更したい場合は色コードを変更します。

下の記事から色のコードをコピペして使用してください。

＞＞＞カラーコードまとめ＆ クラシックエディタで コードを取得

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

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

 *コピペ文*

/*目次の外枠と背景*/
 .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; }

目次デザイン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です。

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

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

ピンク花柄が背景の目次

*　コピペ文　*

/*目次の外枠と背景*/ 
.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【ザトール】目次を自分好みに表示♪設定と簡単カスタマイズ　まとめ

使用するコード達は、すべて半角英数字です。

エラーになった場合など、全角が紛れていないか探してみてください(￣▽￣;)

ブロックエディタを使用するようになり、この記事を修正しました。

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