みなさんこんにちは。
THE THORユーザーの Jonyと Ai (@10to1_travel)です。
さて、THE THOR(ザ・トール)の目次は地味で有名ですね。
THE THOR(ザ・トール)に怒られるで!
目次はサイトに訪れたユーザーが「その記事は何が書いてあるか」を確認できる重要な役割を果たします。
そこで今回は THE THOR(ザ・トール)の目次をおしゃれにカスタマイズします!
今回のカスタマイズ 内容
- もっと読みやすく
- サイトカラーをつける
- 画面中央に寄せる
- おしゃれにする
- OPEN/CLOSE を消す
私たちは THE THOR(ザ・トール)を使って 1年目です。
目次は結構 最初のころにカスタマイズしました。
色んな人のデザインも参考にさせていただいたので、そのユーザーさんたちのカスタマイズ案も紹介しますね。
※カスタマイズは自己責任でお願いします。
私たちは THE THORのカスタマイズが大好きです。
THE THOR(ザ・トール)の目次だけでなく、ブログを本格的にカスタマイズしたい方は、HTML・CSSの勉強にオススメの本8冊|ブログをもっとカスタマイズ!をご覧ください。
THE THOR(ザ・トール)の目次は地味【CSS カスタマイズ必須】
※個人の感想です。
THE THORってスラっとしたデザインでおしゃれです。
でもスッキリすぎて目次が地味なんですよね。
以下がデフォルトの THE THORの目次です。

うーん。。。ちょっと地味すぎるな。笑
THE THOR 目次の不満点
- 地味
- 見づらい
- なぜか左寄り
そこで CSSでカスタマイズすることにしました!
完成は以下の通り

【追記】THE THORの目次をサルワカ風(SANGO)にカスタマイズしました。
サルワカ風の目次もオススメなのでご覧ください。
みなさんこんにちは。 THE THOR(ザ・トール)のカスタマイズにハマりすぎて、朝起きたら"現代アート"みたいな寝グセになる Jonyと Ai(@10to1_travel)です。 アートと言えば、サルワカさん(@sa[…]
THE THOR(ザ・トール)の目次【設定 方法】
THE THORの目次をカスタマイズする前に、まずは目次を設置しましょう。
もう少し詳しく THE THORの追加 CSSの方法を知りたい人は以下の記事をご覧ください。
みなさんこんにちは。 THE THORのデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ!】ってタイトルありますよね。 でも コピペってどこに?追加 CSSって何?どうやって[…]
THE THOR(ザ・トール)目次を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%;
}
}
上記をコピペして完了です。
各項目のカラーを変更するには #のカラー番号を希望の色に変えてください。
色を変えるだけでだいぶ雰囲気が変わります。
カラー番号は以下の記事がとても分かりやすく紹介しています。
私たちがいつも参考にしてるサイトなのでオススメです。
アウトラインの太さを変えたい場合は/*目次 ボディ*/のborderの 3pxの数値を変更してください。
大きくすると太くなります。
逆に小さくすると細くなります。
ちなみにアウトラインを角丸にしたいなら、/*目次 ボディ */にborder-radius:5px;を追記してください。
カスタマイズは以上です。
お疲れ様でした。
THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズ 一覧
THE THORの目次をおしゃれにカスタマイズしてるのは私たちだけではありません。
私たちが参考にしたおしゃれな方たちのカスタマイズ案も貼っておくのでぜひご覧ください!
ここあさんのカスタマイズ
私たちが参考にしたカスタマイズです。
とても分かりやすく、おしゃれですね。
ここあです。 WordPressテーマ「THE THOR」には デフォルトで記事の目次を表示させる機能があるので …
カスログさんのカスタマイズ
THE THORのカスタマイズに詳しいカスログさんの提案する目次です。
「THE THOR」のもくじをカスタマイズしてみました。CSSコピペで実装できるものとテーマファイルを編集するもの、2種…
masaaさんのカスタマイズ
THE THORのカスタマイズと言えば masaaさんです!
私たちも頻繁にお世話になっていて、とても参考になるカスタマイズばかりです。
THE THOR(ザ・トール)のおすすめ カスタマイズ 一覧
私たちはカスタマイズが大好きで、THE THORの色んなパーツを日々いじって研究してます。
そんな私たちのカスタマイズ案です。
THE THOR(ザ・トール)目次をCSSでおしゃれにカスタマイズ まとめ
今回は THE THORの目次をおしゃれにカスタマイズしました。
これで周りの THE THORユーザーと差をつけれましたね!
この他にも THE THORのカスタマイズをしてますので、ご覧ください!
最後まで読んでいただきありがとうございます。
おわり