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

目次カスタマイズ画像

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

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

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

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

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

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

工作する手

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

THE THORの標準目次

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

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

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

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

LIFE MEMOPADの目次

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

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

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

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

追加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ですが、カラーを変えたい!という方もいるかもしれないので、そういった方は自身でカラーのカスタマイズもしてみましょう。

ステップ2:項目ごとのカスタマイズ

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

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

枠線カスタマイズ
border-top: 3px  solid #ffc993;
border-left: 1px solid #e5f2ff;
border-right: 1px solid #e5f2ff;
border-bottom: 2px solid #ffc993;

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

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

閃く瞬間

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

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

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

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

カスタマイズのメリット

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

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

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

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

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

スマートフォンの中の手

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

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

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

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

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

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

THE THOR
5

\当サイト使用テーマ『THE THOR』/

【複数サイト運営OK!】
WordPressテーマ選びで悩んでいるなら、SEO・機能・デザインが揃ったTHE THORをおすすめします。有名ブロガーやアフィリエイターも使用するこのテーマで、PV数の上昇や収益のしやすやが評判のこのテーマ。
\特別価格あり/

目次カスタマイズ画像
最新記事をチェック!
>LINEマガジン(無料Webライタースクール)

LINEマガジン(無料Webライタースクール)

私のLINEマガジンでは、「スキルを習得して人生の選択肢を増やす」をコンセプトに、ビジネスにおける基本となる”ライティングスキル”に関する情報を配信しています。

あなたは文章力を磨いてどんな人生の選択肢を増やしていきたいですか…?

「仕事」「日常のやりとり」「恋愛」などなど、生活の中で”文章”は欠かせません。まさに文章力を磨くことが、人生の選択肢を増やす一番の近道といってもいいでしょう!

文章から何に繋げるかは、あなた次第です…。

人生の選択肢は「あなた自身」でどんどん増やしていきましょう。

だからこそ、文章です!あなたの人生をより良い方向へと導くためにも、文章力、ライティングスキルを磨きましょう。