あなたも今すぐ旅ブログを始めよう！【簡単10分】

【THE THOR】コピペで作る目次デザイン22選：CSSカスタマイズ

みなさんこんにちは。

JonyとAi(@10to1_travel)です。

THE THOR(ザ・トール)にはデフォルトで目次の機能が付いてるので、Table of Contents Plusと言った重たいプラグインはいりません。

さすが THE THOR！

目次はユーザーが最初に「その記事の内容を網羅できる」重要な役割を果たしますのでサイトの顔とも言えますね。それだけにデザインは重要です。

にも関わらず、THE THOR(ザ・トール)の目次は WordPressのテーマの中でも

ダントツで地味です！(笑)

 
Jony
地味な目次は見る気失せるしなー。デザインオシャレやのに何で目次こんな地味なんやろ。
 
Ai
やっぱりオシャレなサイト作るんだったらオシャレな目次が良いよね！

ということで、今回は THE THOR(ザ・トール)の目次を CSSでカスタマイズします。デザインもたくさん用意しましたので、好きなデザインの CSSをコピペしてご利用ください！

目次の設定方法やカスタマイズ方法をすでに知ってるから目次デザインから読みたい人はコチラからデザイン集までジャンプしてください。

目次デザイン集までジャンプする！

また、目次の重要性については以下の記事で解析してるのでご覧ください。

関連記事
ブログに目次は必要？SEOとユーザービリティから重要性を徹底解説

みなさんこんにちは。 JonyとAi(@10to1_travel)です。 さっそくですが、以下のツイートをご覧ください。 これは私たちのアカウントで目次に関するブロガーさんの意識の調査をし[…]

目次

THE THORの目次のカスタマイズ【完成図】

今回の THE THOR(ザ・トール)の目次のデザインのカスタマイズの完成図です。

まずは THE THOR(ザ・トール)のデフォルト目次です。

THE THORの目次のカスタマイズ【完成図】
  • 地味
  • 見ずらい
  • なぜか左寄り

とにかく地味ですね。笑

以下が完成図です。ここを目指します。

THE THORの目次のカスタマイズ【完成図】

オシャレになりましたね。

 
Jony
その前に、まず THE THOR(ザ・トール)に目次を表示させるための設定をするで！知ってるって人はスキップしてカスタマイズの方法から読んでくれい！

THE THORの目次を設定する

THE THOR(ザ・トール)の目次をカスタマイズする前に、まずは目次を設定しましょう。

THE THOR(ザ・」トール)の目次の作り方はとても簡単です。

外観 → カスタマイズ → 投稿ページ設定[THE] → 目次設定

と進みます。

THE THOR(ザ・トール)の目次を設定する

目次設定の内容は以下の通りです。

THE THOR(ザ・トール)の目次を設定する
  • 目次を表示するか選択：「表示する」を選択
  • 目次を表示するための最小見出し数を指定：1〜3で指定
  • 目次に表示する見出しのレベルを指定：h2〜h5まで指定できる
  • 目次パネルをデフォルトで閉じておく：閉じたい場合はチェック

ひとつずつ解説します。

目次を表示するか指定

記事に目次を表示するかどうかの設定です。

目次を表示させるために「表示する」を選択してください。

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

記事にどれくらいの見出しがある時に目次を表示させるかの設定です。

あまり大きすぎるとエラーが起こる可能性があるので 1〜3で設定しましょう。

※当ブログは 1で設定してます。

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

目次のどの見出しレベルまで表示させるかの設定です。

単純に 2なら h2見出しまで、3ならh3見出しまでと言う意味です。

 
Ai
これで目次の設定は OKだね！次は目次の作り方を解説するよ！「知ってるよ」って人はスキップしてね！

※記事に目次が表示されないもしくは、[ outline ]と表示されてしまう場合、設定に原因があります。詳しく知りたい方は THE THORの目次が表示されない問題を解決をご覧ください。

THE THOR 記事内に目次の作り方

THE THOR(ザ・トール)の目次の作り方です。記事内に設置する方法は 2種類あります。

  • 自動：一番最初の h2見出しの上に設置される
  • 手動：コードで好きな場所に設置する

自動：最初のh2見出し上に設置される

THE THOR(ザ・トール)は目次設定で「表示する」を設定していれば、自動で一番最初の h2見出しの上に設置されます。

つまり、特に位置の指定が無い場合は設定だけすれば何もしなくても自動で設置されます。

手動：コードで任意の場所に設置する

目次の位置を好きな位置に設置したい場合もあります。その場合は、目次コードを記事内に貼れば簡単に設置できます。

ショートコードは [ outline ]と言うコードを使います。

※実際は[]内にスペースは無いのですが、そのまま書くとここに目次が表示されてしまうのでご了承ください。

ショートコードはエディターメニューの「ショートコード」からも選ぶことができます。

THE THORの目次をカスタマイズする方法２ステップ

それでは THE THOR(ザ・トール)の目次を CSSでカスタマイズする方法を 2ステップで紹介します。

と言ってもコピペだけ、初心者の方でもとても簡単に行うことができます。

THE THORの目次のカスタマイズ手順
  • ステップ１
    CSSをコピーする
    目次のカスタマイズで使う CSSコードをコピーします。
  • ステップ２
    追加CSSに貼り付ける
    THE THOR(ザ・トール)の追加CSSにコピーしたコードを貼り付けます。

※カスタマイズは自己責任でお願いします。

ステップ1：CSSをコピーする

ステップ１ではカスタマイズに使う CSSコードをコピーします。

以下の CSSをコピーしてください。

CSSをコピーする
右の黄色の「コピーする」ボタンでワンクリックでコピーすることができます。

/*目次 カスタマイズ*//*目次 ボディ*/
.content .outline {
position:relative;
border: 3px solid #606060;
padding: 10px ;
padding-left:0px;background:#fffff9;
}
/*H2見出しの番号*/
.content .outline__number{
width:1.8em;height:1.8em;
padding:0;
line-height:1.8em;
text-align:center;
background:#cda34f;
color:#ffffff;
border-radius:50%;
}
/*H3見出しの番号*/
.content li ul li .outline__number{
font-weight:bold;
background:transparent;
color:#606060;
width:auto;
}
/*テキストカラー*/
.content .outline__link {
transition-duration:0.2s;
display: block;
color:#606060;
}
/*マウスオーバー時のホバーエフェクト*/
.content .outline__link:hover {
transition-duration:0.2s;
color:#cda34f;
}
/*目次タイトル*/
.outline__title {
color:#505050;
font-weight: 700;
width:100%;
padding: 0px 0px 0px 20px;
}.content .outline__switch{
right:1.5rem;
top:10px;
}
/*OPEN CLOSEのカスタマイズ*/
.content .outline__toggle:checked + .outline__switch::before {
content: "［ ▲ CLOSE］";
position:absolute;
right:10px;
color:#e34717;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}.content .outline__switch::before {
content: "［ ▼ OPEN ］";
border: 0;
position:absolute;
right:10px;
color:#e34717;
}
/*ボーダー装飾*/
.content .outline__switch + .outline__list {
background: transparent;
}
.content .outline__switch + ul.outline__list {
margin-left:0;
margin-right:0;
border-top:4px dotted #cfcfcf;
}
.content .outline__switch + .outline__list-2 li:first-child{
margin-top:1.0em;
}
.content .outline__switch + .outline__list-2 li ul li:first-child{
margin-top:0.5em;
}
.outline__list-2 > li > a{
font-weight:700;
}
/*タイトル横のアイコン*/
.outline__title:before{
font-family: "icomoon";
content: "\e92f";
margin-right:5px;
}
/* 目次の頭揃え */
.outline__link {
padding-left:2em;
text-indent: -2em;
}
.outline__number{
text-indent: 0;
}
.outline__list-3 .outline__link {
padding-left:3em;
text-indent: -2.85em;
}
@media only screen and (min-width: 992px){
.outline__list-2 > li > a{
font-weight:700;
}
.content .outline {
width:90%;
margin:3rem 5%;
}
}
@media only screen and (max-width: 991px){
.content .outline {
width:100%;
}
}

ステップ2：追加CSSに貼り付ける

ステップ2ではコピーした CSSを THE THOR(ザ・トール)の「追加CSS」に貼り付けて、カスタマイズを反映させます。

WordPressの管理画面から、

外観 → カスタマイズ → 追加CSS

と進み、追加CSS内に先ほどコピーしたコードを貼り付けてください。

追加CSSに貼り付ける

THE THOR(ザ・トール)の追加CSSについてもっと詳しく知りたい方は以下の記事をご覧ください。

関連記事
簡単！THE THOR「追加CSS」でカスタマイズする方法【徹底解説】

みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ！】ってタイトルありますよね。 でも コピペってどこに？追加 CSSって何？どうやって[…]

以上でカスタマイズは完了です。お疲れ様でした！

 
Ai
目次のカスタマイズの方法が分かったところで、お待ちかねのオリジナル目次デザインを紹介してくよ！気に入ったデザインがあったらコピペして使ってね♪
 
Jony
デザインは今後も更新してくで！もし「こんなデザインの目次が欲しい！」ってのがあっらた、リクエストしてな！
目次デザインのリクエストはコチラ

THE THOR コピペで作る目次デザイン22選

それでは THE THOR(ザ・トール)の目次デザインを紹介します。

今回の THE THOR(ザ・トール)の目次カスタマイズで参考にさせていただいた記事です。からあげ棒さん、ここあさん共に私たちが毎日サイト訪問するくらい勉強にさせていただいてるブロガーさんです。

THE THOR(ザ・トール)のカスタマイズが好きなら必見のお二人なのでぜひ参照ください！

旅するように人生を生きよう！
【コピペだけ！】THE THORの目次をおしゃれにカスタマイズ！

ここあです。   WordPressテーマ「THE THOR」には デフォルトで記事の目次を表示させる機能があるので  …

からあげ棒、ありったけ
THE THOR ザ・トール 目次の文字を揃える

THE THOR の標準状態の目次をベースに 目次の文字を揃えました。…

THE THORの目次の横幅を大きく

THE THORの目次の横幅を大きく

まずはシンプルに THE THOR(ザ・トール)の目次の横幅を大きくします。

横幅は 100%です。

CSSをコピペする
.content .outline{
width:100%;
}

THE THORの目次を真ん中に

THE THORの目次を真ん中に

続いて、幅を 90%に設定して少し狭くした時の中央揃えのデザインです。幅を狭くすることにより、目次の存在感と見やすさが引き立ちます。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
}

シンプルボーダー

シンプルなボーダーで囲みました。意外とオシャレで一番使いやすいかもです。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
border: solid 3px #333;
background: #fcfcfc;
}
.content .outline__item{
background: #fcfcfc;
}

シンプルボーダー２

THE THORの目次デザイン：カスタマイズ

シンプルーボーダーの色違いです。プラス角を丸くして項目の数字の周りを丸くしました。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
border: solid 3px #89c3eb;
background: #fffff9;
border-radius:5px;
}
.content .outline__item{
background: #fffff9;
}
.content .outline__number{
width:1.9em;
height:1.9em;
padding:0;
line-height:1.8em;
text-align:center;
background:#89c3eb;
color:#fff;
border-radius:50%;
}
.outline__title{
color:#777;
font-weight:bold;
font-size:18px;
}

よく見るサイトの目次風

THE THORの目次デザイン：カスタマイズ

ネットでよく見るサイトの目次風です。テキストを青にすることにより、読者に「クリックできる目次」ということをアピールできます。

意外と使いやすく、カチッとしたサイトにおすすめです。

CSSをコピペする
.content .outline{
background:#f9f9f9;
border:1px solid #aaa;
width:90%;
display:block;
margin:0 auto;
}
.content .outline__item{
background:#f9f9f9;
}
.content .outline__number{
background:none;
color: #333;
font-weight:bold;
}
.content .outline__link{
color:#0000ee;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "［非表示］";
border:none;
margin-left:-10px;
color:#0000ee;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［表示］";
border:none;
margin-left:-10px;
color:#0000ee;
}

背景塗りつぶし

THE THORの目次デザイン：カスタマイズ

背景色を塗りつぶした目次デザインです。これもオシャレですね。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
border:none;
background: #ede4cd;
}
.content .outline__item{
background: #ede4cd;
}
.content .outline__number{
font-size:15px;
background:initial;
color:#777;
}
.outline__title{
color:#777;
font-weight:bold;
font-size:18px;
}
.content .outline__switch::before{
border: 1px #777 solid;
border-radius:0px;
}

上下ボーダー

THE THORの目次デザイン：カスタマイズ

上下にボーダーを付けたオシャレな目次です。閉じた見栄えもキレイなのでオススメです。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
border-right:none;
border-left:none;
border-top:solid 5px #83ccd2;
border-bottom:solid 5px #83ccd2;
background:#ebf6f7;
}
.content .outline__item{
background:#ebf6f7;
}
.content .outline__number{
font-size:15px;
background:initial;
color:#777;
}
.outline__title{
color:#777;
font-weight:bold;
font-size:18px;
}

上下ボーダー【開閉なし】

THE THORの目次デザイン：カスタマイズ

上記の目次の【開閉ない】バージョンです。さらに目次タイトルを真ん中に持ってきたことにより、よりオシャレになりました。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
border-right:none;
border-left:none;
border-top:solid 5px #83ccd2;
border-bottom:solid 5px #83ccd2;
background:#ebf6f7;
}
.content .outline__item{
background:#ebf6f7;
}
.content .outline__number{
font-size:15px;
background:initial;
color:#777;
}
.outline__title{
color:#777;
font-weight:bold;
font-size:18px;
text-align:center;
display:block;
}
.content .outline__switch::before{
display:none;
}

二重線の枠

THE THORの目次デザイン：カスタマイズ

外枠を二重線にしました。色によってはキレイめにもカジュアルにもなりますね。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
border:double 5px #93ca76;
background:#fff;
}
.content .outline__item{
background:#fff;
}
.content .outline__number{
font-size:15px;
background:initial;
color:#93ca76;
}
.outline__title{
color:#777;
font-weight:bold;
font-size:18px;
}
.content .outline__switch::before{
position:absolute;
right:10px;
content:"OPEN";
}
/*OPEN CLOSEのカスタマイズ*/
.content .outline__toggle:checked + .outline__switch::before {
content: "［CLOSE］";
position:absolute;
right:10px;
color:#e34717;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［OPEN ］";
border: 0;
position:absolute;
right:10px;
color:#e34717;
}

破線の枠

THE THORの目次デザイン：カスタマイズ

外枠を破線にしてみました。後で思ったんですが、少しマナブログさん風ですね。

CSSをコピペする
.content .outline{
position:relative;
width:90%;
margin:0 auto;
display:block;
background: #f0f7ff;
border: dashed 2px #5b8bd0;
}
.content .outline__item{
background:#f0f7ff;
}
.content .outline__number{
font-size:15px;
background:initial;
color:#5b8bd0;
}
.outline__title{
color:#5b8bd0;
font-weight:bold;
font-size:18px;
}
.content .outline__switch::before{
position:absolute;
right:10px;
content:"OPEN";
}
/*OPEN CLOSEのカスタマイズ*/
.content .outline__toggle:checked + .outline__switch::before {
content: "［CLOSE］";
position:absolute;
right:10px;
color:#e34717;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［OPEN ］";
border: 0;
position:absolute;
right:10px;
color:#e34717;
}

左右二重線

THE THORの目次デザイン：カスタマイズ

左右に二重線を付けました。こちらもだいぶカジュアルになりますね！ちょっと色味が失敗したかもなので皆さんのセンスでオシャレにしてください。

CSSをコピペする
.content .outline{
position:relative;
width:90%;
margin:0 auto;
display:block;
background:#f3f3f2;
border-right:double 5px #ec6d51;
border-left:double 5px #ec6d51;
border-top:none;
border-bottom:none;
}
.content .outline__item{
background:#f3f3f2;
}
.outline__title:before{
font-family: "icomoon";
content: "\e92f";
margin-right:5px;
}
.content .outline__number{
font-size:15px;
background:initial;
color:#ec6d51;
}
.outline__title{
color:#ec6d51;
font-weight:bold;
font-size:18px;
}
.content .outline__switch::before{
position:absolute;
right:10px;
content:"OPEN";
}
/*OPEN CLOSEのカスタマイズ*/
.content .outline__toggle:checked + .outline__switch::before {
content: "［CLOSE］";
position:absolute;
right:10px;
color:#e34717;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［OPEN ］";
border: 0;
position:absolute;
right:10px;
color:#e34717;
}

ステッチ風

THE THORの目次デザイン：カスタマイズ

ステッチ風のデザインです。可愛いデザインですね。

背景色を変えるときは、backgroundとbox-shadowの両方を同じカラーに設定してください。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
background: #d6ebff;
box-shadow: 0px 0px 0px 10px #d6ebff;
border: dashed 2px #fff;
}
.content .outline__item{
background:#d6ebff;
}
.content .outline__number{
background:none;
font-size:17px;
color:#555;
}
.outline__title:before{
font-family: "icomoon";
content: "\ea51";
margin-right:5px;
color:#555;
}
.outline__title{
color:#555;
font-weight:bold;
font-size:18px;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "［閉じる］";
margin-left:-10px;
color:#007bbb;
font-size:15px;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［開く ］";
border:none;
margin-left:-10px;
font-size:15px;
color:#007bbb;
}

ステッチ風【開閉なし】

THE THORの目次デザイン：カスタマイズ

上記のステッチ風の色違いです。さらに角を丸くしてより可愛くしてます。

こちらは【開閉なし】のデザインです。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
background: #ffeaea;
box-shadow: 0px 0px 0px 10px #ffeaea;
border: dashed 2px #ffc3c3;
border-radius:5px;
}
.content .outline__item{
background:#ffeaea;
}
.content .outline__number{
background:none;
font-size:17px;
color:#555;
width:1.8em;
height:1.8em;
padding:0;
line-height:1.8em;
text-align:center;
background:#ffc3c3;
color:#fff;
border-radius:50%;
}
.content li ul li .outline__number{
background:transparent;
color:#555;
width:auto;
font-size:15px;
}
.outline__title:before{
font-family: "icomoon";
content: "\ea51";
margin-right:5px;
color:#555;
}
.outline__title{
color:#555;
font-weight:bold;
font-size:20px;
display:block;
text-align:center;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "［閉じる］";
display:none;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［開く ］";
display:none;
}

SANGO風

THE THORの目次デザイン：カスタマイズ

超絶オシャレな WordPress有料テーマの SANGO風です。もしくは Cocoon風でもある、オシャレなサイトに使用されがちな目次デザインです。

今回の中で一番気に入ってます。

CSSをコピペする
.content .outline{
position:relative;
width:90%;
margin:0 auto;
display:block;
background:#f3f3f2;
border-right:none;
border-left:none;
border-bottom:none;
border-top:solid 6px #444;
}
.content .outline__item{
background:#f3f3f2;
}
.outline__title:before{
display:inline-block;
font-family: "icomoon";
content: "\ea51";
margin-right:5px;
background: #444;
width:40px;
height:40px;
text-align:center;
border-radius:50%;
padding-top:4px;
color:#fff;
}
.content .outline__number{
font-size:15px;
color:#444;
}
.outline__title{
color:#444;
font-weight:bold;
font-size:18px;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "［閉じる］";
color:#e34717;
font-size:17px;
margin-left:-10px;
color:#444;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［開く ］";
border: 0;
margin-left:-10px;
color:#444;
font-size:17px;
}

SANGO風２(影あり)

上記の SANGO風の目次に影を付けました。これだけでもだいぶ印象が変わりますね。

こちらの目次デザインもお気に入りです。

CSSをコピペする
.content .outline{
position:relative;
width:90%;
margin:0 auto;
display:block;
background:#f7f2ec;
border-right:none;
border-left:none;
border-bottom:none;
border-top:solid 6px #efb509;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}
.content .outline__item{
background:#f7f2ec;
}
.content .outline__number{
background:none;
font-size:17px;
color:#b38540;
}
.outline__title:before{
display:inline-block;
font-family: "icomoon";
content: "\ea51";
margin-right:5px;
width:40px;
height:40px;
text-align:center;
background:#563e20;
border-radius:50%;
padding-top:4px;
color:#fff;
}
.outline__title{
color:#563e20;
font-weight:bold;
font-size:18px;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "［閉じる］";
font-size:17px;
margin-left:-10px;
color:#b38540;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［開く ］";
border: 0;
margin-left:-10px;
color:#b38540;
font-size:17px;
}

SANGO風3【開閉なし】

THE THORの目次デザイン：カスタマイズ

SANGO風の目次 3代目です。上記の次にリリースされたデザインと言う印象ですね。

シンプルでとてもオシャレな目次です。さすがsaruwakaさん。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
background: #f1f1f1;
border:none;
padding-top:0px;
}
.content .outline__item{
background: #f1f1f1;
}
.content .outline__number{
background:none;
font-size:17px;
color:#333;
border-radius:50%;
}
.content .outline__number:after{
content:".";
}
.content li ul li .outline__number{
background:transparent;
color:#555;
width:auto;
font-size:15px;
}
.outline__title:before{
font-family: "icomoon";
content: "\ea51";
margin-right:5px;
color:#fff;
}
.outline__title{
color:#fff;
font-weight:bold;
font-size:20px;
display:block;
text-align:center;
background:#5fc2f5;
margin-right:-20px;
margin-left:-20px;
padding:5px;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "［閉じる］";
display:none;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［開く ］";
display:none;
}

SANGO風4【開閉なし】

THE THORの目次デザイン：カスタマイズ

上記の SANGO風の目次に影を付けました。私たちのサイトでもつい最近まで採用されてた目次デザインです。

CSSをコピペする
.content .outline{
width:90%;
margin:0 auto;
display:block;
position:relative;
background:#fffbf4;
border:none;
padding-top:0px;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
border:solid 2px #fcd69e;
}
.content .outline__item{
background:#fffbf4;
}
.content .outline__number{
background:none;
font-size:17px;
color:#333;
border-radius:50%;
}
.content .outline__number:after{
content:".";
}
.content li ul li .outline__number{
background:transparent;
color:#555;
width:auto;
font-size:15px;
}
.outline__title:before{
font-family: "icomoon";
content: "\ea51";
margin-right:5px;
color:#555;
}
.outline__title{
color:#555;
font-weight:bold;
font-size:20px;
display:block;
text-align:center;
background:#fcd69e;
margin-right:-20px;
margin-left:-20px;
padding:5px;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "［閉じる］";
display:none;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "［開く ］";
display:none;
}

サルワカさん風【開閉なし】

THE THORの目次デザイン：カスタマイズ

私たちが一番 苦労した目次デザインであり力作です。

上記の目次デザインは SANGO風でしたが、この目次デザインはその SANGOの創設者のサルワカさんのサイトで採用されてるデザインを再現してます。

CSSをコピペする
/*サルワカ風の目次*/
.content .outline {
position:relative;
border: 3px solid #f89174;/*ボディのアウトライン*/
padding: 10px ;
padding-left:0px;
background:#fffbf4;/*ボディ内カラー*/
padding-top: 0px;
border-radius: 5px;/*ボーダーの角丸*/
border-top: none;
}

.content li ul li .outline__number{
color:#505050;/*リストの数字カラー*/
}
.content .outline__number{
background:initial;
font-weight:bold;
color:#555;
}

.content .outline__number::after {
position:absolute;
content: ".";
color: #505050;/*項目前のドットのカラー*/
font-weight: bold;
}
/*h3見出しのカラー*/
.outline__list .outline__list-3 .outline__link {
color: #666;/*文字カラー*/
}
.outline__list .outline__list-3 .outline__link:hover{
font-weight:normal;/*ホバー時のフォントサイズ*/
}
.content .outline__link {
transition-duration:0.4s;
display: block;
color:#505050;/*項目の文字カラー*/
padding-bottom: 8px;
letter-spacing:0.4px;
font-size: 18px ;
}

.content .outline__link:hover {
transition-duration:0.4s;
color: #e0e0e0;/*ホバー時の文字カラー*/
}

.outline__title {
color:#fff;/*目次タイトルの文字カラー*/
font-weight: bold;
font-size: 2rem;/*タイトルの大きさ*/
display: block;
text-align: center;
background-color: #f89174;/*タイトルの背景カラー*/
margin-right: -12px;
margin-left: -1px;
margin-top: 0px;
padding-top: 7px;
padding-bottom: 9px;
border-radius: 2px 2px 0 0 ;
}

.content .outline__toggle:checked + .outline__switch::before {
display:none;
}

.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}

.content .outline__switch + .outline__list {
background: transparent;
}

.content .outline__switch + ul.outline__list {
margin-left:0;
margin-right:0;
}

.content .outline__switch + .outline__list-2 li:first-child{
margin-top:1.0em;
}

.outline__title:before{
font-family: "Font Awesome 5 Free";
content: "\f00b";/*Font Awesome5のアイコン*/
margin-right:5px;
}
/*スマホの文字サイズと幅カスタマイズ*/
@media only screen and (max-width: 480px){
.content .outline__link{
font-size: 14px ;
margin-left: -10px;
}
}

/* 目次文頭揃え */
.outline__link {
padding-left:2em;
text-indent: -1em;
}

.outline__number{
text-indent: 0;
}

@media only screen and (min-width: 992px){
.outline__list-2 > li > a{
font-weight:700;
}

.content .outline {
width:90%;
margin:3rem 5%;
}
}

@media only screen and (max-width: 991px){
.content .outline {
width:100%;
}
}
関連記事
【THE THOR】目次をサルワカ風(SANGO)にカスタマイズ：CSSコピペ

みなさんこんにちは。 THE THOR(ザ・トール)のカスタマイズにハマりすぎて、朝起きたら"現代アート"みたいな寝グセになる Jonyと Ai(@10to1_travel)です。 アートと言えば、サルワカさん(@sa[…]

シンプルゴージャス(JIN風)

THE THORの目次デザイン：カスタマイズ

シンプルかつゴージャス感が出る目次デザインです。土台は WordPressの有料テーマ JINをモチーフにしてます。

CSSをコピペする
.content .outline{
border:1px solid #ddc96c;
width:90%;
display:block;
margin:0 auto;
position:relative;
}
.outline__title{
display:block;
text-align:center;
}
.content .outline__number{
background:none;
color:#ddc96c;
font-size:18px;
}

.content .outline__number{
width:2em;
height:2em;
padding:0;
line-height:2em;
text-align:center;
background:none;
border-right:solid 2px #ddc96c;
}
.content .outline__link{
color:#333;
}
.content .outline__toggle:checked + .outline__switch::before {
content: "CLOSE";
border:none;
position:absolute;
right:50px;
top:22px;
color:#707070;
background:#f2f2f2;
border-radius:0px;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "OPEN";
border:none;
position:absolute;
border-radius:0px;
right:50px;
top:22px;
color:#707070;
background:#f2f2f2;
}
@media only screen and (max-width: 480px){
.content .outline__toggle:checked + .outline__switch::before {
content: "CLOSE";
border:none;
position:absolute;
right:20px;
top:15px;
color:#707070;
background:#f2f2f2;
border-radius:0px;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "OPEN";
border:none;
position:absolute;
border-radius:0px;
right:20px;
top:15px;
color:#707070;
background:#f2f2f2;
}
}

AFFINGER風

THE THORの目次デザイン：カスタマイズ

WordPress有料テーマの AFFINGER風の目次デザインです。少し違いますが、使い勝手の良いシンプルなデザインです。

CSSをコピペする
.content .outline{
border:1px solid #aaa;
width:90%;
display:block;
margin:0 auto;
position:relative;
}
.outline__title{
font-weight:bold;
font-size:18px;
border-bottom:solid 2px #333;
}
.outline__title:before{
font-family: "icomoon";
content: "\e92f";
margin-right:3px;
font-weight:bold;
}
.content .outline__number{
display:none;
}
.content .outline__link:before{
font-family: "icomoon";
content: "\ea44";
margin-right:5px;
}
.content .outline__link{
color:#333;
font-size:15px;
font-weight:bold;
border-bottom:dashed 1px #aaa;
}
.outline__list .outline__list-3 .outline__link {
color: #666;
font-size:13px;
font-weight:normal;
border-bottom:none;
}
.outline__list .outline__list-3 .outline__link:before{
display:none;
}
.content .outline__switch + .outline__list-2 li:first-child{
margin-top:2rem;
}

.content .outline__toggle:checked + .outline__switch::before {
content: "[非表示]";
border:none;
color:#4682b4;
font-size:15px;
margin-left:0px;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}
.content .outline__switch::before {
content: "[表示]";
border:none;
color:#4682b4;
font-size:15px;
margin-left:0px;
}

ここあさん参照の目次

THE THORの目次デザイン：カスタマイズ

最初にも述べた、ここあさんの目次カスタマイズを参考にさせていただいたデザインです。

とてもオシャレで、正直 THE THOR(ザ・トール)ユーザーの多くが採用するほどの人気です。私たちも最初の 1年はこの目次を使用してました。

CSSをコピペする
/*目次 カスタマイズ*//*目次 ボディ*/
.content .outline {
position:relative;
border: 3px solid #606060;
padding: 10px ;
padding-left:0px;background:#fffff9;
}
/*H2見出しの番号*/
.content .outline__number{
width:1.8em;height:1.8em;
padding:0;
line-height:1.8em;
text-align:center;
background:#cda34f;
color:#ffffff;
border-radius:50%;
}
/*H3見出しの番号*/
.content li ul li .outline__number{
font-weight:bold;
background:transparent;
color:#606060;
width:auto;
}
/*テキストカラー*/
.content .outline__link {
transition-duration:0.2s;
display: block;
color:#606060;
}
/*マウスオーバー時のホバーエフェクト*/
.content .outline__link:hover {
transition-duration:0.2s;
color:#cda34f;
}
/*目次タイトル*/
.outline__title {
color:#505050;
font-weight: 700;
width:100%;
padding: 0px 0px 0px 20px;
}.content .outline__switch{
right:1.5rem;
top:10px;
}
/*OPEN CLOSEのカスタマイズ*/
.content .outline__toggle:checked + .outline__switch::before {
content: "［ ▲ CLOSE］";
position:absolute;
right:10px;
color:#e34717;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}.content .outline__switch::before {
content: "［ ▼ OPEN ］";
border: 0;
position:absolute;
right:10px;
color:#e34717;
}
/*ボーダー装飾*/
.content .outline__switch + .outline__list {
background: transparent;
}
.content .outline__switch + ul.outline__list {
margin-left:0;
margin-right:0;
border-top:4px dotted #cfcfcf;
}
.content .outline__switch + .outline__list-2 li:first-child{
margin-top:1.0em;
}
.content .outline__switch + .outline__list-2 li ul li:first-child{
margin-top:0.5em;
}
.outline__list-2 > li > a{
font-weight:700;
}
/*タイトル横のアイコン*/
.outline__title:before{
font-family: "icomoon";
content: "\e92f";
margin-right:5px;
}
/* 目次の頭揃え */
.outline__link {
padding-left:2em;
text-indent: -2em;
}
.outline__number{
text-indent: 0;
}
.outline__list-3 .outline__link {
padding-left:3em;
text-indent: -2.85em;
}
@media only screen and (min-width: 992px){
.outline__list-2 > li > a{
font-weight:700;
}
.content .outline {
width:90%;
margin:3rem 5%;
}
}
@media only screen and (max-width: 991px){
.content .outline {
width:100%;
}
}
旅するように人生を生きよう！
【コピペだけ！】THE THORの目次をおしゃれにカスタマイズ！

ここあです。   WordPressテーマ「THE THOR」には デフォルトで記事の目次を表示させる機能があるので  …

10to1オリジナル目次

THE THORの目次カスタマイズデザイン

私たちのサイトで採用してた 10to1オリジナル目次です。

この目次は閉じた状態で設置することを目的としたデザインで、だからこそ[OPEN]と[CLOSE]を目立たせたデザインにしました。

シンプルですが、かなり使いやすくオシャレに仕上がりました。

しかしひとつ問題があり、この目次はサイトによって開閉ボタンのデザインが少し崩れます。使用するときはサイトによって微調整してください。

CSSをコピペする
.content .outline {
position:relative;
border:solid 3px #ffcc66;
background:#fffbf4;
padding:5px;
box-shadow: 0 1.5px 2.4px rgb(0 0 0 / 15%);
}
.outline__list .outline__list-3 .outline__link {
color: #666;
font-weight:normal;
font-size:17px;
}
.outline__list .outline__list-3 .outline__link:hover{
color:#f89174;
font-weight:normal;
}
.content li ul li .outline__number{
font-weight:bold;
background:transparent;
color:#505050;
width:auto;
display:none;
}
.outline__list-3 .outline__link:before{
content:"・";
font-weight:bold;
}
.content .outline__number{
position: relative;
color:#505050;
background-color:transparent;
}

.content .outline__number::after {
position:absolute;
content: ".";
color: #505050;
font-weight: bold;
}
.content .outline__link {
transition-duration:0.2s;
display: block;
color:#555;
padding-bottom: 5px;
font-size: 18px ;
}
.content .outline__link:hover{
color:#f89174;
}
.outline__title {
color:#555;
font-weight: bold;
font-size: 2rem;
display: block;
text-align:center;
padding-top:2px;
padding-bottom:2px;
}

.content .outline__toggle:checked + .outline__switch::before {
content: "Close";
padding-right:7px;
padding-left:7px;
padding-top: 15px;
font-weight:bold;
font-size:15px;
text-align:center;
height:52px;
width:60px;
position:absolute;
right:-1px;
color:#fff;
background:#ffcc66;
border-top:none;
border-right:none;
border-left: none;
border-radius:0px;
margin-top:-1px;
}
.content .outline__toggle:checked + .outline__switch:hover:before{
transition:0.2s;
background:#f89174;
}
.content .outline__toggle:checked + .outline__switch + .outline__list {
margin-top: 1rem;
}

.content .outline__switch:before {
content: "Open";
padding-top: 15px;
padding-right:7px;
padding-left:7px;
transition:0.2s;
font-weight:bold;
font-size:15px;
text-align:center;
height:52px;
width:60px;
position:absolute;
right:-1px;
top:0px;
color:#fff;
background:#ffcc66;
border-top:none;
border-bottom:none;
border-right:none;
border-left:none;
border-radius:0px;
margin-top:-1px;
}
.content .outline__switch:hover:before{
transition:0.2s;
background:#f89174;

}
.content .outline__switch + .outline__list {
background: transparent;
}
.content .outline__switch + ul.outline__list {
margin-left:0;
margin-right:0;
}

.content .outline__switch + .outline__list-2 li:first-child{
margin-top:1.0em;
}

.content .outline__switch + .outline__list-2 li ul li:first-child{
margin-top:0.5em;
}

.outline__list-2 > li > a{
font-weight:700;
}

.outline__title:before{
font-family: "Font Awesome 5 Free";
content: "\f00b";
margin-right:5px;
}
@media only screen and (max-width: 480px){
.content .outline__link{
font-size: 15px ;
margin-left: -10px;
}
.outline__list .outline__list-3 .outline__link {
font-size: 13px;
}
}

/* 目次文頭揃え */
.outline__link {
padding-left:1em;
text-indent: -1em;
}
.outline__number{
text-indent: 0;
}

@media only screen and (min-width: 992px){
.outline__list-2 > li > a{
font-weight:700;
}

.content .outline {
width:90%;
margin:3rem 5%;
}
}

@media only screen and (max-width: 991px){
.content .outline {
width:100%;
}
}

THE THOR 目次カスタマイズを調節する方法

上記の目次を「もっと自分のサイトに合うデザインにカスタマイズしたい！」と思いますよね。

そんなあなたのために、超初心者向けの誰でもできる簡単な調節の方法をご紹介します！

  • 文字の色を変更する
  • 背景の色を変更する
  • ボーダーを変更する
  • アイコンを変更する

色を変更する際は #から始まる 6桁のカラーコード(例：#000000)を使用します。カラーコードは私たちが参考にしてる原色大辞典が便利です。

原色大辞典
WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本…

※CSSを編集する時は、必ず「:;」で挟んでください。「:;」のどちらかを忘れるとコードがうまく表示されません。

文字の色を変更する

目次の文字の色を変更する方法です。文字の色を変更するには以下のコード部分を編集します。

color:#000000;

colorとはテキストの色を変更するための CSSのプロパティ(値)です。

あなたが変更したい文字のカラーコードを希望の色に変更してご使用ください。

例えば、カラーコードの入力方法は以下の通りです。

  • color:#ff7f50;
  • color:#1e90ff;
  • color:#674196;

背景の色を変更する

目次の背景の色を変更する方法です。背景色を変更するには以下のコード部分を変更します。

background:#000000;

backgroundとは背景色を変更するための CSSのプロパティ(値)です。

あなたが変更したい背景色のカラーコードを希望の色に変更してご使用ください。

例えば、カラーコードを入力すると以下のようになります。

background:#fcd575;

background:#98d98e;

background:#fdeff2;

ボーダーを変更する

目次のボーダーの色・太さ・種類を変更する方法です。ボーダーを変更するには以下のコード部分を変更します。

border:solid(種類) 3px(太さ) #000000(色);

borderは 3つの要素を入れて使用します。3つの要素は上記のように半角スペースを入れて羅列してください。

3つの要素(種類・太さ・色)については以下を参照ください。

ボーダーの種類

solid一本線(デフォルト)
double二重線
dashed破線
dotted点線

ボーダーの太さ

ボーダーの太さは ○pxで指定します。数値が大きくなるほど線が太くなります。

サイトでは基本的に 1〜5px内で使用されることが多いです。

ボーダーの色

ボーダーの色は #から始まる 6桁のカラー番号で指定します。変更したいカラー番号を入力してください。

例えば、カラーコードを変えると以下のようになります。

  • color:#ff7f50;
  • color:#1e90ff;
  • color:#674196;

上記を踏まえて、作成するボーダーの例は以下のようになります。

CSSボーダーの作り方

アイコンを変更する

少しレベルが上がりますが、アイコンを変更する方法です。

アイコンを変更するにはアイコンコードを使用します。アイコンコードは使うアイコンによって利用するコードが違います。

アイコンを変更するには以下のプロパティを編集します。

content:”\f00b”;

アイコンコードは\f00bの部分です。

アイコンを使用する際の注意事項です。

  • アイコンコードは必ず《 “” 》で挟んで使用する
  • アイコンコードの前には必ずバックスラッシュ《 \ 》を付ける
  • どのサイトから使用したかを CSSに追記する

アイコンを使用する際は、contentのプロパティとセットで font-familyプロパティでサイトのコードを追記します。

アイコンコードの参照は 2つのサイトを利用します。

  • Icomoon(アイコムーン)
  • FontAwesome(フォントオーサム)

Icomoonは THE THORで使用してるアイコンですので設定はアイコンコードを設置するだけで OKです。

FontAwesomeはウェブ界でとても有名なサイトサービスですので、コチラもオススメです。ただし、利用するには少し設定が必要ですので、ご紹介します。

これらのサイトから使用する場合のコードは以下のようになります。

Icomoonの場合

font-family: "icomoon";
content: "\e92f";

FontAwesomeの場合

font-family: "Font Awesome 5 Free";
content: "\f00b";

FontAwsomeを使用する際の準備と設定

Font Awesomeの設定

Font Awesomeは、数多くのウェブアイコンを扱う Webサイトです。
無料、有料ありますが、無料のアイコンで十分です。

→Font Awesome5

今回 Font Awesomeのアイコンを使用するので少し準備をする必要があります。
っと言ってもコードをコピペするだけなのでカンタンです。

手順1：以下のコードをコピー

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

あなたのサイトで Font Awesomeを反映させるためのコードです。

手順2：headタグ内に貼り付け

THE THORheadタグに貼り付け
外観 → 基本設定[THE] → 高度な設定

コピーしたコードを THE THOR(ザ・トール)の</head>タグ直上に貼り付けます。

以上で準備は完了です。
ではお楽しみのカスタマイズと行きましょう！

THE THORの目次をカスタマイズする時の注意点

今回 THE THOR(ザ・トール)の目次カスタマイズのデザインには【開閉あり】と【開閉なし】があります。

分けてる理由は、各々で表現できるデザインが違うからです。なので、【開閉なし】に開閉ボタンを表示するとデザインが崩れる可能性があります。

また、サイトによってはコピペだけじゃデザインが崩れる可能性があります。

その場合はお問い合わせいただくか、CSSに詳しい人は微調整を行ってください。

使いたいデザインの修正をリクエストする！(無料)

THE THORの目次が表示されない時の解決策2つ

先日、読者さんから「THE THOR(ザ・トール)の目次が表示されない！」とお問い合わせをいただきました。正確には [ outline ]と表示されてしまうらしいです。

「もしかして何か間違ったことした！？どーしよう！！」と焦らなくても大丈夫です！

記事に目次が表示されない問題はとても簡単に解決することができます。

今回は 2つの方法を紹介します。

  • 目次の表示設定を確認する
  • 目次の最小見出しの数を確認する

解決策1：目次の表示設定を確認する

THE THOR(ザ・トール)の目次が表示されない多くの原因がこれです。

THE THORの目次が表示されない時の解決策

最初にお伝えした、目次の設定でしっかりと「表示する」になっているか確認してください。ここが「非表示(default)」になっていると目次が表示されません。

解決策2：目次の最小見出しの数を確認する

次に同じ目次の設定の最小見出しの数を確認してください。

THE THORの目次が表示されない時の解決策

「目次を表示するための最小見出し数を指定」を見てください。これは簡単に言うと、「見出しの数が最低いくつある時に目次を表示するか」と言う意味です。

この見出し数の数が大きすぎる( 5〜10)とエラーを起こし、目次が表示されないケースがあります。

基本的には 1〜3に設定しておきましょう。
※当ブログは 1に設定してます。

THE THOR コピペで作る目次デザインのカスタマイズ：まとめ

今回は THE THOR(ザ・トール)の目次デザインをコピペだけでおしゃれにカスタマイズしました。

これで周りの THE THOR(ザ・トール)ユーザーと差をつけれましたね！

 
いや、これだけじゃ差はつけれないと思うよ。。。
 
いいねん！カスタマイズは自己満や！笑

今回の記事で何か分からない部分、もっと知りたいこと、カスタマイズデザインのリクエストなどありましたらどんな些細なことでもご質問ください！

常時、お問い合わせもしくは Twitterの DMにて受け付けております。

お問い合わせ
TwitterのDM

最後まで読んでいただきありがとうございます。

おわり