THE THORの目次カスタマイズ方法【コピペOK！】

こんにちは、まさひろです。

今回は有名なWordPressテーマの『THE THOR』の目次カスタマイズについてご紹介していきたいと思います。もちろん、コピペOK！

今回は目次のカスタマイズを紹介していきますので、デフォルトの目次が気に入らないという方はぜひ参考にしてみてください。

「THE THOR」はとても使い勝手が良く、高機能なWordPressテーマです。

ですが高機能がゆえに、使い方を覚えないと宝の持ち腐れをしてしまいますので、ぜひいち早く使い方を覚えましょう！

【THE THOR】目次のカスタマイズ方法

では早速、目次のカスタマイズ方法の紹介です。
まずはデフォルトの目次を見てみましょう。

オレンジの枠で囲ってある部分が目次ですね。
ハッキリ言いますがダサい。。。

正直、自身のサイトをある程度育てたいのであればこういった些細なところにもこだわってカスタマイズしたいものですよね

ですが、きちんとカスタマイズすることであなただけのオリジナルサイトに成長させることができますのでこだわっていきましょう！

ちなみに当サイトの目次はこんな感じ。

自分ではかなり気に入っていますね。

では、実際のカスタマイズ方法の解説です。２ステップでカスタマイズできますので、簡単ですよ。

ステップ１：ダッシュボードから項目を選択

ダッシュボード内の、「外観」→「カスタマイズ」をクリックしましょう。

「追加CSS」にて、以下のコードをコピペします。

カスタマイズコード

.content .outline {

border-top: 3px solid #ffc993;

    border-left: 1px solid #e5f2ff;

    border-right: 1px solid #e5f2ff;

    border-bottom: 2px solid #ffc993;

padding: 10px 0 10px;background:#f9fcff;}

.content li ul li .outline__number{

font-weight:bold;background:transparent;color:#99ccff;width:auto;}

.content .outline__number{

width:1.8em;height:1.8em;padding:0;line-height:1.8em;text-align:center;background:#f3981d;color:#fff;border-radius:50%;}

}

.content .outline__link {display: block;color:#202020;}

.content .outline__link:hover {color:#6c9bd2;}

.outline__title {

color: #7fbfff;font-weight: 700;width:100%;padding: 0px 0px 0px 20px;}

.content .outline__switch{right:1.5rem;top:10px;}

.content .outline__toggle:checked + .outline__switch::before {content: “［ CLOSE ］”; }

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

.content .outline__switch::before { content: “［ OPEN ］”; border: 0;color:#999; float: right;}

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

.content .outline__switch + ul.outline__list {margin-left:0;margin-right:0;border-top:2px dotted #ffbf7f; }

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

@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%; 

margin: 3rem 0;}}

上記をコピペでOKですが、カラーを変えたい！という方もいるかもしれないので、そういった方は自身でカラーのカスタマイズもしてみましょう。

ステップ２：項目ごとのカスタマイズ

それぞれのカラーコードの後ろに変更箇所を記載していますので、そちらを参考にしてみてくださいね。

例えば枠線全体のカラーの変更は、以下の部分を変更させます。

枠線カスタマイズ

border-top: 3px  solid #ffc993;
border-left: 1px solid #e5f2ff;
border-right: 1px solid #e5f2ff;
border-bottom: 2px solid #ffc993;

当サイトの場合は、枠線ごとにカラーを変えています。
もし自分が変更したいカラーコードが分からない方は、カラーコード表を参考にしてみてください。

目次カスタマイズのコツについて

実際にカスタマイズしようとしているあなたへ、一つだけアドバイスです
シンプルイズベスト、これに尽きます。

そしてシンボルカラーを決めておきましょう。あなたのシンボルカラーは何色ですか…？

僕はサイトカラーをオレンジにしてまして、オレンジとブルー系統の色で統一させています。

ですので様々な色を使ってカスタマイズするのではなく、シンプルに一色もしくは２色くらいで統一させるのが良いんじゃないですかね。

カスタマイズのメリット

目次をカスタマイズするメリットはたくさんあり、かなり重要な役割があります。

味気ない目次だと、ユーザーにとっても「なんだかオリジナル感のないサイトだな」と思われてしまいかねないので、意外と重要。

• CSSなどの知識が身に付く
• オリジナルサイトになる
• サイトがおしゃれに見える
• 自分でカスタマイズするので、サイトに愛着が湧く

本気でサイトを育てるのであれば、必ずこだわって取り組みたいですよね。

THE THORがおすすめな理由とは

実は「目次」などは、プラグインを使って自分で導入しなければいけません。

もちろん有料テーマはほぼ全て目次を標準で設置できるのですが、「THE THOR」は他にもまだまだ魅力的な機能が満載です。

あなたが『THE THOR』を使うべき理由でもその魅力は解説していますが、もう一度この場でまとめてみますね。

• SEOに強い
• 表示速度が速い
• 標準機能が満載
• 購入者サポートが充実している
• 有名ブロガーやアフィリエイターも使用

しかも一度購入すれば、複数サイトでの利用が可能ですのでコスパも最強ですね。

おそらくこの記事をご覧になっているあなたはすでにテーマを購入済みかと思いますが、まだ購入していないよ、という方はぜひ使ってみることをおすすめします。