THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズ

みなさんこんにちは。

THE THORユーザーの Jonyと Ai (@10to1_travel)です。

さて、THE THOR(ザ・トール)の目次は地味で有名ですね。

 
Jony
いきなりズバッと言うな笑
THE THOR(ザ・トール)に怒られるで!
 
Ai
とは言え若干 目次は手を抜いた感あるよね。苦笑

目次はサイトに訪れたユーザーが「その記事は何が書いてあるか」を確認できる重要な役割を果たします。

そこで今回は THE THOR(ザ・トール)の目次をおしゃれにカスタマイズします!

今回のカスタマイズ 内容

  • もっと読みやすく
  • サイトカラーをつける
  • 画面中央に寄せる
  • おしゃれにする
  • OPEN/CLOSE を消す

私たちは THE THOR(ザ・トール)を使って 1年目です。
目次は結構 最初のころにカスタマイズしました。

色んな人のデザインも参考にさせていただいたので、そのユーザーさんたちのカスタマイズ案も紹介しますね。

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

私たちは THE THORのカスタマイズが大好きです。

THE THOR(ザ・トール)の目次だけでなく、ブログを本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊|ブログをもっとカスタマイズ!をご覧ください。

THE THOR(ザ・トール)の目次は地味【CSS カスタマイズ必須】

※個人の感想です。

THE THORってスラっとしたデザインでおしゃれです。

でもスッキリすぎて目次が地味なんですよね。

以下がデフォルトの THE THORの目次です。

THE THORの目次

うーん。。。ちょっと地味すぎるな。笑

THE THOR 目次の不満点

  • 地味
  • 見づらい
  • なぜか左寄り

そこで CSSでカスタマイズすることにしました!

完成は以下の通り

THE THOR 目次 カスタマイズ

【追記】THE THORの目次をサルワカ風(SANGO)にカスタマイズしました。
サルワカ風の目次もオススメなのでご覧ください。

関連記事

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

THE THOR(ザ・トール)の目次【設定 方法】

THE THORの目次をカスタマイズする前に、まずは目次を設置しましょう。

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

もう少し詳しく THE THORの追加 CSSの方法を知りたい人は以下の記事をご覧ください。

関連記事

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

THE THOR(ザ・トール)目次を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%;
}
}

上記をコピペして完了です。

各項目のカラーを変更するには #のカラー番号を希望の色に変えてください。

色を変えるだけでだいぶ雰囲気が変わります。

カラー番号は以下の記事がとても分かりやすく紹介しています。
私たちがいつも参考にしてるサイトなのでオススメです。

原色大辞典

アウトラインの太さを変えたい場合は/*目次 ボディ*/border3pxの数値を変更してください。

大きくすると太くなります。
逆に小さくすると細くなります。

ちなみにアウトラインを角丸にしたいなら、/*目次 ボディ */border-radius:5px;を追記してください。

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

THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズ 一覧

THE THORの目次をおしゃれにカスタマイズしてるのは私たちだけではありません。

私たちが参考にしたおしゃれな方たちのカスタマイズ案も貼っておくのでぜひご覧ください!

ここあさんのカスタマイズ

私たちが参考にしたカスタマイズです。
とても分かりやすく、おしゃれですね。

旅するように人生を生きよう!

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

カスログさんのカスタマイズ

THE THORのカスタマイズに詳しいカスログさんの提案する目次です。

カスログ for THE THOR

「THE THOR」のもくじをカスタマイズしてみました。CSSコピペで実装できるものとテーマファイルを編集するもの、2種…

masaaさんのカスタマイズ

THE THORのカスタマイズと言えば masaaさんです!
私たちも頻繁にお世話になっていて、とても参考になるカスタマイズばかりです。

MASAa.net

WordPressテーマ THE THOR(ザ・トール)の「目次」のカスタマイズについてまとめてみました。今回の「目次」…

THE THOR(ザ・トール)のおすすめ カスタマイズ 一覧

私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。

そんな私たちのカスタマイズ案です。

みなさんこんにちは。 THE THOR(ザ・トール)大好きの Jony […]

THE THORユーザーの皆さんこんにちは。Jonyと Ai(@10t […]

みなさんこんにちは。 THE THORにはテーブル機能が付いています。 […]

みなさんこんにちは。 THE THOR(ザ・トール)って人気の有料テー […]

みなさんこんにちは。 THE THOR(ザ・トール)のマーカーはとても […]

THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズ まとめ

今回は THE THORの目次をおしゃれにカスタマイズしました。

これで周りの THE THORユーザーと差をつけれましたね!

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

この他にも THE THORのカスタマイズをしてますので、ご覧ください!

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

おわり