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

みなさんこんにちは。

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

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

Jony

いきなりズバッと言うな笑
THE THOR(ザ・トール)に怒られるで！

とは言え若干目次は手を抜いた感あるよね。苦笑

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

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

今回のカスタマイズ内容

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

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

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

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

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

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

1 THE THOR(ザ・トール)の目次は地味【CSS カスタマイズ必須】
2 THE THOR(ザ・トール)の目次【設定方法】
3 THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズ
4 THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズ一覧
5 THE THOR(ザ・トール)のおすすめカスタマイズ一覧
6 THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズまとめ

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

※個人の感想です。

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

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

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

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

THE THOR 目次の不満点

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

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

完成は以下の通り

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

【THE THOR】目次をサルワカ風(SANGO)にカスタマイズ！

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

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

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

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

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

簡単！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%;
}
}